feat: updated theming mechanics with oklch colors and reworked css pr…

…operties (#662)

* let's begin

* ui-size -> uc-size and other changes in common.css

* common.css done

* ActivityHeader done

* TEMPORARY add Inter to font-family

* FileItem done

* almost

* modal

* ProgressBar

* CloudImageEditorActivity

* ProgressBarCommon

* UploadList

* SourceBtn

* DropArea intermediate

* DropArea

* Copyright

* CameraSource

* Color

* ConfirmationDialog

* EditableCanvas

* ExternalSource

* Icon

* Range

* Select

* SimpleBtn intermediate

* Tabs

* UploadList error colors

* UrlSource

* Video

* cleanup

* increase dialog corner radius

* remove --ui-size

* minimal intermediate

* fix add-more icon

* fix copyright in inline

* added --uc-preview-size, minimal intermediate

* fix transparency issues in minimal

* minimal done

* minor changes

* Copyright: fix more transparency issues

* separate variables for simplebtn

* simplify SimpleBtn

* prepare button to switch to lr-basic

* intermediate commit

* slider recolored

* intermediate commit

* keep colors together

* dark theme

* controls coloring done

* color the crop guides

* minor

* fix operation control active state

* filter-control icon coloring

* rm some hardcode

* color errors

* rm old variables from theme

* dark mode with media query

* demo background with theme media query

* cleanup CloudImageEditor's common.css

* editor icons update

* edit icon is a pencil now

* StartFrom: hide DropArea on phones

* make primary colors derive from one value

* use system-ui as a default font-family

* make chroma and hue uniform across grays

* stop forcing `lr` prefix

* make theme forceable with classes

* rm rules from stylelintrc.cjs

* add rgb fallback

* remove dakrmode css custom property

* prevent link styles external override

* fix typo

* remove unused css config properties

* remove editor host selectors

* remove unnecessary styles from inline

* do not apply ltr direction style

* remove unnecessary styles

* fix cloud image editor solution styles

* fix(cloud-image-editor): supress wheel passive handler warning

* fix editor icons size styles

* fix editor initial flashing

* fix editor demo page

* remove unused components

* update icons sprite

* rgb fallback

* Styling selectors via attrs

* Rename custom property

* Hide close button for inline mode

* Fix not-image icon color

* Refactor CloudImageEditorSolution solution

* Add cursor pointer to the copyright link

* Fix theme colors specificity

* Fix cloud image editor solution styles

* Add some comments

* Simplify uc-dark/light selectors

* Move all the theme variables to the :root scope

* independent vars for simple-btn, rgb fallback fix

* darker color for dark demos

* Fix modal content width

* Move theme variables back to lr-wgt-common scope

* desaturated all grays

* brighten simple-btn

* fix destructive-dark

* fix potential color notation problems

* detach simplebtn font values

* another syntax mistake fixed

* rm comments in fallback

* dark demo background again

* Better social sources theming

* rm uc-light from raw-regular demo

* social sources button title `Done`

* remove unneeded icons

* svg sprite rebuild

* replaced image in readme

* rm theme readme

* rm fullscreen icons

* fix error line height

* Restore edit-file icon

* Rebuild sprites

* Add `--uc-line-height` css property

* Update thumb generation observer options to fix inline mode

* Specifiy file item height, add some optimizations to rendering, specify transition properties

* Fix drop-area icon transition

---------

Co-authored-by: nd0ut <[email protected]>

.stylelintrc.cjs

@@ -40,11 +40,6 @@ module.exports = {
       files: ['blocks/**/*.css', 'solutions/**/*.css'],
       ignoreFiles: ['**/test/**/*.css'],
       plugins: ['./stylelint-force-app-name-prefix.cjs'],
-      rules: {
-        'plugin/stylelint-force-app-name-prefix': {
-          appName: 'lr',
-        },
-      },
     },
   ],
 };

README.md

