Better social sources theming

uploadcare · Jun 14, 2024 · 79c3116 · 79c3116
1 parent 99566a6
commit 79c3116
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 12 deletions.
diff --git a/blocks/ExternalSource/ExternalSource.js b/blocks/ExternalSource/ExternalSource.js
@@ -154,11 +154,16 @@ export class ExternalSource extends UploaderBlock {
   /** @private */
   applyStyles() {
     let colors = {
+      radius: this.getCssValue('--uc-radius'),
       backgroundColor: this.getCssValue('--uc-background'),
       textColor: this.getCssValue('--uc-foreground'),
-      shadeColor: this.getCssValue('--uc-secondary'),
-      linkColor: '#157cfc',
-      linkColorHover: '#3891ff',
+      secondaryColor: this.getCssValue('--uc-secondary'),
+      secondaryForegroundColor: this.getCssValue('--uc-secondary-foreground'),
+      secondaryHover: this.getCssValue('--uc-secondary-hover'),
+      linkColor: this.getCssValue('--uc-primary'),
+      linkColorHover: this.getCssValue('--uc-primary-hover'),
+      fontFamily: this.getCssValue('--uc-font-family'),
+      fontSize: this.getCssValue('--uc-font-size'),
     };
 
     this.sendMessage({

diff --git a/blocks/ExternalSource/buildStyles.js b/blocks/ExternalSource/buildStyles.js
@@ -1,23 +1,56 @@
-let styleToCss = (style) => {
-  let css = Object.keys(style).reduce((acc, selector) => {
-    let propertiesObj = style[selector];
-    let propertiesStr = Object.keys(propertiesObj).reduce((acc, prop) => {
-      let value = propertiesObj[prop];
+// @ts-check
+
+/**
+ * @param {Record<string, Record<string, string>>} style
+ * @returns
+ */
+const styleToCss = (style) => {
+  const css = Object.keys(style).reduce((acc, selector) => {
+    const propertiesObj = style[selector];
+    const propertiesStr = Object.keys(propertiesObj).reduce((acc, prop) => {
+      const value = propertiesObj[prop];
       return acc + `${prop}: ${value};`;
     }, '');
     return acc + `${selector}{${propertiesStr}}`;
   }, '');
   return css;
 };
 
-export function buildStyles({ textColor, backgroundColor, linkColor, linkColorHover, shadeColor }) {
-  let border = `solid 1px ${shadeColor}`;
+/**
+ * @param {{
+ *   textColor: string;
+ *   backgroundColor: string;
+ *   linkColor: string;
+ *   linkColorHover: string;
+ *   secondaryColor: string;
+ *   secondaryHover: string;
+ *   secondaryForegroundColor: string;
+ *   fontFamily: string;
+ *   fontSize: string;
+ *   radius: string;
+ * }} options
+ */
+export function buildStyles({
+  textColor,
+  backgroundColor,
+  linkColor,
+  linkColorHover,
+  secondaryColor,
+  secondaryHover,
+  secondaryForegroundColor,
+  fontFamily,
+  fontSize,
+  radius,
+}) {
+  const border = `solid 1px ${secondaryColor}`;
 
   // TODO: we need to update source source styles, add css custom properties to control theme
   return styleToCss({
     body: {
       color: textColor,
       'background-color': backgroundColor,
+      'font-family': fontFamily,
+      'font-size': fontSize,
     },
     '.side-bar': {
       background: 'inherit',
@@ -36,7 +69,7 @@ export function buildStyles({ textColor, backgroundColor, linkColor, linkColorHo
       color: 'inherit',
     },
     '.list-table-row:hover': {
-      background: shadeColor,
+      background: secondaryColor,
     },
     '.list-table-row .list-table-cell-a, .list-table-row .list-table-cell-b': {
       'border-top': border,
@@ -55,7 +88,7 @@ export function buildStyles({ textColor, backgroundColor, linkColor, linkColorHo
       'background-size': '25px 25px',
     },
     '.list-icons-item': {
-      'background-color': shadeColor,
+      'background-color': secondaryColor,
     },
     '.source-gdrive .side-bar-menu a, .source-gphotos .side-bar-menu a': {
       color: linkColor,
@@ -80,5 +113,21 @@ export function buildStyles({ textColor, backgroundColor, linkColor, linkColorHo
       color: linkColorHover,
       background: 'none',
     },
+    'input[type=submit], .button, button': {
+      color: secondaryForegroundColor,
+      background: secondaryColor,
+      'box-shadow': 'none',
+      border: 'none',
+      'border-radius': radius,
+    },
+    'input[type=submit]:hover, .button:hover, button:hover': {
+      background: secondaryHover,
+    },
+    '.text-field, input[type=search], input[type=text], input[type=url], textarea': {
+      color: secondaryForegroundColor,
+      'border-radius': radius,
+      background: secondaryColor,
+      border,
+    },
   });
 }
diff --git a/demo/raw-regular.html b/demo/raw-regular.html
@@ -34,6 +34,7 @@
 
 <lr-file-uploader-regular
   ctx-name="my-uploader"
+  class="uc-light"
 ></lr-file-uploader-regular>
 <lr-config ctx-name="my-uploader" pubkey="demopublickey"></lr-config>
 <lr-upload-ctx-provider ctx-name="my-uploader"></lr-upload-ctx-provider>