Merge pull request #33 from uploadcare/feature/blocks-new-theming

Feature/blocks-new-theming

Author: nd0ut

examples/angular-uploader/package-lock.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"

examples/angular-uploader/package.json

@@ -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

examples/angular-uploader/src/app/components/file-uploader/file-uploader.component.html

@@ -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 {