@daviddarnes/contrast-details - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

contrast-details.js

@@ -26,21 +26,23 @@ const contrastDetailsTemplate = document.createElement("template");
     this.append(this.template.content.cloneNode(true));
-  
+
     const { ratio, level } = this.slots;
-  
+
     ratio.textContent = this.ratio.toFixed(2) + ":1";
     level.textContent = this.level;
+
+    this.setAttribute("level", this.level.toLowerCase());
   }
-  
+
   get template() {
     return document.getElementById(contrastDetailsTemplate.id);
   }
-  
+
   get slots() {
     return {
       ratio: this.querySelector("[data-key='ratio']"),
-      level: this.querySelector("[data-key='level']")
+      level: this.querySelector("[data-key='level']"),
     };
   }
-  
-  get colors() {    
+
+  get colors() {
     const foreground = getComputedStyle(this).getPropertyValue("--foreground");
@@ -50,6 +52,6 @@ const background = getComputedStyle(this).getPropertyValue("--background");
       foreground: this.toRGBArray(foreground),
-      background: this.toRGBArray(background)
+      background: this.toRGBArray(background),
     };
   }
-  
+
   get blendedForeground() {
@@ -62,6 +64,6 @@ const { foreground, background } = this.colors;
       (1 - alpha) * background[1] + alpha * foreground[1],
-      (1 - alpha) * background[2] + alpha * foreground[2]
+      (1 - alpha) * background[2] + alpha * foreground[2],
     ];
   }
-  
+
   toRGBArray(color) {
@@ -72,3 +74,3 @@ this.template.style.color = color;
   }
-  
+
   luminance(rgb) {
@@ -83,14 +85,14 @@ const levels = rgb.map((value) => {
   }
-  
+
   get ratio() {
     const fgLuminance = this.luminance(this.blendedForeground);
     const bgLuminance = this.luminance(this.colors.background);
-  
+
     const brightest = Math.max(fgLuminance, bgLuminance);
     const darkest = Math.min(fgLuminance, bgLuminance);
-  
+
     const contrastRatio = (brightest + 0.05) / (darkest + 0.05);
     return contrastRatio;
   }
-  
+
   get level() {
@@ -97,0 +99,0 @@ return this.ratio > 7.0 ? "AAA" : this.ratio > 4.5 ? "AA" : "Fail";

package.json

 {
   "name": "@daviddarnes/contrast-details",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "A Web Component to display the contrast ratio and level of two colours using CSS custom properties",
@@ -5,0 +5,0 @@ "main": "contrast-details.js",

README.md

@@ -5,3 +5,3 @@ # `contrast-details`
 
-**[Demo](https://daviddarnes.github.io/contrast-details/demo.html)** | **[Further reading](https://darn.es/contrast-details-web-component/)**
+**[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/)**
 
@@ -15,3 +15,8 @@ ## Examples
 
-<contrast-details style="--foreground: #000000; --background: #FCFAF2"></contrast-details>
+<contrast-details
+  style="--foreground: #444; --background: #ccc"
+></contrast-details>
+<contrast-details
+  style="--foreground: #444; --background: #613fe8"
+></contrast-details>
 ```
@@ -22,9 +27,34 @@
 ```html
-<div style="--foreground: #3D3D3D">
-  <contrast-details style="--background: #613FE8"></contrast-details>
-  <contrast-details style="--background: #FCFAF2"></contrast-details>
-  <contrast-details style="--background: #FFFFFF"></contrast-details>
+<script type="module" src="contrast-details.js"></script>
+
+<div style="--foreground: #444">
+  <contrast-details style="--background: #ccc"></contrast-details>
+  <contrast-details style="--background: #ffffff"></contrast-details>
+  <contrast-details style="--background: #613fe8"></contrast-details>
 </div>
 ```
 
+Example using `level` attribute for styling
+
+```html
+<style>
+  contrast-details[level^="aa"] [data-key="level"]::after {
+    content: " ✅";
+  }
+
+  contrast-details[level="fail"] [data-key="level"]::after {
+    content: " ❌";
+  }
+</style>
+
+<script type="module" src="contrast-details.js"></script>
+
+<contrast-details
+  style="--foreground: #444; --background: #ccc"
+></contrast-details>
+<contrast-details
+  style="--foreground: #444; --background: #613fe8"
+></contrast-details>
+```
+
 Example using a custom template:
@@ -36,6 +66,14 @@
 <template id="contrast-details-template">
-  <p>Contrast: <span data-key="ratio"></span> | <span data-key="level"></span></p>
+  <p>
+    Contrast: <span data-key="ratio"></span> –
+    <span data-key="level"></span>
+  </p>
 </template>
 
-<contrast-details style="--foreground: #000000; --background: #FCFAF2"></contrast-details>
+<contrast-details
+  style="--foreground: #444; --background: #ccc"
+></contrast-details>
+<contrast-details
+  style="--foreground: #444; --background: #613fe8"
+></contrast-details>
 ```
@@ -51,2 +89,3 @@
 - 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
+- Utilise a `level` attribute selector to style elements differently depending on `aaa`, `aa` and `fail` grades
 
@@ -74,3 +113,3 @@ ## Installation
   type="module"
-  src="https://www.unpkg.com/@daviddarnes/contrast-details@1.0.1/contrast-details.js"
+  src="https://www.unpkg.com/@daviddarnes/contrast-details@1.1.0/contrast-details.js"
 ></script>
@@ -83,3 +122,3 @@ ```
   type="module"
-  src="https://esm.sh/@daviddarnes/contrast-details@1.0.1"
+  src="https://esm.sh/@daviddarnes/contrast-details@1.1.0"
 ></script>
@@ -86,0 +125,0 @@ ```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

13354

increased by31.68%

Number of package files

10

increased by11.11%

Lines of code

79

increased by1.28%

Number of lines in readme file

125

increased by45.35%

No dependency changes