remove alert when compliant with AA & make alert message orange

kitconcept · Dec 22, 2024 · d82bfa6 · d82bfa6
1 parent fb11d24
commit d82bfa6
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 20 deletions.
diff --git a/packages/volto-light-theme/src/components/Widgets/ThemingColorPicker.tsx b/packages/volto-light-theme/src/components/Widgets/ThemingColorPicker.tsx
@@ -91,7 +91,6 @@ const ColorPickerWidget = (props: {
 
   // Get WCAG compliance levels
   const getComplianceLevel = (ratio) => {
-    if (ratio >= 4.5) return 'AA';
     if (ratio >= 3) return 'AA Large';
     return 'Fail';
   };
@@ -114,13 +113,8 @@ const ColorPickerWidget = (props: {
           }}
         />
       </div>
-      {formData[props.id] && contrastRatio < 7 && (
-        <label
-          className={cx('color-contrast-label', {
-            red: contrastRatio < 4.5,
-            orange: contrastRatio >= 4.5,
-          })}
-        >
+      {formData[props.id] && contrastRatio < 4.5 && (
+        <label className={cx('color-contrast-label')}>
           The color contrast ratio ({contrastRatio.toFixed(2)}:1) might not be
           accesible for all.
           <br />

diff --git a/packages/volto-light-theme/src/theme/_widgets.scss b/packages/volto-light-theme/src/theme/_widgets.scss
@@ -56,6 +56,7 @@
   label.color-contrast-label {
     border-bottom: 1px solid #edf1f2;
     font-size: 0.7rem;
+    color: darkorange;
     a {
       padding: 0.1rem 0.25rem;
       border: 1px solid var(--link-foreground-color);
@@ -64,18 +65,7 @@
       margin-left: 4px;
       font-size: 0.4rem;
       vertical-align: super;
-    }
-
-    &.red {
-      color: red;
-    }
-
-    &.green {
-      color: darkgreen;
-    }
-
-    &.orange {
-      color: darkorange;
+      margin-left: 4px;
     }
   }
 }