From fa4a6f299f7ba65d2aef3bc169dd1488c8e64c7f Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Wed, 11 Sep 2024 16:56:29 +0200 Subject: [PATCH 01/20] accessible primary colors --- blocks/themes/uc-basic/theme.css | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/blocks/themes/uc-basic/theme.css b/blocks/themes/uc-basic/theme.css index 5f1474a9..d1e8ca54 100644 --- 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,7 +87,7 @@ @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%); @@ -232,27 +232,27 @@ } :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; } From 5c7db779e2edbe3aa187261d75f6280dd4533663 Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Thu, 12 Sep 2024 16:28:28 +0200 Subject: [PATCH 02/20] primary-transparent-light tweak --- blocks/themes/uc-basic/theme.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/themes/uc-basic/theme.css b/blocks/themes/uc-basic/theme.css index d1e8ca54..59eb0494 100644 --- a/blocks/themes/uc-basic/theme.css +++ b/blocks/themes/uc-basic/theme.css @@ -90,7 +90,7 @@ --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); From ebc3a548e8244d01674eb8e7d6bed5e25c37992f Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Thu, 12 Sep 2024 16:29:49 +0200 Subject: [PATCH 03/20] TEMP: husky fix --- .husky/pre-commit | 5 ----- 1 file changed, 5 deletions(-) delete mode 100755 .husky/pre-commit diff --git a/.husky/pre-commit b/.husky/pre-commit deleted file mode 100755 index eb635fc9..00000000 --- a/.husky/pre-commit +++ /dev/null @@ -1,5 +0,0 @@ -#!/bin/sh -. "$(dirname "$0")/_/husky.sh" - -./node_modules/.bin/lint-staged -npm run tsc From e184cb8103556bfdb7c2335e8cc830df5c84b17c Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Thu, 12 Sep 2024 17:07:35 +0200 Subject: [PATCH 04/20] source button contrast --- blocks/SourceBtn/source-btn.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/blocks/SourceBtn/source-btn.css b/blocks/SourceBtn/source-btn.css index 3c2a4967..4647305d 100644 --- a/blocks/SourceBtn/source-btn.css +++ b/blocks/SourceBtn/source-btn.css @@ -24,6 +24,12 @@ uc-source-btn > button:hover { background-color: var(--uc-primary-transparent); } +:where(.uc-contrast) uc-source-btn > button:hover { + background-color: unset; + outline: 1px solid var(--uc-foreground); + color: var(--uc-foreground); +} + uc-source-btn uc-icon { display: inline-flex; flex-grow: 1; @@ -33,6 +39,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; From 42ffbb7100dcfcf9e8ee4bcefa5face7d09fec82 Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Thu, 12 Sep 2024 17:07:49 +0200 Subject: [PATCH 05/20] secondary and mini button contrast --- blocks/themes/uc-basic/common.css | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/blocks/themes/uc-basic/common.css b/blocks/themes/uc-basic/common.css index 99319218..55c4daa0 100644 --- a/blocks/themes/uc-basic/common.css +++ b/blocks/themes/uc-basic/common.css @@ -52,10 +52,21 @@ background-color: var(--uc-secondary); } +:where(.uc-contrast) button.uc-secondary-btn { + color: var(--uc-secondary-foreground); + background-color: transparent; + outline: 1px solid var(--uc-secondary-foreground); +} + :where([uc-wgt-common]) button.uc-secondary-btn:hover { background-color: var(--uc-secondary-hover); } +:where(.uc-contrast) button.uc-secondary-btn:hover { + outline-width: 2px; + background-color: transparent; +} + :where([uc-wgt-common]) button.uc-mini-btn { height: var(--uc-button-size); padding: 0; @@ -67,6 +78,11 @@ background-color: var(--uc-secondary); } +:where(.uc-contrast) button.uc-mini-btn:hover { + background-color: transparent; + outline: 1px solid var(--uc-secondary-foreground); +} + :where([uc-wgt-common]) :is(button[disabled], button.uc-primary-btn[disabled], button.uc-secondary-btn[disabled]) { opacity: 0.5; pointer-events: none; From 8a18b9444570481361fb36d6189a6d468676f590 Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Thu, 12 Sep 2024 17:16:57 +0200 Subject: [PATCH 06/20] modal outline --- blocks/Modal/modal.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/blocks/Modal/modal.css b/blocks/Modal/modal.css index 629b2257..c1b40804 100644 --- 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-foreground); +} + @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); From 3cc61ddadb4bbcda9fbd0df8e3971e8892218093 Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Thu, 12 Sep 2024 17:17:08 +0200 Subject: [PATCH 07/20] border color --- blocks/themes/uc-basic/theme.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/blocks/themes/uc-basic/theme.css b/blocks/themes/uc-basic/theme.css index 59eb0494..e8243765 100644 --- a/blocks/themes/uc-basic/theme.css +++ b/blocks/themes/uc-basic/theme.css @@ -260,3 +260,9 @@ --uc-primary-oklch-light: 10% 0 0; --uc-primary-oklch-dark: 97% 0 0; } + +:where(.uc-contrast) { + --uc-border-light: oklch(10% 0 0); + --uc-border-dark: oklch(90% 0 0); + +} \ No newline at end of file From 335edc85a4348eed7335a58b1faaa3a114e0e49d Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Thu, 12 Sep 2024 19:09:47 +0200 Subject: [PATCH 08/20] drop-area --- blocks/DropArea/drop-area.css | 23 +++++++++++++++++++++++ solutions/file-uploader/minimal/index.css | 4 ++++ 2 files changed, 27 insertions(+) diff --git a/blocks/DropArea/drop-area.css b/blocks/DropArea/drop-area.css index 6f0ab700..b32d8842 100644 --- a/blocks/DropArea/drop-area.css +++ b/blocks/DropArea/drop-area.css @@ -44,6 +44,14 @@ 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; } @@ -100,10 +108,19 @@ 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 { @@ -117,6 +134,12 @@ color: var(--uc-primary); } +: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] > .uc-content-wrapper:is([drag-state='active'], [drag-state='near'], [drag-state='over']) uc-icon:first-child { diff --git a/solutions/file-uploader/minimal/index.css b/solutions/file-uploader/minimal/index.css index ded00d00..427829e1 100644 --- 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: ''; From 10120bfe826fc1b111563261bf5ab55e5860224c Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Fri, 13 Sep 2024 13:59:59 +0200 Subject: [PATCH 09/20] file item --- blocks/FileItem/file-item.css | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/blocks/FileItem/file-item.css b/blocks/FileItem/file-item.css index 38280ce9..0d00d2a3 100644 --- a/blocks/FileItem/file-item.css +++ b/blocks/FileItem/file-item.css @@ -26,6 +26,12 @@ uc-file-item > .uc-inner { transition: background-color var(--uc-transition); } +:where(.uc-contrast) uc-file-item > .uc-inner { + background-color: transparent; + outline: 1px solid var(--uc-border); + outline-offset: -1px; +} + uc-file-item > .uc-inner[focused] { background-color: transparent; } @@ -132,6 +138,13 @@ uc-file-item .uc-progress-bar { height: 2px; } +:where(.uc-contrast) uc-file-item .uc-progress-bar { + opacity: 1; + top: calc(100% - 5px); + width: calc(100% - 8px); + left: 4px; +} + uc-file-item .uc-file-actions { display: flex; gap: 2px; From 95eab7d638cbbfe75b9bbb17dd6185f4c21b1c8c Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Fri, 13 Sep 2024 14:00:10 +0200 Subject: [PATCH 10/20] more color tweaks --- blocks/themes/uc-basic/theme.css | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/blocks/themes/uc-basic/theme.css b/blocks/themes/uc-basic/theme.css index e8243765..5dd102fe 100644 --- a/blocks/themes/uc-basic/theme.css +++ b/blocks/themes/uc-basic/theme.css @@ -262,7 +262,12 @@ } :where(.uc-contrast) { - --uc-border-light: oklch(10% 0 0); - --uc-border-dark: oklch(90% 0 0); + --uc-border-light: oklch(15% 0 0); + --uc-border-dark: oklch(70% 0 0); + --uc-muted-light: oklch(98% 0 0); + --uc-muted-dark: oklch(24% 0 0); + + --uc-muted-foreground-light: oklch(20% 0 0); + --uc-muted-foreground-dark: oklch(80% 0 0); } \ No newline at end of file From 1f75b8a92bf45665c7fff258ea66e14d25ac9240 Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Sat, 14 Sep 2024 18:22:46 +0200 Subject: [PATCH 11/20] cloudeditor basic --- blocks/CloudImageEditor/src/css/common.css | 31 ++++++++++++++++++++++ demo/raw-minimal.html | 2 +- demo/raw-regular.html | 1 + 3 files changed, 33 insertions(+), 1 deletion(-) diff --git a/blocks/CloudImageEditor/src/css/common.css b/blocks/CloudImageEditor/src/css/common.css index bcd2985b..990af45e 100644 --- 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, @@ -392,6 +394,18 @@ uc-editor-filter-control.uc-active { --hover-opacity: 1; } +:where(.uc-contrast) uc-editor-button-control.uc-active, +:where(.uc-contrast) uc-editor-operation-control.uc-active, +:where(.uc-contrast) uc-editor-crop-button-control.uc-active, +:where(.uc-contrast) uc-editor-filter-control.uc-active { + --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; +} + uc-editor-filter-control.uc-not_active .uc-preview[loaded] { opacity: 1; } @@ -407,6 +421,16 @@ 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, @@ -1036,6 +1060,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; diff --git a/demo/raw-minimal.html b/demo/raw-minimal.html index 790e8a4d..9d43b81e 100644 --- a/demo/raw-minimal.html +++ b/demo/raw-minimal.html @@ -33,5 +33,5 @@ - + \ No newline at end of file diff --git a/demo/raw-regular.html b/demo/raw-regular.html index 5214a624..71f5aab3 100644 --- a/demo/raw-regular.html +++ b/demo/raw-regular.html @@ -35,6 +35,7 @@ From 0d7473ea02bd7f6e835c17679eee4c31e5395732 Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Sat, 14 Sep 2024 18:46:30 +0200 Subject: [PATCH 12/20] less borders --- blocks/FileItem/file-item.css | 9 --------- blocks/Modal/modal.css | 2 +- blocks/SourceBtn/source-btn.css | 3 +-- blocks/themes/uc-basic/common.css | 16 ---------------- blocks/themes/uc-basic/theme.css | 12 +++++++++--- 5 files changed, 11 insertions(+), 31 deletions(-) diff --git a/blocks/FileItem/file-item.css b/blocks/FileItem/file-item.css index 0d00d2a3..3f49d7bd 100644 --- a/blocks/FileItem/file-item.css +++ b/blocks/FileItem/file-item.css @@ -26,12 +26,6 @@ uc-file-item > .uc-inner { transition: background-color var(--uc-transition); } -:where(.uc-contrast) uc-file-item > .uc-inner { - background-color: transparent; - outline: 1px solid var(--uc-border); - outline-offset: -1px; -} - uc-file-item > .uc-inner[focused] { background-color: transparent; } @@ -140,9 +134,6 @@ uc-file-item .uc-progress-bar { :where(.uc-contrast) uc-file-item .uc-progress-bar { opacity: 1; - top: calc(100% - 5px); - width: calc(100% - 8px); - left: 4px; } uc-file-item .uc-file-actions { diff --git a/blocks/Modal/modal.css b/blocks/Modal/modal.css index c1b40804..f9fc87c9 100644 --- a/blocks/Modal/modal.css +++ b/blocks/Modal/modal.css @@ -86,7 +86,7 @@ } :where(.uc-contrast) :where([uc-modal]) > dialog { - outline: 1px solid var(--uc-foreground); + outline: 1px solid var(--uc-border); } @media only screen and (max-width: 430px), only screen and (max-height: 600px) { diff --git a/blocks/SourceBtn/source-btn.css b/blocks/SourceBtn/source-btn.css index 4647305d..340d1ad5 100644 --- a/blocks/SourceBtn/source-btn.css +++ b/blocks/SourceBtn/source-btn.css @@ -25,8 +25,7 @@ uc-source-btn > button:hover { } :where(.uc-contrast) uc-source-btn > button:hover { - background-color: unset; - outline: 1px solid var(--uc-foreground); + background-color: var(--uc-secondary); color: var(--uc-foreground); } diff --git a/blocks/themes/uc-basic/common.css b/blocks/themes/uc-basic/common.css index 55c4daa0..99319218 100644 --- a/blocks/themes/uc-basic/common.css +++ b/blocks/themes/uc-basic/common.css @@ -52,21 +52,10 @@ background-color: var(--uc-secondary); } -:where(.uc-contrast) button.uc-secondary-btn { - color: var(--uc-secondary-foreground); - background-color: transparent; - outline: 1px solid var(--uc-secondary-foreground); -} - :where([uc-wgt-common]) button.uc-secondary-btn:hover { background-color: var(--uc-secondary-hover); } -:where(.uc-contrast) button.uc-secondary-btn:hover { - outline-width: 2px; - background-color: transparent; -} - :where([uc-wgt-common]) button.uc-mini-btn { height: var(--uc-button-size); padding: 0; @@ -78,11 +67,6 @@ background-color: var(--uc-secondary); } -:where(.uc-contrast) button.uc-mini-btn:hover { - background-color: transparent; - outline: 1px solid var(--uc-secondary-foreground); -} - :where([uc-wgt-common]) :is(button[disabled], button.uc-primary-btn[disabled], button.uc-secondary-btn[disabled]) { opacity: 0.5; pointer-events: none; diff --git a/blocks/themes/uc-basic/theme.css b/blocks/themes/uc-basic/theme.css index 5dd102fe..ac89ea9d 100644 --- a/blocks/themes/uc-basic/theme.css +++ b/blocks/themes/uc-basic/theme.css @@ -262,12 +262,18 @@ } :where(.uc-contrast) { - --uc-border-light: oklch(15% 0 0); - --uc-border-dark: oklch(70% 0 0); + --uc-border-light: oklch(40% 0 0); + --uc-border-dark: oklch(60% 0 0); --uc-muted-light: oklch(98% 0 0); - --uc-muted-dark: oklch(24% 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); } \ No newline at end of file From 055c6bffc442753a7568e72a1f1d4f3f6790f52a Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Sat, 14 Sep 2024 21:45:46 +0200 Subject: [PATCH 13/20] revert test class --- demo/raw-minimal.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/demo/raw-minimal.html b/demo/raw-minimal.html index 9d43b81e..790e8a4d 100644 --- a/demo/raw-minimal.html +++ b/demo/raw-minimal.html @@ -33,5 +33,5 @@ - + \ No newline at end of file From 96dca74be957f4bce67b59c1f631a3e6e88f8826 Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Sat, 14 Sep 2024 21:46:14 +0200 Subject: [PATCH 14/20] fix contrasts in regular themes --- blocks/DropArea/drop-area.css | 12 ------------ blocks/FileItem/file-item.css | 2 +- blocks/SourceBtn/source-btn.css | 1 - blocks/themes/uc-basic/theme.css | 2 +- 4 files changed, 2 insertions(+), 15 deletions(-) diff --git a/blocks/DropArea/drop-area.css b/blocks/DropArea/drop-area.css index b32d8842..7337380b 100644 --- a/blocks/DropArea/drop-area.css +++ b/blocks/DropArea/drop-area.css @@ -32,14 +32,7 @@ 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); } @@ -103,11 +96,6 @@ 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); diff --git a/blocks/FileItem/file-item.css b/blocks/FileItem/file-item.css index 3f49d7bd..67e75874 100644 --- a/blocks/FileItem/file-item.css +++ b/blocks/FileItem/file-item.css @@ -127,7 +127,7 @@ 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; } diff --git a/blocks/SourceBtn/source-btn.css b/blocks/SourceBtn/source-btn.css index 340d1ad5..5e6da156 100644 --- a/blocks/SourceBtn/source-btn.css +++ b/blocks/SourceBtn/source-btn.css @@ -20,7 +20,6 @@ uc-source-btn:last-child > button { } uc-source-btn > button:hover { - color: var(--uc-primary); background-color: var(--uc-primary-transparent); } diff --git a/blocks/themes/uc-basic/theme.css b/blocks/themes/uc-basic/theme.css index ac89ea9d..bb2b21ad 100644 --- a/blocks/themes/uc-basic/theme.css +++ b/blocks/themes/uc-basic/theme.css @@ -98,7 +98,7 @@ --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); From 1e355978b8de08a62f7abfa6424b8dd8f0044182 Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Mon, 16 Sep 2024 10:07:41 +0200 Subject: [PATCH 15/20] minor --- blocks/DropArea/drop-area.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blocks/DropArea/drop-area.css b/blocks/DropArea/drop-area.css index 7337380b..f72e8b3e 100644 --- a/blocks/DropArea/drop-area.css +++ b/blocks/DropArea/drop-area.css @@ -119,7 +119,7 @@ :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] From 53be0dbfe91e8f32988a7e64859509183e07d871 Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Mon, 16 Sep 2024 10:18:34 +0200 Subject: [PATCH 16/20] cloudimageeditor --- blocks/CloudImageEditor/src/css/common.css | 20 ++++--------------- .../src/elements/slider/SliderUi.js | 2 +- 2 files changed, 5 insertions(+), 17 deletions(-) diff --git a/blocks/CloudImageEditor/src/css/common.css b/blocks/CloudImageEditor/src/css/common.css index 990af45e..f6db831a 100644 --- a/blocks/CloudImageEditor/src/css/common.css +++ b/blocks/CloudImageEditor/src/css/common.css @@ -386,18 +386,6 @@ 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); - --hover-opacity: 1; -} - -:where(.uc-contrast) uc-editor-button-control.uc-active, -:where(.uc-contrast) uc-editor-operation-control.uc-active, -:where(.uc-contrast) uc-editor-crop-button-control.uc-active, -:where(.uc-contrast) uc-editor-filter-control.uc-active { --idle-color-rgb: var(--uc-primary-foreground); --idle-background: var(--uc-primary); --idle-opacity: 1; @@ -1138,16 +1126,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 index 811572d5..3d2e9046 100644 --- 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); From d0fa49d3f14e7ac694c727d70630f451f3f9370a Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Mon, 16 Sep 2024 10:24:14 +0200 Subject: [PATCH 17/20] revert test class --- demo/raw-regular.html | 1 - 1 file changed, 1 deletion(-) diff --git a/demo/raw-regular.html b/demo/raw-regular.html index 71f5aab3..5214a624 100644 --- a/demo/raw-regular.html +++ b/demo/raw-regular.html @@ -35,7 +35,6 @@ From 7af41ba881818cd305e7aa3e3311abef254a6912 Mon Sep 17 00:00:00 2001 From: Anton Nesterov Date: Mon, 16 Sep 2024 10:43:13 +0200 Subject: [PATCH 18/20] tweak .uc-contrast --- blocks/CloudImageEditor/src/css/common.css | 4 ++++ blocks/themes/uc-basic/common.css | 4 ++++ blocks/themes/uc-basic/theme.css | 4 ++-- 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/blocks/CloudImageEditor/src/css/common.css b/blocks/CloudImageEditor/src/css/common.css index f6db831a..4edfa772 100644 --- a/blocks/CloudImageEditor/src/css/common.css +++ b/blocks/CloudImageEditor/src/css/common.css @@ -985,6 +985,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; diff --git a/blocks/themes/uc-basic/common.css b/blocks/themes/uc-basic/common.css index 99319218..65d45e6e 100644 --- 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 index bb2b21ad..3823ec9f 100644 --- a/blocks/themes/uc-basic/theme.css +++ b/blocks/themes/uc-basic/theme.css @@ -262,8 +262,8 @@ } :where(.uc-contrast) { - --uc-border-light: oklch(40% 0 0); - --uc-border-dark: oklch(60% 0 0); + --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); From 4da345ad4938422b6f22649493d3d36dd42e6e79 Mon Sep 17 00:00:00 2001 From: Egor Didenko Date: Thu, 19 Sep 2024 09:10:37 -0400 Subject: [PATCH 19/20] Revert "TEMP: husky fix" This reverts commit ebc3a548e8244d01674eb8e7d6bed5e25c37992f. --- .husky/pre-commit | 5 +++++ 1 file changed, 5 insertions(+) create mode 100755 .husky/pre-commit diff --git a/.husky/pre-commit b/.husky/pre-commit new file mode 100755 index 00000000..eb635fc9 --- /dev/null +++ b/.husky/pre-commit @@ -0,0 +1,5 @@ +#!/bin/sh +. "$(dirname "$0")/_/husky.sh" + +./node_modules/.bin/lint-staged +npm run tsc From 14ad6111b1e2f5c4b5aae4f5ef8ff5de00995b60 Mon Sep 17 00:00:00 2001 From: Egor Didenko Date: Thu, 19 Sep 2024 09:24:26 -0400 Subject: [PATCH 20/20] fix: linter css --- blocks/CloudImageEditor/src/css/common.css | 1 + 1 file changed, 1 insertion(+) diff --git a/blocks/CloudImageEditor/src/css/common.css b/blocks/CloudImageEditor/src/css/common.css index 4edfa772..620c3d92 100644 --- a/blocks/CloudImageEditor/src/css/common.css +++ b/blocks/CloudImageEditor/src/css/common.css @@ -415,6 +415,7 @@ uc-editor-filter-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; }