ui.shipaid.com 0.2.13-beta → 0.2.13-beta.3

package/README.md

@@ -39,7 +39,7 @@ Then add the widget element where needed:
 
 #### Test Mode
 
-Sometimes, a store won't have activated their subscription before you install the widget - in this case, the widget does not display (you will notice a message in the console reflecting this). So to force the widget to show while you are installing and testing it, you can add this query param to the page URL: `shipaid-test`. 
+Sometimes, a store won't have activated their subscription before you install the widget - in this case, the widget does not display (you will notice a message in the console reflecting this). So to force the widget to show while you are installing and testing it, you can add this query param to the page URL: `shipaid-test`.
 For example: `https://some-store.myshopify.com/cart?shipaid-text`
 
 ### Slots
@@ -51,9 +51,9 @@ Slots, with the syntax `slot="<slot name>"`, can be used to customise the widget
 </shipaid-widget>
 ```
 
-The default content will be replaced by any slot content. You can also add inline styles to the slots, if you need to change the text color for example:
+The default content will be replaced by any slot content. You can also add inline styles to the slots, if you need to change the font size/weight for example - but color changes should be handled by CSS variables:
 ```html
-<span slot="title" style="color: white; font-weight: 500;">Package Protection</span>
+<span slot="title" style="font-weight: 500;">Package Protection</span>
 ```
 
 | Name | Description |
@@ -102,6 +102,30 @@ if (shipAidEl) await shipAidEl.updateCart()
 | `addProtection` | Adds the relevant protection item to cart. | |
 | `removeProtection` | Removes the protection item from the cart. | |
 
+### Styles
+
+If you need to change any of the widget colors to suit a specific theme, there are various CSS variables you can use to do so. These should be added to the style attribute on the widget element:
+
+```html
+<shipaid-widget
+  style="
+    --shipaid-text: #fff;
+    --shipaid-prompt-actions-price-color: #fff;
+  "
+>
+</shipaid-widget>
+```
+
+| Variable | Description | Default |
+|----------|-------------|---------|
+| `--shipaid-text` | Changes the global text color. | `#000000` |
+| `--shipaid-text-muted` | Changes the global muted text color. | `#aaaaaa` |
+| `--shipaid-prompt-actions-price-color` | Changes the color of the price element. | `var(--shipaid-text-muted)` |
+| `--shipaid-prompt-actions-button-color` | Changes the color of the add/remove button element. | `var(--shipaid-primary)` |
+| `--shipaid-prompt-badge-background-color` | Changes the background color of the learn more button element. | `var(--shipaid-light-grey)` |
+| `--shipaid-prompt-badge-text-color` | Changes the color of the learn more button element. | `var(--shipaid-text)` |
+
+Other variables can be found [here](/widget/src/assets/styles.ts) (`/widget/src/assets/styles.ts`).
 
 ## Contributing
 

package/dist/widget.es.js

