feat: make color-yiq function a11y-friendly

openedx · Jun 1, 2023 · 02b576e · 02b576e
1 parent 9533544
commit 02b576e
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 11 deletions.
diff --git a/src/Nav/Nav.scss b/src/Nav/Nav.scss
@@ -69,6 +69,7 @@
 
     .nav-link {
       color: var(--pgn-color-nav-pills-inverse-link-text-base);
+      // stylelint-disable-next-line max-line-length
       border: var(--pgn-size-nav-pills-inverse-link-border-width) solid var(--pgn-color-nav-pills-inverse-link-border-base);
 
       &:hover {
@@ -128,6 +129,7 @@
 
     .nav-link.active,
     .nav-item.show .nav-link {
+      // stylelint-disable-next-line max-line-length
       border-bottom: var(--pgn-size-nav-tabs-inverse-link-active-border-bottom-width) solid var(--pgn-color-nav-tabs-inverse-link-border-active);
       background-color: var(--pgn-color-nav-tabs-inverse-link-bg-active);
 

diff --git a/src/Tabs/Tabs.scss b/src/Tabs/Tabs.scss
@@ -30,6 +30,7 @@
       margin: 0;
 
       .dropdown .dropdown-toggle {
+        // stylelint-disable-next-line max-line-length
         padding: var(--pgn-spacing-tab-more-link-dropdown-toggle-padding-x) var(--pgn-spacing-tab-more-link-dropdown-toggle-padding-y);
 
         &:focus {
@@ -61,6 +62,7 @@
   // Nav inverse pills
   &.nav-inverse-pills .pgn__tab_more.nav-link {
     .dropdown .dropdown-toggle {
+      // stylelint-disable-next-line max-line-length
       padding: var(--pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-x) var(--pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-y);
 
       &:focus {
@@ -86,6 +88,7 @@
 
   // Nav inverse tabs
   &.nav-inverse-tabs .pgn__tab_more.nav-link .dropdown .dropdown-toggle {
+    // stylelint-disable-next-line max-line-length
     padding: var(--pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-x) var(--pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-y);
 
     &:hover {

diff --git a/styles/css/core/custom-media-breakpoints.css b/styles/css/core/custom-media-breakpoints.css
@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Thu, 01 Jun 2023 12:58:07 GMT
+ * Generated on Thu, 01 Jun 2023 14:00:29 GMT
  */
 
 @custom-media --min-pgn-size-breakpoint-xs (min-width: 0);

diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css
@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Thu, 01 Jun 2023 12:58:07 GMT
+ * Generated on Thu, 01 Jun 2023 14:00:29 GMT
  */
 
 :root {

diff --git a/styles/css/themes/light/utility-classes.css b/styles/css/themes/light/utility-classes.css
@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Thu, 01 Jun 2023 12:58:07 GMT
+ * Generated on Thu, 01 Jun 2023 14:00:29 GMT
  */
 
 .bg-accent-a {

diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css
@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Thu, 01 Jun 2023 12:58:07 GMT
+ * Generated on Thu, 01 Jun 2023 14:00:29 GMT
  */
 
 :root {
@@ -1537,7 +1537,7 @@
   --pgn-color-btn-active-text-primary: #FFFFFFFF;
   --pgn-color-btn-active-text-inverse-outline-light: #454545FF;
   --pgn-color-btn-active-text-outline-light: #454545FF;
-  --pgn-color-btn-active-text-light: #454545FF;
+  --pgn-color-btn-active-text-light: #313131FF;
   --pgn-color-btn-active-text-inverse-outline-dark: #454545FF;
   --pgn-color-btn-active-text-outline-dark: #454545FF;
   --pgn-color-btn-active-text-dark: #FFFFFFFF;
@@ -1566,7 +1566,7 @@
   --pgn-color-btn-hover-text-inverse-outline-secondary: var(--pgn-color-theme-hover-secondary);
   --pgn-color-btn-hover-text-outline-secondary: var(--pgn-color-theme-hover-secondary);
   --pgn-color-btn-hover-text-primary: #FFFFFFFF;
-  --pgn-color-btn-hover-text-light: #454545FF;
+  --pgn-color-btn-hover-text-light: #414141FF;
   --pgn-color-btn-hover-text-inverse-outline-info: var(--pgn-color-theme-hover-info);
   --pgn-color-btn-hover-text-outline-info: var(--pgn-color-theme-hover-info);
   --pgn-color-btn-hover-text-dark: #FFFFFFFF;
@@ -1596,7 +1596,7 @@
   --pgn-color-btn-disabled-text-outline-danger: var(--pgn-color-btn-hover-text-outline-danger);
   --pgn-color-btn-active-text-inverse-outline-warning: #454545FF;
   --pgn-color-btn-active-text-outline-warning: #454545FF;
-  --pgn-color-btn-active-text-warning: #FFFFFFFF;
+  --pgn-color-btn-active-text-warning: #313131FF;
   --pgn-color-btn-active-text-inverse-outline-success: #454545FF;
   --pgn-color-btn-active-text-outline-success: #454545FF;
   --pgn-color-btn-active-text-success: #FFFFFFFF;
@@ -1609,7 +1609,7 @@
   --pgn-color-btn-active-text-inverse-outline-danger: #454545FF;
   --pgn-color-btn-active-text-outline-danger: #454545FF;
   --pgn-color-btn-active-text-danger: #FFFFFFFF;
-  --pgn-color-btn-hover-text-warning: #454545FF;
+  --pgn-color-btn-hover-text-warning: #414141FF;
   --pgn-color-btn-hover-text-success: #FFFFFFFF;
   --pgn-color-btn-hover-text-secondary: #FFFFFFFF;
   --pgn-color-btn-hover-text-info: #FFFFFFFF;

diff --git a/tokens/sass-helpers.js b/tokens/sass-helpers.js
@@ -30,11 +30,23 @@ function colorYiq(color, light, dark, threshold, themeVariant = 'light') {
   const [r, g, b] = color.rgb();
   const yiq = ((r * 299) + (g * 587) + (b * 114)) * 0.001;
 
+  let result = yiq >= contrastThreshold ? chroma(darkColor) : chroma(lightColor);
+
   if (yiq >= contrastThreshold) {
-    return chroma(darkColor);
+    // check whether the resulting combination of colors passes a11y contrast ratio of 4:5:1
+    // if not - darken resulting color until it does
+    while (chroma.contrast(color, result) < 4.5) {
+      result = result.darken(0.1);
+    }
+    return result;
   }
 
-  return chroma(lightColor);
+  // check whether the resulting combination of colors passes a11y contrast ratio of 4:5:1
+  // if not - brighten resulting color until it does
+  while (chroma.contrast(color, result) < 4.5) {
+    result = result.brighten(0.1);
+  }
+  return result;
 }
 
 /**

diff --git a/tokens/src/core/global/other.json b/tokens/src/core/global/other.json
@@ -1,4 +1,4 @@
 {
-  "yiq-contrasted-threshold": 150,
+  "yiq-contrasted-threshold": 128,
   "theme-interval": { "value": "8%", "type": "percentage", "source": "$theme-color-interval" }
 }