uploadcare · nd0ut · Jun 21, 2024 · Jun 20, 2024 · Jun 20, 2024 · Jun 20, 2024
diff --git a/examples/angular-uploader/package-lock.json b/examples/angular-uploader/package-lock.json
diff --git a/examples/angular-uploader/package.json b/examples/angular-uploader/package.json
@@ -17,7 +17,7 @@
     "@angular/platform-browser": "17.0.9",
     "@angular/platform-browser-dynamic": "17.0.9",
     "@angular/router": "17.0.9",
-    "@uploadcare/blocks": "0.39.0",
+    "@uploadcare/blocks": "0.44.0",
     "rxjs": "7.4.0",
     "tslib": "2.3.1",
     "zone.js": "0.14.4"

diff --git a/examples/angular-uploader/src/app/components/file-uploader/file-uploader.component.html b/examples/angular-uploader/src/app/components/file-uploader/file-uploader.component.html
@@ -7,9 +7,9 @@
     Available options: https://uploadcare.com/docs/file-uploader/options/
 
     Also note: Some options currently are not available via `lr-config`,
-    but may be set via CSS properties. E.g. `darkmode`.
+    but may be set via CSS properties or CSS classes. E.g. accent colors or darkmode
 
-    Here they are: https://github.com/uploadcare/blocks/blob/main/blocks/themes/lr-basic/config.css
+    Here they are: https://uploadcare.com/docs/file-uploader/styling/
   -->
   <lr-config
     #config
@@ -25,7 +25,8 @@
   <lr-file-uploader-regular
     [attr.ctx-name]="uploaderCtxName"
     [class]="uploaderClassName"
-    [class.dark-mode-enabled]="theme === 'dark'"
+    [class.uc-dark]="theme === 'dark'"
+    [class.uc-light]="theme === 'light'"
   ></lr-file-uploader-regular>
 
   <lr-upload-ctx-provider

diff --git a/examples/angular-uploader/src/app/components/file-uploader/file-uploader.component.scss b/examples/angular-uploader/src/app/components/file-uploader/file-uploader.component.scss
@@ -7,20 +7,13 @@
 }
 
 /*
-  Note: We set this class manually when we want File Uploader to join the dark side.
-  The main option here is `darkmore`. The rest ones are used to tune the theme to match the website.
+  CSS variables are used to customize the appearance of the file uploader.
 
-  See more: https://uploadcare.com/docs/file-uploader/styling/#base-values
+  See more: https://uploadcare.com/docs/file-uploader/styling/
  */
-.dark-mode-enabled {
-  --darkmode: 1;
-
-  --h-accent: 33.3;
-  --s-accent: 100%;
-  --l-accent: 60.78%;
-
-  --clr-btn-bgr-primary: var(--ui-action-button-background);
-  --clr-btn-txt-primary: var(--ui-action-button-text-color);
+.file-uploader {
+  --uc-primary-dark: var(--ui-action-button-background);
+  --uc-primary-foreground-dark: var(--ui-action-button-text-color);
 }
 
 .preview {

diff --git a/examples/composition/package-lock.json b/examples/composition/package-lock.json
diff --git a/examples/composition/package.json b/examples/composition/package.json
@@ -15,6 +15,6 @@
     "vite": "4.5.2"
   },
   "dependencies": {
-    "@uploadcare/blocks": "0.30.5"
+    "@uploadcare/blocks": "0.44.0"
   }
 }
diff --git a/examples/js-uploader/headless.html b/examples/js-uploader/headless.html
@@ -7,9 +7,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-  <link rel="stylesheet"
-    href="https://cdn.jsdelivr.net/npm/@uploadcare/[email protected]/web/lr-file-uploader-regular.min.css">
-  <link rel="stylesheet" href="./styles.css">
+  <script type="module" src="./headless.js"></script>
 </head>
 
 <body>
@@ -20,86 +18,11 @@
   <hr>
 
   <lr-config ctx-name="my-uploader" pubkey="a6ca334c3520777c0045" sourceList="local, url, camera, dropbox"></lr-config>
-  <lr-file-uploader-regular headless ctx-name="my-uploader"></lr-file-uploader-regular>
+  <lr-file-uploader-regular headless ctx-name="my-uploader" class="uc-light"></lr-file-uploader-regular>
   <lr-upload-ctx-provider ctx-name="my-uploader" id="my-uploader-provider"></lr-upload-ctx-provider>
   <button id="custom-button">Custom button</button>
 
   <div class="previews" id="previews"></div>
