feat: WCAG AAA contrast and high-contrast theme (#739)

* accessible primary colors * primary-transparent-light tweak * TEMP: husky fix * source button contrast * secondary and mini button contrast * modal outline * border color * drop-area * file item * more color tweaks * cloudeditor basic * less borders * revert test class * fix contrasts in regular themes * minor * cloudimageeditor * revert test class * tweak .uc-contrast * Revert "TEMP: husky fix" This reverts commit ebc3a54. * fix: linter css --------- Co-authored-by: Egor Didenko <didenk.egor@gmail.com>
uploadcare · Sep 19, 2024 · 82c29e1 · 82c29e1
1 parent e998309
commit 82c29e1
Show file tree

Hide file tree

Showing 9 changed files with 109 additions and 33 deletions.
diff --git a/blocks/CloudImageEditor/src/css/common.css b/blocks/CloudImageEditor/src/css/common.css
@@ -348,6 +348,8 @@ uc-editor-operation-control {
   --down-opacity: 1;
   --down-filter: 0.6;
   --down-background: var(--uc-secondary);
+
+  border-radius: var(--uc-radius);
 }
 
 uc-editor-button-control > button,
@@ -384,11 +386,11 @@ uc-editor-button-control.uc-active,
 uc-editor-operation-control.uc-active,
 uc-editor-crop-button-control.uc-active,
 uc-editor-filter-control.uc-active {
-  --idle-color-rgb: var(--uc-primary);
-  --idle-background: var(--uc-primary-transparent);
-  --idle-opacity: 0.9;
-  --hover-color-rgb: var(--uc-primary);
-  --hover-background: var(--uc-primary-transparent);
+  --idle-color-rgb: var(--uc-primary-foreground);
+  --idle-background: var(--uc-primary);
+  --idle-opacity: 1;
+  --hover-color-rgb: var(--uc-primary-foreground);
+  --hover-background: var(--uc-primary);
   --hover-opacity: 1;
 }
 
@@ -407,6 +409,17 @@ uc-editor-filter-control.uc-not_active {
   --idle-color-rgb: var(--uc-secondary-foreground);
 }
 
+:where(.uc-contrast) uc-editor-button-control.uc-not_active,
+:where(.uc-contrast) uc-editor-operation-control.uc-not_active,
+:where(.uc-contrast) uc-editor-crop-button-control.uc-not_active,
+:where(.uc-contrast) uc-editor-filter-control.uc-not_active {
+  --idle-background: transparent;
+  --hover-background: var(--uc-secondary);
+
+  outline: 1px solid var(--uc-border);
+  outline-offset: -1px;
+}
+
 uc-editor-button-control > button::before,
 uc-editor-operation-control > button::before,
 uc-editor-crop-button-control > button::before,
@@ -973,6 +986,10 @@ uc-btn-ui.uc-secondary > button {
   --active-background: transparent;
 }
 
+:where(.uc-contrast) uc-btn-ui.uc-secondary > button {
+  border: 1px solid var(--uc-border);
+}
+
 uc-btn-ui.uc-secondary-icon > button {
   --idle-color-rgb: var(--uc-secondary-foreground);
   --idle-brightness: 1;
@@ -1036,6 +1053,13 @@ uc-btn-ui.uc-default > button {
   --active-background: var(--uc-primary-transparent);
 }
 
+:where(.uc-contrast) uc-btn-ui.uc-default > button {
+  --idle-background: transparent;
+  --hover-background: var(--uc-secondary);
+  --active-background: var(--uc-foreground);
+  --active-color-rgb: var(--uc-background);
+}
+
 uc-line-loader-ui {
   position: absolute;
   top: 0px;
@@ -1107,16 +1131,16 @@ uc-slider-ui .uc-steps {
 uc-slider-ui .uc-border-step {
   width: 0px;
   height: 10px;
-  border-right: 1px solid var(--l-color);
-  opacity: 0.6;
+  border-right: 1px solid var(--uc-foreground);
+  opacity: 1;
   transition: border-color var(--transition-duration-2);
 }
 
 uc-slider-ui .uc-minor-step {
   width: 0px;
   height: 4px;
-  border-right: 1px solid var(--l-color);
-  opacity: 0.2;
+  border-right: 1px solid var(--uc-foreground);
+  opacity: 0.6;
   transition: border-color var(--transition-duration-2);
 }
 

diff --git a/blocks/CloudImageEditor/src/elements/slider/SliderUi.js b/blocks/CloudImageEditor/src/elements/slider/SliderUi.js
@@ -114,7 +114,7 @@ export class SliderUi extends Block {
     if (value === this._zero) {
       this._zeroDotEl.style.opacity = '0';
     } else {
-      this._zeroDotEl.style.opacity = '0.2';
+      this._zeroDotEl.style.opacity = '1';
     }
     let { width } = this.getBoundingClientRect();
     let slope = 100 / (this.$.max - this.$.min);

diff --git a/blocks/DropArea/drop-area.css b/blocks/DropArea/drop-area.css
@@ -32,18 +32,19 @@
   background: var(--uc-background);
 }
 
-:where([uc-drop-area])[with-icon]
-  > .uc-content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over'])
-  :is(.uc-text, .uc-icon-container) {
-  color: var(--uc-primary);
-}
-
 :where([uc-drop-area]):is([drag-state='active'], [drag-state='near'], [drag-state='over'], :hover) {
-  color: var(--uc-primary);
   background: var(--uc-primary-transparent);
   border-color: var(--uc-primary-transparent);
 }
 
+:where(.uc-contrast) :where([uc-drop-area]):is([drag-state='active'], [drag-state='near'], [drag-state='over'], :hover) {
+  color: var(--uc-foreground);
+  background: transparent;
+  border-color: var(--uc-foreground);
+  border-width: 2px;
+  border-style: solid;
+}
+
 :where([uc-drop-area]):is([drag-state='active'], [drag-state='near']) {
   opacity: 1;
 }
@@ -95,15 +96,19 @@
   transform: translateY(48px);
 }
 
-:where([uc-drop-area])[with-icon]:hover .uc-icon-container,
-:where([uc-drop-area])[with-icon]:hover .uc-text {
-  color: var(--uc-primary);
+:where(.uc-contrast) :where([uc-drop-area])[with-icon]:hover .uc-icon-container,
+:where(.uc-contrast) :where([uc-drop-area])[with-icon]:hover .uc-text {
+  color: var(--uc-foreground);
 }
 
 :where([uc-drop-area])[with-icon]:hover .uc-icon-container {
   background-color: var(--uc-primary-transparent);
 }
 
+:where(.uc-contrast) :where([uc-drop-area])[with-icon]:hover .uc-icon-container {
+  background-color: var(--uc-muted);
+}
+
 :where([uc-drop-area])[with-icon]
   > .uc-content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over'])
   .uc-icon-container {
@@ -114,7 +119,13 @@
 :where([uc-drop-area])[with-icon]
   > .uc-content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over'])
   .uc-text {
-  color: var(--uc-primary);
+  color: var(--uc-foreground);
+}
+
+:where(.uc-contrast) :where([uc-drop-area])[with-icon]
+  > .uc-content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over'])
+  .uc-text {
+  color: var(--uc-foreground);
 }
 
 :where([uc-drop-area])[with-icon]

diff --git a/blocks/FileItem/file-item.css b/blocks/FileItem/file-item.css
@@ -127,11 +127,15 @@ uc-file-item .uc-badge uc-icon svg {
 }
 
 uc-file-item .uc-progress-bar {
-  opacity: 0.5;
+  opacity: 0.7;
   top: calc(100% - 2px);
   height: 2px;
 }
 
+:where(.uc-contrast) uc-file-item .uc-progress-bar {
+  opacity: 1;
+}
+
 uc-file-item .uc-file-actions {
   display: flex;
   gap: 2px;

diff --git a/blocks/Modal/modal.css b/blocks/Modal/modal.css
@@ -85,6 +85,10 @@
     opacity 0.4s ease;
 }
 
+:where(.uc-contrast) :where([uc-modal]) > dialog {
+  outline: 1px solid var(--uc-border);
+}
+
 @media only screen and (max-width: 430px), only screen and (max-height: 600px) {
   :where([uc-modal]) > dialog > .uc-content {
     height: var(--modal-max-content-height);

diff --git a/blocks/SourceBtn/source-btn.css b/blocks/SourceBtn/source-btn.css
@@ -20,10 +20,14 @@ uc-source-btn:last-child > button {
 }
 
 uc-source-btn > button:hover {
-  color: var(--uc-primary);
   background-color: var(--uc-primary-transparent);
 }
 
+:where(.uc-contrast) uc-source-btn > button:hover {
+  background-color: var(--uc-secondary);
+  color: var(--uc-foreground);
+}
+
 uc-source-btn uc-icon {
   display: inline-flex;
   flex-grow: 1;
@@ -33,6 +37,10 @@ uc-source-btn uc-icon {
   opacity: 0.8;
 }
 
+:where(.uc-contrast) uc-source-btn uc-icon {
+  opacity: 1;
+}
+
 uc-source-btn .uc-txt {
   display: flex;
   align-items: center;

diff --git a/blocks/themes/uc-basic/common.css b/blocks/themes/uc-basic/common.css
@@ -56,6 +56,10 @@
   background-color: var(--uc-secondary-hover);
 }
 
+:where([uc-wgt-common].uc-contrast) button.uc-secondary-btn {
+  border: 1px solid var(--uc-border);
+}
+
 :where([uc-wgt-common]) button.uc-mini-btn {
   height: var(--uc-button-size);
   padding: 0;

diff --git a/blocks/themes/uc-basic/theme.css b/blocks/themes/uc-basic/theme.css
@@ -41,7 +41,7 @@
 @supports not (color: oklch(0% 0 0)) {
   :where([uc-wgt-common]) {
     /* Light colors RGB fallback */
-    --uc-primary-rgb-light: 54 112 253;
+    --uc-primary-rgb-light: 23 75 215;
     --uc-primary-light: rgb(var(--uc-primary-rgb-light));
     --uc-primary-hover-light: rgb(var(--uc-primary-rgb-light) / 90%);
     --uc-primary-transparent-light: rgb(var(--uc-primary-rgb-light) / 10%);
@@ -87,18 +87,18 @@
 @supports (color: oklch(0% 0 0)) {
   :where([uc-wgt-common]) {
     /* Light colors OKLCH */
-    --uc-primary-oklch-light: 59% 0.22 264; /* Quick customization: change this value to your brand color */
+    --uc-primary-oklch-light: 47% 0.22 264; /* Quick customization: change this value to your brand color */
     --uc-primary-light: oklch(var(--uc-primary-oklch-light));
     --uc-primary-hover-light: oklch(var(--uc-primary-oklch-light) / 90%);
-    --uc-primary-transparent-light: oklch(var(--uc-primary-oklch-light) / 10%);
+    --uc-primary-transparent-light: oklch(var(--uc-primary-oklch-light) / 7%);
     --uc-background-light: oklch(100% 0 0);
     --uc-foreground-light: oklch(21% 0 0);
     --uc-primary-foreground-light: oklch(100% 0 0);
     --uc-secondary-light: oklch(21% 0 0 / 0.05);
     --uc-secondary-hover-light: oklch(21% 0 0 / 0.08);
     --uc-secondary-foreground-light: oklch(21% 0 0);
     --uc-muted-light: oklch(97% 0 0);
-    --uc-muted-foreground-light: oklch(55% 0 0);
+    --uc-muted-foreground-light: oklch(40% 0 0);
     --uc-destructive-light: oklch(59% 0.235 28.5 / 0.05);
     --uc-destructive-foreground-light: oklch(59% 0.235 28.5);
     --uc-border-light: oklch(92% 0 0);
@@ -232,31 +232,48 @@
 }
 
 :where(.uc-purple) {
-  --uc-primary-oklch-light: 59% 0.22 300;
+  --uc-primary-oklch-light: 47% 0.22 300;
   --uc-primary-oklch-dark: 69% 0.1768 300;
 }
 
 :where(.uc-red) {
-  --uc-primary-oklch-light: 59% 0.22 21;
-  --uc-primary-oklch-dark: 69% 0.1768 21;
+  --uc-primary-oklch-light: 47% 0.21 21;
+  --uc-primary-oklch-dark: 71% 0.1768 21;
 }
 
 :where(.uc-orange) {
-  --uc-primary-oklch-light: 59% 0.1724 51.88;
+  --uc-primary-oklch-light: 47% 0.1376 51.88;
   --uc-primary-oklch-dark: 69% 0.1768 51.88;
 }
 
 :where(.uc-green) {
-  --uc-primary-oklch-light: 59% 0.1724 130;
+  --uc-primary-oklch-light: 45% 0.14 130;
   --uc-primary-oklch-dark: 69% 0.1768 130;
 }
 
 :where(.uc-turquoise) {
-  --uc-primary-oklch-light: 59% 0.1523 174;
+  --uc-primary-oklch-light: 45% 0.0854 174;
   --uc-primary-oklch-dark: 69% 0.1768 174;
 }
 
 :where(.uc-gray) {
   --uc-primary-oklch-light: 10% 0 0;
   --uc-primary-oklch-dark: 97% 0 0;
 }
+
+:where(.uc-contrast) {
+  --uc-border-light: oklch(50% 0 0);
+  --uc-border-dark: oklch(50% 0 0);
+
+  --uc-muted-light: oklch(98% 0 0);
+  --uc-muted-dark: oklch(16% 0 0);
+
+  --uc-muted-foreground-light: oklch(20% 0 0);
+  --uc-muted-foreground-dark: oklch(80% 0 0);
+
+  --uc-background-light: oklch(100% 0 0);
+  --uc-foreground-light: oklch(0% 0 0);
+
+  --uc-background-dark: oklch(10% 0 0);
+  --uc-foreground-dark: oklch(100% 0 0);
+}
diff --git a/solutions/file-uploader/minimal/index.css b/solutions/file-uploader/minimal/index.css
@@ -47,6 +47,10 @@
   border-radius: calc(var(--uc-radius) * 1.75);
 }
 
+:where(.uc-contrast) :where([uc-file-uploader-minimal] uc-drop-area) {
+  background-color: transparent;
+}
+
 /* hack to make transparent :hover colors work in any conditions */
 :where([uc-file-uploader-minimal] uc-drop-area)::before {
   content: '';