added lighter default theme for demo impact

Author: Herve Tribouilloy

vite_project/package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "widget-usp",
   "private": true,
-  "version": "0.2.1",
+  "version": "0.2.2",
   "type": "module",
   "scripts": {
     "dev": "vite",

vite_project/package.json

@@ -25,8 +25,11 @@ export interface UspSlide {
 
 export type UspModeValue = "static" | "slider";
 
+export type UspTheme = "light" | "dark" | "promo"
+
 export interface UspSettings {
     mode: UspMode;
+    theme: UspTheme
 }
 
 export interface UspMode {

vite_project/src/components/Types.ts

@@ -10,7 +10,7 @@
 .arrowBtn {
     appearance: none;
     background: var(--re-usp-arrow-bg, rgba(0,0,0,0.05));
-    color: var(--re-usp-arrow-color, #fff);
+    color: var(--re-usp-arrow-color, #2563EB);
     border: none;
     padding: var(--re-usp-arrow-padding, 0.5rem);
     border-radius: var(--re-usp-arrow-radius, 999px);

vite_project/src/styles/usp.arrows.css

@@ -4,8 +4,8 @@
     justify-content: center;
     padding: var(--re-usp-padding, 1rem);
     border-radius: var(--re-usp-radius, 0.5rem);
-    background-color: var(--re-usp-bg, #0F3D5E);
-    color: var(--re-usp-text-color, #F6F2DF);
+    background-color: var(--re-usp-bg, #EAF3FF);
+    color: var(--re-usp-text-color, #0A3D91);
     text-align: center;
 }
 

vite_project/src/styles/usp.slide.css

@@ -2,7 +2,6 @@
     display: grid;
     width: 100%;
     gap: var(--re-usp-gap, 1.25rem);
-    height: var(--re-usp-height, 45px);
 }
 
 .uspStatic--mobile {