@@ -33,7 +33,7 @@ and [even more](<(https://uploadcare.com/features/?ref=github-readme)>).
 
 See Uploadcare Blocks [in action](https://codesandbox.io/p/devbox/github/uploadcare/blocks-examples/tree/main/examples/js-uploader)!
 
-<img alt="Uploadcare Blocks examples" src="https://ucarecdn.com/8035cdc7-f0b9-4ea9-8c15-05816f315481/">
+<img alt="Uploadcare Blocks examples" src="https://ucarecdn.com/2883da9f-6962-49db-9947-f91a3e25be2f/-/preview/">
 
 ## Core features
 

abstract/ActivityBlock.js

@@ -198,7 +198,6 @@ ActivityBlock.activities = Object.freeze({
   DRAW: 'draw',
   UPLOAD_LIST: 'upload-list',
   URL: 'url',
-  CONFIRMATION: 'confirmation',
   CLOUD_IMG_EDIT: 'cloud-image-edit',
   EXTERNAL: 'external',
   DETAILS: 'details',

abstract/Block.js

@@ -19,7 +19,9 @@ const TAG_PREFIX = 'lr-';
 export class Block extends BaseComponent {
   /** @type {string | null} */
   static StateConsumerScope = null;
-  static className = '';
+
+  /** @type {string[]} */
+  static styleAttrs = [];
   requireCtxName = false;
   allowCustomTemplate = true;
   /** @type {import('./ActivityBlock.js').ActivityType} */
@@ -128,10 +130,10 @@ export class Block extends BaseComponent {
   }
 
   connectedCallback() {
-    const className = /** @type {typeof Block} */ (this.constructor).className;
-    if (className) {
-      this.classList.toggle(`${TAG_PREFIX}${className}`, true);
-    }
+    const styleAttrs = /** @type {typeof Block} */ (this.constructor).styleAttrs;
+    styleAttrs.forEach((attr) => {
+      this.setAttribute(attr, '');
+    });
 
     if (this.hasAttribute('retpl')) {
       // @ts-ignore TODO: fix this
@@ -179,7 +181,8 @@ export class Block extends BaseComponent {
     }
 
     this.sub(localeStateKey('locale-id'), (localeId) => {
-      this.style.direction = getLocaleDirection(localeId);
+      const direction = getLocaleDirection(localeId);
+      this.style.direction = direction === 'ltr' ? '' : direction;
     });
   }
 

abstract/SolutionBlock.js

@@ -1,8 +1,9 @@
-import { uploaderBlockCtx } from './CTX.js';
 import svgIconsSprite from '../blocks/themes/lr-basic/svg-sprite.js';
 import { Block } from './Block.js';
+import { uploaderBlockCtx } from './CTX.js';
 
 export class SolutionBlock extends Block {
+  static styleAttrs = ['lr-wgt-common'];
   requireCtxName = true;
   init$ = uploaderBlockCtx(this);
   _template = null;

blocks/ActivityHeader/activity-header.css

@@ -1,34 +1,14 @@
 lr-activity-header {
   display: flex;
-  gap: var(--gap-mid);
   justify-content: space-between;
-  padding: var(--gap-mid);
-  color: var(--clr-txt);
+  gap: var(--uc-padding);
+  padding: var(--uc-padding);
+  color: var(--uc-foreground);
   font-weight: 500;
   font-size: 1em;
-  line-height: var(--ui-size);
-}
-
-lr-activity-header lr-icon {
-  height: var(--ui-size);
 }
 
 lr-activity-header > * {
   display: flex;
   align-items: center;
 }
-
-lr-activity-header button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--clr-txt-mid);
-}
-
-lr-activity-header button:hover {
-  background-color: var(--clr-background);
-}
-
-lr-activity-header button:active {
-  background-color: var(--clr-background-dark);
-}

blocks/CameraSource/camera-source.css

@@ -6,12 +6,12 @@ lr-camera-source {
   height: 100%;
   max-height: 100%;
   overflow: hidden;
-  background-color: var(--clr-background-light);
-  border-radius: var(--border-radius-element);
+  background-color: var(--uc-background);
+  border-radius: var(--uc-radius);
 }
 
-lr-modal lr-camera-source {
-  width: min(calc(var(--modal-max-w) - var(--gap-mid) * 2), calc(100vw - var(--gap-mid) * 2));
+[lr-modal] lr-camera-source {
+  width: min(calc(var(--uc-dialog-max-width) - var(--uc-padding) * 2), calc(100vw - var(--uc-padding) * 2));
   height: 100vh;
   max-height: var(--modal-max-content-height);
 }
@@ -22,7 +22,7 @@ lr-camera-source.initialized {
 
 @media only screen and (max-width: 430px) {
   lr-camera-source {
-    width: calc(100vw - var(--gap-mid) * 2);
+    width: calc(100vw - var(--uc-padding) * 2);
     height: var(--modal-content-height-fill, 100%);
   }
 }
@@ -33,8 +33,8 @@ lr-camera-source video {
   max-height: 100%;
   object-fit: contain;
   object-position: center center;
-  background-color: var(--clr-background-dark);
-  border-radius: var(--border-radius-element);
+  background-color: var(--uc-muted);
+  border-radius: var(--uc-radius);
 }
 
 lr-camera-source .toolbar {
@@ -43,47 +43,48 @@ lr-camera-source .toolbar {
   display: flex;
   justify-content: space-between;
   width: 100%;
-  padding: var(--gap-mid);
-  background-color: var(--clr-background-light);
+  padding: var(--uc-padding);
+  background-color: var(--uc-background);
 }
 
 lr-camera-source .content {
   display: flex;
   flex: 1;
   justify-content: center;
   width: 100%;
-  padding: var(--gap-mid);
+  padding: var(--uc-padding);
   padding-top: 0;
   overflow: hidden;
 }
 
 lr-camera-source .message-box {
-  --padding: calc(var(--gap-max) * 2);
-
   display: flex;
   flex-direction: column;
-  grid-gap: var(--gap-max);
+  grid-gap: 40px;
   align-items: center;
   justify-content: center;
-  padding: var(--padding) var(--padding) 0 var(--padding);
-  color: var(--clr-txt);
+  padding: 40px 40px 0;
+  color: var(--uc-foreground);
 }
 
 lr-camera-source .message-box button {
-  color: var(--clr-btn-txt-primary);
-  background-color: var(--clr-btn-bgr-primary);
+  color: var(--uc-primary-foreground);
+  background-color: var(--uc-primary);
 }
 
 lr-camera-source .shot-btn {
   position: absolute;
-  bottom: var(--gap-max);
-  width: calc(var(--ui-size) * 1.8);
-  height: calc(var(--ui-size) * 1.8);
-  color: var(--clr-background-light);
-  background-color: var(--clr-txt);
+  bottom: 20px;
+  width: 58px;
+  height: 58px;
+  color: var(--uc-background);
+  background-color: var(--uc-foreground);
   border-radius: 50%;
   opacity: 0.85;
-  transition: var(--transition-duration) ease;
+  transition:
+    bottom var(--uc-transition),
+    opacity var(--uc-transition),
+    transform var(--uc-transition);
 }
 
 lr-camera-source .shot-btn:hover {
@@ -92,15 +93,15 @@ lr-camera-source .shot-btn:hover {
 }
 
 lr-camera-source .shot-btn:active {
-  background-color: var(--clr-txt-mid);
+  transform: scale(1);
   opacity: 1;
 }
 
 lr-camera-source .shot-btn[disabled] {
-  bottom: calc(var(--gap-max) * -1 - var(--gap-mid) - var(--ui-size) * 2);
+  bottom: -80px;
 }
 
 lr-camera-source .shot-btn lr-icon svg {
-  width: calc(var(--ui-size) / 1.5);
-  height: calc(var(--ui-size) / 1.5);
+  width: 20px;
+  height: 20px;
 }

blocks/CloudImageEditor/src/CloudImageEditorBlock.js

@@ -19,7 +19,7 @@ import { TabId } from './toolbar-constants.js';
 
 export class CloudImageEditorBlock extends Block {
   ctxOwner = true;
-  static className = 'cloud-image-editor';
+  static styleAttrs = ['lr-cloud-image-editor'];
 
   constructor() {
     super();

blocks/CloudImageEditor/src/CropFrame.js

@@ -256,7 +256,7 @@ export class CropFrame extends Block {
       width: '100%',
       height: '100%',
       fill: 'none',
-      stroke: '#000000',
+      stroke: 'currentColor',
       'stroke-width': GUIDE_STROKE_WIDTH,
       'stroke-opacity': 0.5,
     });
@@ -268,7 +268,7 @@ export class CropFrame extends Block {
         y1: `0%`,
         x2: `${GUIDE_THIRD * i}%`,
         y2: `100%`,
-        stroke: '#000000',
+        stroke: 'currentColor',
         'stroke-width': GUIDE_STROKE_WIDTH,
         'stroke-opacity': 0.3,
       });
@@ -281,7 +281,7 @@ export class CropFrame extends Block {
         y1: `${GUIDE_THIRD * i}%`,
         x2: `100%`,
         y2: `${GUIDE_THIRD * i}%`,
-        stroke: '#000000',
+        stroke: 'currentColor',
         'stroke-width': GUIDE_STROKE_WIDTH,
         'stroke-opacity': 0.3,
       });

blocks/CloudImageEditor/src/EditorScroller.js

@@ -6,14 +6,26 @@ export class EditorScroller extends Block {
   initCallback() {
     super.initCallback();
 
-    this.addEventListener('wheel', (e) => {
-      e.preventDefault();
-      let { deltaY, deltaX } = e;
-      if (Math.abs(deltaX) > X_THRESHOLD) {
-        this.scrollLeft += deltaX;
-      } else {
-        this.scrollLeft += deltaY;
-      }
+    this.addEventListener(
+      'wheel',
+      (e) => {
+        e.preventDefault();
+
+        let { deltaY, deltaX } = e;
+        if (Math.abs(deltaX) > X_THRESHOLD) {
+          this.scrollLeft += deltaX;
+        } else {
+          this.scrollLeft += deltaY;
+        }
+      },
+      {
+        passive: false,
+      },
+    );
+
+    // This fixes some strange bug on MacOS - wheel event doesn't fire for physical mouse wheel if no scroll event attached also
+    this.addEventListener('scroll', () => {}, {
+      passive: true,
     });
   }
 }

blocks/CloudImageEditor/src/EditorToolbar.js

@@ -21,7 +21,7 @@ function renderTabToggle(id) {
   return /* HTML */ `
     <lr-presence-toggle class="tab-toggle" set="visible: presence.tabToggle.${id}; styles: presence.tabToggleStyles;">
       <lr-btn-ui
-        theme="boring"
+        theme="tab"
         ref="tab-toggle-${id}"
         data-id="${id}"
         icon="${id}"
@@ -395,20 +395,20 @@ EditorToolbar.template = /* HTML */ `
     <lr-presence-toggle class="sub-toolbar" set="visible: presence.mainToolbar; styles: presence.subTopToolbarStyles">
       <div class="tab-content-row">${ALL_TABS.map(renderTabContent).join('')}</div>
       <div class="controls-row">
-        <lr-btn-ui theme="boring" icon="closeMax" set="onclick: on.cancel"> </lr-btn-ui>
+        <lr-btn-ui theme="secondary-icon" icon="closeMax" set="onclick: on.cancel"> </lr-btn-ui>
         <lr-presence-toggle class="tab-toggles" set="visible: presence.tabToggles; styles: presence.tabTogglesStyles">
           <div ref="tabs-indicator" class="tab-toggles_indicator"></div>
           ${ALL_TABS.map(renderTabToggle).join('')}
         </lr-presence-toggle>
-        <lr-btn-ui theme="primary" icon="done" set="onclick: on.apply"> </lr-btn-ui>
+        <lr-btn-ui theme="primary-icon" icon="done" set="onclick: on.apply"> </lr-btn-ui>
       </div>
     </lr-presence-toggle>
     <lr-presence-toggle class="sub-toolbar" set="visible: presence.subToolbar; styles: presence.subBottomToolbarStyles">
       <div class="slider">
         <lr-editor-slider ref="slider-el"></lr-editor-slider>
       </div>
       <div class="controls-row">
-        <lr-btn-ui theme="boring" set="onclick: on.cancelSlider;" l10n="@text:cancel"> </lr-btn-ui>
+        <lr-btn-ui theme="secondary" set="onclick: on.cancelSlider;" l10n="@text:cancel"> </lr-btn-ui>
         <lr-btn-ui theme="primary" set="onclick: on.applySlider;" l10n="@text:apply"> </lr-btn-ui>
       </div>
     </lr-presence-toggle>