@uploadcare/file-uploader 1.6.0 → 1.8.0

package/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);

package/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;

package/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;

package/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);
+}

package/env.d.ts

@@ -1,4 +1,4 @@
 /** Do not edit this file manually. It's generated during build process. */
 export const PACKAGE_NAME: "blocks";
-export const PACKAGE_VERSION: "1.6.0";
+export const PACKAGE_VERSION: "1.8.0";
 //# sourceMappingURL=env.d.ts.map

package/env.js

@@ -1,3 +1,3 @@
 /** Do not edit this file manually. It's generated during build process. */
 export const PACKAGE_NAME = 'blocks';
-export const PACKAGE_VERSION = '1.6.0';
+export const PACKAGE_VERSION = '1.8.0';

package/index.ssr.d.ts

@@ -543,7 +543,7 @@ export const Modal: {
     bindAttributes: () => void;
 };
 export const PACKAGE_NAME: "blocks";
-export const PACKAGE_VERSION: "1.6.0";
+export const PACKAGE_VERSION: "1.8.0";
 export const PresenceToggle: {
     new (): {};
     template: string;

package/index.ssr.js

@@ -974,7 +974,7 @@ export const Modal = class {
   static bindAttributes = () => {};
 };
 export const PACKAGE_NAME = `blocks`;
-export const PACKAGE_VERSION = `1.6.0`;
+export const PACKAGE_VERSION = `1.8.0`;
 export const PresenceToggle = class {
   static template = `<slot></slot> `;
   static reg = () => {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uploadcare/file-uploader",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "description": "Building blocks for Uploadcare products integration",
   "keywords": [
     "web components",
@@ -51,6 +51,7 @@
     "./locales/*": "./locales/*"
   },
   "repository": "https://github.com/uploadcare/file-uploader/",
+  "homepage": "https://uploadcare.com/",
   "files": [
     "{abstract,blocks,solutions,web,utils,types,locales}/**/*.{js,css,d.ts,d.ts.map}",
     "index.{js,d.ts,d.ts.map}",

package/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: '';