{"_id":"@daviddarnes/contrast-details","_rev":"2-9a2a23f000722b2cf2094846daa2e5e8","name":"@daviddarnes/contrast-details","description":"A Web Component to display the contrast ratio and level of two colours using CSS custom properties","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0":{"name":"@daviddarnes/contrast-details","version":"1.0.0","keywords":["web","component","components","web components","custom elements"],"author":{"url":"https://darn.es/","name":"David Darnes","email":"me@daviddarnes.com"},"license":"MIT","_id":"@daviddarnes/contrast-details@1.0.0","maintainers":[{"name":"daviddarnes","email":"me@daviddarnes.com"}],"homepage":"https://github.com/daviddarnes/contrast-details#readme","bugs":{"url":"https://github.com/daviddarnes/contrast-details/issues"},"dist":{"shasum":"759139a489389a4344f0e8dd0b03544c0c080b98","tarball":"https://registry.npmjs.org/@daviddarnes/contrast-details/-/contrast-details-1.0.0.tgz","fileCount":9,"integrity":"sha512-1O2p7AZEvwHJ39V5Se2o3dJ0iU+Nw8qyO03Lf1obqGbJVXh/yT/gq8s0W3rpO2FMhKqIa0NdiT41C/DpoZ9/nQ==","signatures":[{"sig":"MEQCIEXljJXOibZcOjqJ9tyg580M/iNgUUK4B9rEIiZ9z0jdAiAyPS9OhO6uM9QWA1mHD4Dsl8yYzp0knzFzer+Xwt8wmQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":10141},"main":"contrast-details.js","gitHead":"cacaa9d37301e9b85b3bb73f63b44b5e40163aa5","scripts":{"start":"npx http-server ."},"_npmUser":{"name":"daviddarnes","email":"me@daviddarnes.com"},"repository":{"url":"git+https://github.com/daviddarnes/contrast-details.git","type":"git"},"_npmVersion":"8.19.4","description":"A Web Component to display the contrast ratio and level of two colours using CSS custom properties","directories":{},"_nodeVersion":"16.20.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/contrast-details_1.0.0_1713536446603_0.8278458015101773","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@daviddarnes/contrast-details","version":"1.0.1","keywords":["web","component","components","web components","custom elements"],"author":{"url":"https://darn.es/","name":"David Darnes","email":"me@daviddarnes.com"},"license":"MIT","_id":"@daviddarnes/contrast-details@1.0.1","maintainers":[{"name":"daviddarnes","email":"me@daviddarnes.com"}],"homepage":"https://github.com/daviddarnes/contrast-details#readme","bugs":{"url":"https://github.com/daviddarnes/contrast-details/issues"},"dist":{"shasum":"5f26a56c3b955cac9f405bac53f252736ea348bb","tarball":"https://registry.npmjs.org/@daviddarnes/contrast-details/-/contrast-details-1.0.1.tgz","fileCount":9,"integrity":"sha512-ay4GkDIOCV+fO71UwM9I4Md4YsUx6I4fy1DHro+mhOr3OqjVeMnsFYTP0tz1hQPxjt5yL9JEyBvwXsISmkx0qQ==","signatures":[{"sig":"MEUCIQCbn2rn0tMn9dP0lWOXDq0nZrW1pGxZCoH8jV1Prf8gKAIgb0pikRilNj+QSk05E5mCrrwSrzxKe8iFZ3LaDpQS34Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":10141},"main":"contrast-details.js","gitHead":"0b7c20018efe252021fb37fd3c10eaf196cf448a","scripts":{"start":"npx http-server ."},"_npmUser":{"name":"daviddarnes","email":"me@daviddarnes.com"},"repository":{"url":"git+https://github.com/daviddarnes/contrast-details.git","type":"git"},"_npmVersion":"8.19.4","description":"A Web Component to display the contrast ratio and level of two colours using CSS custom properties","directories":{},"_nodeVersion":"16.20.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/contrast-details_1.0.1_1713539296676_0.2130059889125535","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"@daviddarnes/contrast-details","version":"1.1.0","description":"A Web Component to display the contrast ratio and level of two colours using CSS custom properties","main":"contrast-details.js","scripts":{"start":"npx http-server ."},"repository":{"type":"git","url":"git+https://github.com/daviddarnes/contrast-details.git"},"keywords":["web","component","components","web components","custom elements"],"license":"MIT","publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/daviddarnes/contrast-details/issues"},"author":{"name":"David Darnes","email":"me@daviddarnes.com","url":"https://darn.es/"},"homepage":"https://github.com/daviddarnes/contrast-details#readme","gitHead":"eb0069ae7cc1df6bc641d1dd5e459e5a9e71645b","_id":"@daviddarnes/contrast-details@1.1.0","_nodeVersion":"16.20.2","_npmVersion":"8.19.4","dist":{"integrity":"sha512-rudJdeY2X1aQrheUhG0P9Svq5VBFEjd/qw/FVRlm6+p6npmOJYcuHo86Heq+SC4o3/O/OziQXKhNXVl1IRSn0A==","shasum":"ec9089cc69666fd0caa2f069cc9d2f770c6857d5","tarball":"https://registry.npmjs.org/@daviddarnes/contrast-details/-/contrast-details-1.1.0.tgz","fileCount":10,"unpackedSize":13354,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICig0o+G2/YedPRRWtsFJrsr6RYI+cRYdM/GWlFPOZFsAiAMEU7WapHnDxfQTKJFKvo71RZPNW5Io9OadBH21KiDCQ=="}]},"_npmUser":{"name":"daviddarnes","email":"me@daviddarnes.com"},"directories":{},"maintainers":[{"name":"daviddarnes","email":"me@daviddarnes.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/contrast-details_1.1.0_1716992195395_0.43315851970803654"},"_hasShrinkwrap":false}},"time":{"created":"2024-04-19T14:20:46.491Z","modified":"2024-05-29T14:16:35.780Z","1.0.0":"2024-04-19T14:20:46.748Z","1.0.1":"2024-04-19T15:08:16.872Z","1.1.0":"2024-05-29T14:16:35.611Z"},"maintainers":[{"name":"daviddarnes","email":"me@daviddarnes.com"}],"author":{"name":"David Darnes","email":"me@daviddarnes.com","url":"https://darn.es/"},"repository":{"type":"git","url":"git+https://github.com/daviddarnes/contrast-details.git"},"keywords":["web","component","components","web components","custom elements"],"license":"MIT","homepage":"https://github.com/daviddarnes/contrast-details#readme","bugs":{"url":"https://github.com/daviddarnes/contrast-details/issues"},"readme":"# `contrast-details`\n\nA Web Component to display the contrast ratio and level of two colours using CSS custom properties\n\n**[Demo](https://daviddarnes.github.io/contrast-details/demo.html)** | **[Custom template demo](https://daviddarnes.github.io/contrast-details/demo-custom-template.html)** | **[Further reading](https://darn.es/contrast-details-web-component/)**\n\n## Examples\n\nGeneral usage example:\n\n```html\n<script type=\"module\" src=\"contrast-details.js\"></script>\n\n<contrast-details\n  style=\"--foreground: #444; --background: #ccc\"\n></contrast-details>\n<contrast-details\n  style=\"--foreground: #444; --background: #613fe8\"\n></contrast-details>\n```\n\nExample using inherited values:\n\n```html\n<script type=\"module\" src=\"contrast-details.js\"></script>\n\n<div style=\"--foreground: #444\">\n  <contrast-details style=\"--background: #ccc\"></contrast-details>\n  <contrast-details style=\"--background: #ffffff\"></contrast-details>\n  <contrast-details style=\"--background: #613fe8\"></contrast-details>\n</div>\n```\n\nExample using `level` attribute for styling\n\n```html\n<style>\n  contrast-details[level^=\"aa\"] [data-key=\"level\"]::after {\n    content: \" ✅\";\n  }\n\n  contrast-details[level=\"fail\"] [data-key=\"level\"]::after {\n    content: \" ❌\";\n  }\n</style>\n\n<script type=\"module\" src=\"contrast-details.js\"></script>\n\n<contrast-details\n  style=\"--foreground: #444; --background: #ccc\"\n></contrast-details>\n<contrast-details\n  style=\"--foreground: #444; --background: #613fe8\"\n></contrast-details>\n```\n\nExample using a custom template:\n\n```html\n<script type=\"module\" src=\"contrast-details.js\"></script>\n\n<template id=\"contrast-details-template\">\n  <p>\n    Contrast: <span data-key=\"ratio\"></span> –\n    <span data-key=\"level\"></span>\n  </p>\n</template>\n\n<contrast-details\n  style=\"--foreground: #444; --background: #ccc\"\n></contrast-details>\n<contrast-details\n  style=\"--foreground: #444; --background: #613fe8\"\n></contrast-details>\n```\n\n## Features\n\nThis Web Component allows you to:\n\n- Compare two colours and render their contrast details\n- Render the contrast ratio\n- Render the contrast level, as per WCAG grading\n- Utilise CSS custom properties to provide values, either on the element or through inheritance, which also allows the element to use those colours as you wish\n- Utilise a `level` attribute selector to style elements differently depending on `aaa`, `aa` and `fail` grades\n\n## Installation\n\nYou have a few options (choose one of these):\n\n1. Install via [npm](https://www.npmjs.com/package/@daviddarnes/contrast-details): `npm install @daviddarnes/contrast-details`\n1. [Download the source manually from GitHub](https://github.com/daviddarnes/contrast-details/releases) into your project.\n1. Skip this step and use the script directly via a 3rd party CDN (not recommended for production use)\n\n### Usage\n\nMake sure you include the `<script>` in your project (choose one of these):\n\n```html\n<!-- Host yourself -->\n<script type=\"module\" src=\"contrast-details.js\"></script>\n```\n\n```html\n<!-- 3rd party CDN, not recommended for production use -->\n<script\n  type=\"module\"\n  src=\"https://www.unpkg.com/@daviddarnes/contrast-details@1.1.0/contrast-details.js\"\n></script>\n```\n\n```html\n<!-- 3rd party CDN, not recommended for production use -->\n<script\n  type=\"module\"\n  src=\"https://esm.sh/@daviddarnes/contrast-details@1.1.0\"\n></script>\n```\n\n## Credit\n\nWith thanks to the following people:\n\n- [Zach Leatherman](https://zachleat.com) for inspiring this [Web Component repo template](https://github.com/daviddarnes/contrast-details)\n","readmeFilename":"README.md"}