-
-  <script type="module">
-    import * as LR from 'https://cdn.jsdelivr.net/npm/@uploadcare/[email protected]/web/lr-file-uploader-regular.min.js';
-
-    LR.registerBlocks(LR);
-
-    const providerNode = document.getElementById('my-uploader-provider');
-    const previewsNode = document.getElementById('previews');
-    const customButtonNode = document.getElementById('custom-button')
-
-
-    /*
-      Note: Here we use provider's API to init flow File Uploader state.
-      We use it here to show users how to use headless mode and work with File Uploader.
-
-      See more: https://uploadcare.com/docs/file-uploader/api/
-     */
-
-    const initFlow = () => providerNode.initFlow()
-    customButtonNode.addEventListener('click', initFlow)
-
-    /*
-      Note: Event binding is the main way to get data and other info from File Uploader.
-      There plenty of events you may use.
-
-      See more: https://uploadcare.com/docs/file-uploader/events/
-     */
-    providerNode.addEventListener('change', handleChangeEvent);
-
-    function handleChangeEvent(e) {
-      console.log('change event payload:', e);
-
-      renderFiles(e.detail.allEntries.filter(f => f.status === 'success'));
-    }
-
-    function renderFiles(files) {
-      const renderedFiles = files.map(file => {
-        const fileNode = document.createElement('div');
-        fileNode.setAttribute('class', 'preview-wrapper');
-
-        const imgNode = document.createElement('img');
-        imgNode.setAttribute('class', 'preview-image');
-        imgNode.setAttribute('src', file.cdnUrl + '/-/preview/-/resize/x400/');
-        imgNode.setAttribute('width', '200');
-        imgNode.setAttribute('height', '200');
-        imgNode.setAttribute('alt', file.fileInfo.originalFilename);
-        imgNode.setAttribute('title', file.fileInfo.originalFilename);
-
-        const imgNameNode = document.createElement('p');
-        imgNameNode.setAttribute('class', 'preview-data');
-        imgNameNode.textContent = `${file.fileInfo.originalFilename}`;
-
-        const imgSizeNode = document.createElement('p');
-        imgSizeNode.setAttribute('class', 'preview-data');
-        imgSizeNode.textContent = `${formatSize(file.fileInfo.size)}`;
-
-        fileNode.append(imgNode, imgNameNode, imgSizeNode);
-
-        return fileNode;
-      });
-
-      previewsNode.replaceChildren(...renderedFiles);
-    }
-
-    function formatSize(bytes) {
-      if (!bytes) return '0 Bytes';
-
-      const k = 1024;
-      const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-
-      const i = Math.floor(Math.log(bytes) / Math.log(k));
-
-      return `${parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`;
-    }
-  </script>
 </body>
 
 </html>
diff --git a/examples/js-uploader/headless.js b/examples/js-uploader/headless.js
@@ -0,0 +1,73 @@
+import * as LR from "@uploadcare/blocks/web/lr-file-uploader-regular.min.js";
+import "@uploadcare/blocks/web/lr-file-uploader-regular.min.css";
+import "./styles.css";
+
+LR.registerBlocks(LR);
+
+const providerNode = document.getElementById("my-uploader-provider");
+const previewsNode = document.getElementById("previews");
+const customButtonNode = document.getElementById("custom-button");
+
+/*
+  Note: Here we use provider's API to init flow File Uploader state.
+  We use it here to show users how to use headless mode and work with File Uploader.
+
+  See more: https://uploadcare.com/docs/file-uploader/api/
+ */
+
+const initFlow = () => providerNode.initFlow();
+customButtonNode.addEventListener("click", initFlow);
+
+/*
+  Note: Event binding is the main way to get data and other info from File Uploader.
+  There plenty of events you may use.
+
+  See more: https://uploadcare.com/docs/file-uploader/events/
+ */
+providerNode.addEventListener("change", handleChangeEvent);
+
+function handleChangeEvent(e) {
+  console.log("change event payload:", e);
+
+  renderFiles(e.detail.allEntries.filter((f) => f.status === "success"));
+}
+
+function renderFiles(files) {
+  const renderedFiles = files.map((file) => {
+    const fileNode = document.createElement("div");
+    fileNode.setAttribute("class", "preview-wrapper");
+
+    const imgNode = document.createElement("img");
+    imgNode.setAttribute("class", "preview-image");
+    imgNode.setAttribute("src", file.cdnUrl + "/-/preview/-/resize/x400/");
+    imgNode.setAttribute("width", "200");
+    imgNode.setAttribute("height", "200");
+    imgNode.setAttribute("alt", file.fileInfo.originalFilename);
+    imgNode.setAttribute("title", file.fileInfo.originalFilename);
+
+    const imgNameNode = document.createElement("p");
+    imgNameNode.setAttribute("class", "preview-data");
+    imgNameNode.textContent = `${file.fileInfo.originalFilename}`;
+
+    const imgSizeNode = document.createElement("p");
+    imgSizeNode.setAttribute("class", "preview-data");
+    imgSizeNode.textContent = `${formatSize(file.fileInfo.size)}`;
+
+    fileNode.append(imgNode, imgNameNode, imgSizeNode);
+
+    return fileNode;
+  });
+
+  previewsNode.replaceChildren(...renderedFiles);
+}
+
+function formatSize(bytes) {
+  if (!bytes) return "0 Bytes";
+
+  const k = 1024;
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return `${parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`;
+}