diff --git a/blocks/CloudImageEditor/src/css/common.css b/blocks/CloudImageEditor/src/css/common.css index bcd2985b..620c3d92 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, @@ -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 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); diff --git a/blocks/DropArea/drop-area.css b/blocks/DropArea/drop-area.css index 6f0ab700..f72e8b3e 100644 --- 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 index 38280ce9..67e75874 100644 --- 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 index 629b2257..f9fc87c9 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-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 index 3c2a4967..5e6da156 100644 --- 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 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 5f1474a9..3823ec9f 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,10 +87,10 @@ @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); @@ -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); @@ -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; } @@ -260,3 +260,20 @@ --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); +} \ No newline at end of file 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: '';