churrofi-widgets - npm Package Compare versions

Comparing version 0.0.8 to 0.0.9

dist/src/ChurrofiWidgetsLG.d.ts

@@ -6,4 +6,5 @@ import { LitElement } from 'lit';
     name: string;
+    theme?: string;
     private APY;
     render(): import("lit").TemplateResult<1>;
 }

dist/src/ChurrofiWidgetsLG.js

 import { __decorate } from "tslib";
 import { html, css, LitElement } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
@@ -17,7 +18,17 @@ import { until } from 'lit/directives/until.js';
         this.name = '';
+        this.theme = 'white';
         this.APY = fetchTargetAPY();
     }
     render() {
+        const WHITE = `#ffffff`;
+        const LIGHT_GREEN = `#D6F5E5`;
+        const parentStyles = {
+            background: this.theme === 'white'
+                ? WHITE
+                : this.theme === 'green'
+                    ? LIGHT_GREEN
+                    : null,
+        };
         return html `
-      <div id="churrofi-widget-sm">
+      <div id="churrofi-widget-sm" style=${styleMap(parentStyles)}>
         <div class="head">
@@ -106,2 +117,5 @@ <h3>Earn Profits by Investing CELOs</h3>
 __decorate([
+    property()
+], ChurrofiWidgetsLG.prototype, "theme", void 0);
+__decorate([
     state()
@@ -108,0 +122,0 @@ ], ChurrofiWidgetsLG.prototype, "APY", void 0);

dist/src/ChurrofiWidgetsMD.d.ts

@@ -9,2 +9,3 @@ import { LitElement } from 'lit';
     usdAmount: number;
+    theme?: string;
     handleCeloChange(event: Event): void;
@@ -11,0 +12,0 @@ handleUSDChange(event: Event): void;

dist/src/ChurrofiWidgetsMD.js

 import { __decorate } from "tslib";
 import { html, css, LitElement } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
@@ -19,2 +20,3 @@ import { until } from 'lit/directives/until.js';
         this.usdAmount = 3000;
+        this.theme = 'white';
     }
@@ -45,4 +47,16 @@ handleCeloChange(event) {
     render() {
+        const WHITE = `#ffffff`;
+        const GRAY = `#f5f5f5`;
+        const DARK_GRAY = `#A8A8A8`;
+        const LIGHT_GREEN = `#D6F5E5`;
+        const GREEN = `#35D07F`;
+        const parentStyles = {
+            background: this.theme === 'white'
+                ? WHITE
+                : this.theme === 'green'
+                    ? LIGHT_GREEN
+                    : null,
+        };
         return html `
-      <div id="churrofi-widget-sm">
+      <div id="churrofi-widget-sm" style=${styleMap(parentStyles)}>
         <div class="head">
@@ -179,2 +193,5 @@ <h3>Earn Profits by Investing CELOs</h3>
 ], ChurrofiWidgetsMD.prototype, "usdAmount", void 0);
+__decorate([
+    property()
+], ChurrofiWidgetsMD.prototype, "theme", void 0);
 //# sourceMappingURL=ChurrofiWidgetsMD.js.map

dist/src/ChurrofiWidgetsSM.d.ts

@@ -6,4 +6,5 @@ import { LitElement } from 'lit';
     name: string;
+    theme?: string;
     private APY;
     render(): import("lit").TemplateResult<1>;
 }

dist/src/ChurrofiWidgetsSM.js

 import { __decorate } from "tslib";
 import { html, css, LitElement } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
@@ -17,7 +18,17 @@ import { until } from 'lit/directives/until.js';
         this.name = '';
+        this.theme = 'white';
         this.APY = fetchTargetAPY();
     }
     render() {
+        const WHITE = `#ffffff`;
+        const LIGHT_GREEN = `#D6F5E5`;
+        const parentStyles = {
+            background: this.theme === 'white'
+                ? WHITE
+                : this.theme === 'green'
+                    ? LIGHT_GREEN
+                    : null,
+        };
         return html `
-      <div id="churrofi-widget-sm">
+      <div id="churrofi-widget-sm" style=${styleMap(parentStyles)}>
         <div class="head">
@@ -103,2 +114,5 @@ <h3>Earn Profits by Investing CELOs</h3>
 __decorate([
+    property()
+], ChurrofiWidgetsSM.prototype, "theme", void 0);
+__decorate([
     state()
@@ -105,0 +119,0 @@ ], ChurrofiWidgetsSM.prototype, "APY", void 0);

dist/src/ChurrofiWidgetsXL.d.ts

 import { LitElement } from 'lit';
 export declare class ChurrofiWidgetsXL extends LitElement {
-    static styles: import("lit").CSSResultGroup;
+    static get styles(): import("lit").CSSResultGroup;
     private APY;
     address: string;
     name?: string;
+    theme?: string;
     celoAmount: number;
@@ -8,0 +9,0 @@ usdAmount: number;

dist/src/ChurrofiWidgetsXL.js

@@ -5,2 +5,3 @@ import { __decorate } from "tslib";
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import { styleMap } from 'lit/directives/style-map.js';
 import { until } from 'lit/directives/until.js';
@@ -18,5 +19,121 @@ import { LogoXS } from './Logo';
         this.address = '';
+        this.theme = 'white';
         this.celoAmount = 1000;
         this.usdAmount = 3000;
     }
+    static get styles() {
+        return css `
+      * {
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        font-family: 'Jost', sans-serif;
+      }
+
+      #churrofi-widget-xl {
+        display: inline-block;
+        width: auto;
+        color: #505050;
+        border: 2px solid #85e2b2;
+        border-radius: 6px;
+        padding: 30px 40px;
+        box-shadow: 0 2px 4px 0 rgba(30, 30, 30, 0.1);
+      }
+
+      .head {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      h3 {
+        font-size: 20px;
+        margin: 0;
+        font-weight: 500;
+      }
+
+      #logo {
+        margin-left: 84px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      #sub {
+        font-size: 16px;
+        margin: 0;
+        margin-top: 10px;
+      }
+      a {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-decoration: none;
+        color: white;
+        background: #35d07f;
+        margin-top: 20px;
+        padding: 10px 0;
+        border-radius: 6px;
+        font-size: 16px;
+        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
+      }
+
+      #investment-calc {
+        margin-top: 30px;
+        display: flex;
+      }
+
+      input::-webkit-outer-spin-button,
+      input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+
+      #input-div {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        margin-right: 20px;
+      }
+
+      #input-div > input {
+        margin-top: 10px;
+        font-size: 18px;
+        border-radius: 6px;
+        padding: 10px 20px;
+        color: #505050;
+      }
+
+      input:focus {
+        outline: none;
+      }
+
+      .label {
+        font-size: 14px;
+      }
+      p {
+        margin: 0;
+      }
+
+      #earning {
+        display: flex;
+        justify-content: space-between;
+        flex-direction: column;
+      }
+
+      .earning > p {
+        margin: 0;
+      }
+
+      #earning-value {
+        font-size: 20px;
+        font-weight: 500;
+        color: #2aa665;
+        margin-bottom: 10px;
+      }
+
+      #earning-value > span {
+        font-size: 12px;
+      }
+    `;
+    }
     handleCeloChange(event) {
@@ -43,4 +160,28 @@ const inp = event.target;
     render() {
+        const WHITE = `#ffffff`;
+        const GRAY = `#f5f5f5`;
+        const DARK_GRAY = `#A8A8A8`;
+        const LIGHT_GREEN = `#D6F5E5`;
+        const GREEN = `#35D07F`;
+        const parentStyles = {
+            background: this.theme === 'white'
+                ? WHITE
+                : this.theme === 'green'
+                    ? LIGHT_GREEN
+                    : null,
+        };
+        const inputStyle = {
+            background: this.theme === 'white'
+                ? GRAY
+                : this.theme === 'green'
+                    ? LIGHT_GREEN
+                    : null,
+            border: `2px solid ${this.theme === 'white'
+                ? DARK_GRAY
+                : this.theme === 'green'
+                    ? GREEN
+                    : null}`,
+        };
         return html `
-      <div id="churrofi-widget-sm">
+      <div id="churrofi-widget-xl" style=${styleMap(parentStyles)}>
         <div class="head">
@@ -61,2 +202,3 @@ <h3>Earn Profits by Investing CELOs</h3>
               @input=${this.handleCeloChange}
+              style=${styleMap(inputStyle)}
             />
@@ -84,117 +226,2 @@ </div>
 }
-ChurrofiWidgetsXL.styles = css `
-    * {
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-      font-family: 'Jost', sans-serif;
-    }
-
-    #churrofi-widget-sm {
-      display: inline-block;
-      width: auto;
-      color: #505050;
-      border: 2px solid #85e2b2;
-      border-radius: 6px;
-      padding: 30px 40px;
-      box-shadow: 0 2px 4px 0 rgba(30, 30, 30, 0.1);
-    }
-
-    .head {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-
-    h3 {
-      font-size: 20px;
-      margin: 0;
-      font-weight: 500;
-    }
-
-    #logo {
-      margin-left: 84px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    #sub {
-      font-size: 16px;
-      margin: 0;
-      margin-top: 10px;
-    }
-    a {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      text-decoration: none;
-      color: white;
-      background: #35d07f;
-      margin-top: 20px;
-      padding: 10px 0;
-      border-radius: 6px;
-      font-size: 16px;
-      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
-    }
-
-    #investment-calc {
-      margin-top: 30px;
-      display: flex;
-    }
-
-    input::-webkit-outer-spin-button,
-    input::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
-    }
-
-    #input-div {
-      display: flex;
-      flex-direction: column;
-      flex-grow: 1;
-      margin-right: 20px;
-    }
-
-    #input-div > input {
-      margin-top: 10px;
-      font-size: 18px;
-      background: #f5f5f5;
-      border: 2px solid #a8a8a8;
-      border-radius: 6px;
-      padding: 10px 20px;
-      color: #505050;
-    }
-
-    input:focus {
-      outline: none;
-    }
-
-    .label {
-      font-size: 14px;
-    }
-    p {
-      margin: 0;
-    }
-
-    #earning {
-      display: flex;
-      justify-content: space-between;
-      flex-direction: column;
-    }
-
-    .earning > p {
-      margin: 0;
-    }
-
-    #earning-value {
-      font-size: 20px;
-      font-weight: 500;
-      color: #2aa665;
-      margin-bottom: 10px;
-    }
-
-    #earning-value > span {
-      font-size: 12px;
-    }
-  `;
 __decorate([
@@ -211,2 +238,5 @@ state()
     property()
+], ChurrofiWidgetsXL.prototype, "theme", void 0);
+__decorate([
+    property()
 ], ChurrofiWidgetsXL.prototype, "celoAmount", void 0);
@@ -213,0 +243,0 @@ __decorate([

dist/src/ChurrofiWidgetsXS.d.ts

@@ -6,4 +6,5 @@ import { LitElement } from 'lit';
     name: string;
+    theme?: string;
     private APY;
     render(): import("lit").TemplateResult<1>;
 }

dist/src/ChurrofiWidgetsXS.js

 import { __decorate } from "tslib";
 import { html, css, LitElement } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
@@ -17,5 +18,15 @@ import { until } from 'lit/directives/until.js';
         this.name = '';
+        this.theme = 'white';
         this.APY = fetchTargetAPY();
     }
     render() {
+        const WHITE = `#ffffff`;
+        const LIGHT_GREEN = `#D6F5E5`;
+        const parentStyles = {
+            background: this.theme === 'white'
+                ? WHITE
+                : this.theme === 'green'
+                    ? LIGHT_GREEN
+                    : null,
+        };
         return html `
@@ -26,2 +37,3 @@ <a
         target="_blank"
+        style=${styleMap(parentStyles)}
         ><div id="logo">${unsafeSVG(LogoSM)}</div>
@@ -81,4 +93,7 @@ <div>
 __decorate([
+    property()
+], ChurrofiWidgetsXS.prototype, "theme", void 0);
+__decorate([
     state()
 ], ChurrofiWidgetsXS.prototype, "APY", void 0);
 //# sourceMappingURL=ChurrofiWidgetsXS.js.map

package.json

 {
   "name": "churrofi-widgets",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "Webcomponent churrofi-widgets following open-wc recommendations",
@@ -5,0 +5,0 @@ "author": "churrofi-widgets",

src/ChurrofiWidgetsLG.ts

 import { html, css, LitElement } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
 
@@ -77,2 +78,3 @@ import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
   @property({ type: String }) name = '';
+  @property() theme?: string = 'white';
 
@@ -83,4 +85,16 @@ @state()
   render() {
+    const WHITE = `#ffffff`;
+
+    const LIGHT_GREEN = `#D6F5E5`;
+
+    const parentStyles = {
+      background:
+        this.theme === 'white'
+          ? WHITE
+          : this.theme === 'green'
+          ? LIGHT_GREEN
+          : null,
+    };
     return html`
-      <div id="churrofi-widget-sm">
+      <div id="churrofi-widget-sm" style=${styleMap(parentStyles)}>
         <div class="head">
@@ -87,0 +101,0 @@ <h3>Earn Profits by Investing CELOs</h3>

src/ChurrofiWidgetsMD.ts

 import { html, css, LitElement } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
@@ -105,2 +106,3 @@ import { until } from 'lit/directives/until.js';
   @property() usdAmount = 3000;
+  @property() theme?: string = 'white';
 
@@ -132,4 +134,19 @@ handleCeloChange(event: Event) {
   render() {
+    const WHITE = `#ffffff`;
+    const GRAY = `#f5f5f5`;
+    const DARK_GRAY = `#A8A8A8`;
+    const LIGHT_GREEN = `#D6F5E5`;
+    const GREEN = `#35D07F`;
+
+    const parentStyles = {
+      background:
+        this.theme === 'white'
+          ? WHITE
+          : this.theme === 'green'
+          ? LIGHT_GREEN
+          : null,
+    };
+
     return html`
-      <div id="churrofi-widget-sm">
+      <div id="churrofi-widget-sm" style=${styleMap(parentStyles)}>
         <div class="head">
@@ -136,0 +153,0 @@ <h3>Earn Profits by Investing CELOs</h3>

src/ChurrofiWidgetsSM.ts

 import { html, css, LitElement } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
@@ -72,2 +73,3 @@ import { until } from 'lit/directives/until.js';
   @property({ type: String }) name = '';
+  @property() theme?: string = 'white';
 
@@ -78,4 +80,16 @@ @state()
   render() {
+    const WHITE = `#ffffff`;
+
+    const LIGHT_GREEN = `#D6F5E5`;
+
+    const parentStyles = {
+      background:
+        this.theme === 'white'
+          ? WHITE
+          : this.theme === 'green'
+          ? LIGHT_GREEN
+          : null,
+    };
     return html`
-      <div id="churrofi-widget-sm">
+      <div id="churrofi-widget-sm" style=${styleMap(parentStyles)}>
         <div class="head">
@@ -82,0 +96,0 @@ <h3>Earn Profits by Investing CELOs</h3>

src/ChurrofiWidgetsXL.ts

 import { html, css, LitElement } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import { styleMap } from 'lit/directives/style-map.js';
+
 import { until } from 'lit/directives/until.js';
@@ -17,117 +19,117 @@ import { LogoXS } from './Logo';
 export class ChurrofiWidgetsXL extends LitElement {
-  static styles = css`
-    * {
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-      font-family: 'Jost', sans-serif;
-    }
+  static get styles() {
+    return css`
+      * {
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        font-family: 'Jost', sans-serif;
+      }
 
-    #churrofi-widget-sm {
-      display: inline-block;
-      width: auto;
-      color: #505050;
-      border: 2px solid #85e2b2;
-      border-radius: 6px;
-      padding: 30px 40px;
-      box-shadow: 0 2px 4px 0 rgba(30, 30, 30, 0.1);
-    }
+      #churrofi-widget-xl {
+        display: inline-block;
+        width: auto;
+        color: #505050;
+        border: 2px solid #85e2b2;
+        border-radius: 6px;
+        padding: 30px 40px;
+        box-shadow: 0 2px 4px 0 rgba(30, 30, 30, 0.1);
+      }
 
-    .head {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
+      .head {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
 
-    h3 {
-      font-size: 20px;
-      margin: 0;
-      font-weight: 500;
-    }
+      h3 {
+        font-size: 20px;
+        margin: 0;
+        font-weight: 500;
+      }
 
-    #logo {
-      margin-left: 84px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
+      #logo {
+        margin-left: 84px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
 
-    #sub {
-      font-size: 16px;
-      margin: 0;
-      margin-top: 10px;
-    }
-    a {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      text-decoration: none;
-      color: white;
-      background: #35d07f;
-      margin-top: 20px;
-      padding: 10px 0;
-      border-radius: 6px;
-      font-size: 16px;
-      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
-    }
+      #sub {
+        font-size: 16px;
+        margin: 0;
+        margin-top: 10px;
+      }
+      a {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-decoration: none;
+        color: white;
+        background: #35d07f;
+        margin-top: 20px;
+        padding: 10px 0;
+        border-radius: 6px;
+        font-size: 16px;
+        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
+      }
 
-    #investment-calc {
-      margin-top: 30px;
-      display: flex;
-    }
+      #investment-calc {
+        margin-top: 30px;
+        display: flex;
+      }
 
-    input::-webkit-outer-spin-button,
-    input::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
-    }
+      input::-webkit-outer-spin-button,
+      input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
 
-    #input-div {
-      display: flex;
-      flex-direction: column;
-      flex-grow: 1;
-      margin-right: 20px;
-    }
+      #input-div {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        margin-right: 20px;
+      }
 
-    #input-div > input {
-      margin-top: 10px;
-      font-size: 18px;
-      background: #f5f5f5;
-      border: 2px solid #a8a8a8;
-      border-radius: 6px;
-      padding: 10px 20px;
-      color: #505050;
-    }
+      #input-div > input {
+        margin-top: 10px;
+        font-size: 18px;
+        border-radius: 6px;
+        padding: 10px 20px;
+        color: #505050;
+      }
 
-    input:focus {
-      outline: none;
-    }
+      input:focus {
+        outline: none;
+      }
 
-    .label {
-      font-size: 14px;
-    }
-    p {
-      margin: 0;
-    }
+      .label {
+        font-size: 14px;
+      }
+      p {
+        margin: 0;
+      }
 
-    #earning {
-      display: flex;
-      justify-content: space-between;
-      flex-direction: column;
-    }
+      #earning {
+        display: flex;
+        justify-content: space-between;
+        flex-direction: column;
+      }
 
-    .earning > p {
-      margin: 0;
-    }
+      .earning > p {
+        margin: 0;
+      }
 
-    #earning-value {
-      font-size: 20px;
-      font-weight: 500;
-      color: #2aa665;
-      margin-bottom: 10px;
-    }
+      #earning-value {
+        font-size: 20px;
+        font-weight: 500;
+        color: #2aa665;
+        margin-bottom: 10px;
+      }
 
-    #earning-value > span {
-      font-size: 12px;
-    }
-  `;
+      #earning-value > span {
+        font-size: 12px;
+      }
+    `;
+  }
 
@@ -139,2 +141,3 @@ @state()
   @property() name?: string;
+  @property() theme?: string = 'white';
   @property() celoAmount = 1000;
@@ -164,4 +167,35 @@ @property() usdAmount = 3000;
   render() {
+    const WHITE = `#ffffff`;
+    const GRAY = `#f5f5f5`;
+    const DARK_GRAY = `#A8A8A8`;
+    const LIGHT_GREEN = `#D6F5E5`;
+    const GREEN = `#35D07F`;
+
+    const parentStyles = {
+      background:
+        this.theme === 'white'
+          ? WHITE
+          : this.theme === 'green'
+          ? LIGHT_GREEN
+          : null,
+    };
+
+    const inputStyle = {
+      background:
+        this.theme === 'white'
+          ? GRAY
+          : this.theme === 'green'
+          ? LIGHT_GREEN
+          : null,
+      border: `2px solid ${
+        this.theme === 'white'
+          ? DARK_GRAY
+          : this.theme === 'green'
+          ? GREEN
+          : null
+      }`,
+    };
+
     return html`
-      <div id="churrofi-widget-sm">
+      <div id="churrofi-widget-xl" style=${styleMap(parentStyles)}>
         <div class="head">
@@ -182,2 +216,3 @@ <h3>Earn Profits by Investing CELOs</h3>
               @input=${this.handleCeloChange}
+              style=${styleMap(inputStyle)}
             />
@@ -184,0 +219,0 @@ </div>

src/ChurrofiWidgetsXS.ts

 import { html, css, LitElement } from 'lit';
 import { property, state } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
@@ -50,2 +51,3 @@ import { until } from 'lit/directives/until.js';
   @property({ type: String }) name = '';
+  @property() theme?: string = 'white';
 
@@ -56,2 +58,14 @@ @state()
   render() {
+    const WHITE = `#ffffff`;
+
+    const LIGHT_GREEN = `#D6F5E5`;
+
+    const parentStyles = {
+      background:
+        this.theme === 'white'
+          ? WHITE
+          : this.theme === 'green'
+          ? LIGHT_GREEN
+          : null,
+    };
     return html`
@@ -62,2 +76,3 @@ <a
         target="_blank"
+        style=${styleMap(parentStyles)}
         ><div id="logo">${unsafeSVG(LogoSM)}</div>
@@ -64,0 +79,0 @@ <div>

No alert changes

Improved metrics

Total package byte prevSize

312420

increased by3.8%

Lines of code

1853

increased by10.63%

No dependency changes