@@ -969,7 +969,7 @@ const styles = i$1`
     .prompt-product
     .prompt-product-actions
     .prompt-product-actions-price {
-    color: var(--prompt-actions-price-color, var(--shipaid-text-muted));
+    color: var(--shipaid-prompt-actions-price-color, var(--shipaid-text-muted));
     font-size: var(--shipaid-font-base);
   }
   .shipaid-prompt
@@ -978,7 +978,7 @@ const styles = i$1`
     .prompt-product-actions-button {
     background-color: transparent;
     border: none;
-    color: var(--prompt-actions-button-color, var(--shipaid-primary));
+    color: var(--shipaid-prompt-actions-button-color, var(--shipaid-primary));
     text-transform: uppercase;
     font-weight: var(--shipaid-font-heavy);
     cursor: pointer;
@@ -1002,8 +1002,8 @@ const styles = i$1`
     margin-left: 0.5rem;
   }
   .shipaid-prompt .prompt-footer .prompt-footer-badge {
-    background-color: var(--shipaid-prompt-badge-background, var(--shipaid-light-grey));
-    color: var(--shipaid-prompt-badge-text, var(--shipaid-text));
+    background-color: var(--shipaid-prompt-badge-background--shipaid-text, var(--shipaid-light-grey));
+    color: var(--shipaid-prompt-badge-text--shipaid-text, var(--shipaid-text));
     padding: 0.5rem 1.5rem;
     border-radius: 30px;
     cursor: pointer;

package/dist/widget.iife.js

@@ -329,7 +329,7 @@ function ht(t,e,i){return t?e():null==i?void 0:i()}const ct=h`
     .prompt-product
     .prompt-product-actions
     .prompt-product-actions-price {
-    color: var(--prompt-actions-price-color, var(--shipaid-text-muted));
+    color: var(--shipaid-prompt-actions-price-color, var(--shipaid-text-muted));
     font-size: var(--shipaid-font-base);
   }
   .shipaid-prompt
@@ -338,7 +338,7 @@ function ht(t,e,i){return t?e():null==i?void 0:i()}const ct=h`
     .prompt-product-actions-button {
     background-color: transparent;
     border: none;
-    color: var(--prompt-actions-button-color, var(--shipaid-primary));
+    color: var(--shipaid-prompt-actions-button-color, var(--shipaid-primary));
     text-transform: uppercase;
     font-weight: var(--shipaid-font-heavy);
     cursor: pointer;
@@ -362,8 +362,8 @@ function ht(t,e,i){return t?e():null==i?void 0:i()}const ct=h`
     margin-left: 0.5rem;
   }
   .shipaid-prompt .prompt-footer .prompt-footer-badge {
-    background-color: var(--shipaid-prompt-badge-background, var(--shipaid-light-grey));
-    color: var(--shipaid-prompt-badge-text, var(--shipaid-text));
+    background-color: var(--shipaid-prompt-badge-background--shipaid-text, var(--shipaid-light-grey));
+    color: var(--shipaid-prompt-badge-text--shipaid-text, var(--shipaid-text));
     padding: 0.5rem 1.5rem;
     border-radius: 30px;
     cursor: pointer;

package/dist/widget.umd.js

@@ -329,7 +329,7 @@ function ht(t,e,i){return t?e():null==i?void 0:i()}const ct=h`
     .prompt-product
     .prompt-product-actions
     .prompt-product-actions-price {
-    color: var(--prompt-actions-price-color, var(--shipaid-text-muted));
+    color: var(--shipaid-prompt-actions-price-color, var(--shipaid-text-muted));
     font-size: var(--shipaid-font-base);
   }
   .shipaid-prompt
@@ -338,7 +338,7 @@ function ht(t,e,i){return t?e():null==i?void 0:i()}const ct=h`
     .prompt-product-actions-button {
     background-color: transparent;
     border: none;
-    color: var(--prompt-actions-button-color, var(--shipaid-primary));
+    color: var(--shipaid-prompt-actions-button-color, var(--shipaid-primary));
     text-transform: uppercase;
     font-weight: var(--shipaid-font-heavy);
     cursor: pointer;
@@ -362,8 +362,8 @@ function ht(t,e,i){return t?e():null==i?void 0:i()}const ct=h`
     margin-left: 0.5rem;
   }
   .shipaid-prompt .prompt-footer .prompt-footer-badge {
-    background-color: var(--shipaid-prompt-badge-background, var(--shipaid-light-grey));
-    color: var(--shipaid-prompt-badge-text, var(--shipaid-text));
+    background-color: var(--shipaid-prompt-badge-background--shipaid-text, var(--shipaid-light-grey));
+    color: var(--shipaid-prompt-badge-text--shipaid-text, var(--shipaid-text));
     padding: 0.5rem 1.5rem;
     border-radius: 30px;
     cursor: pointer;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ui.shipaid.com",
   "private": false,
-  "version": "0.2.13-beta",
+  "version": "0.2.13-beta.3",
   "type": "module",
   "main": "dist/widget.umd.js",
   "unpkg": "dist/widget.iife.js",