update button color and extract colors to global theme

Author: eiman-eltigani-ttd

web-integrations/javascript-sdk/client-side/html/index.html

@@ -117,7 +117,7 @@ <h2>${IDENTITY_NAME} Integration Status</h2>
             <div class="tooltip">
               <span class="tooltip-trigger">?</span>
               <div class="tooltip-content">
-                The ${IDENTITY_NAME} token used for targeted advertising. This token is passed to advertising partners and automatically refreshed by the SDK in the background.
+                This token is passed to the bidstream and used for targeted advertising. It is automatically refreshed by the SDK in the background when expired.
               </div>
             </div>
           </div>
@@ -131,7 +131,7 @@ <h2>${IDENTITY_NAME} Integration Status</h2>
             <div class="tooltip">
               <span class="tooltip-trigger">?</span>
               <div class="tooltip-content">
-                Indicates whether the user needs to generate a new ${IDENTITY_NAME} token. Returns "yes" when no valid identity exists or the current identity has expired.
+                Indicates whether a new ${IDENTITY_NAME} token needs to be generated. Returns "yes" when no valid identity exists or the current identity has expired.
               </div>
             </div>
           </div>
@@ -228,7 +228,7 @@ <h4>What's Happening?</h4>
           <ul>
             <li><strong>Client-Side Token Generation:</strong> The SDK generates tokens directly in the browser using your public credentials</li>
             <li><strong>Auto-Refresh:</strong> Tokens are automatically refreshed in the background to maintain up-to-date identity</li>
-            <li><strong>Local Storage:</strong> Identity is stored in browser storage for persistence across page loads</li>
+            <li><strong>Local Storage:</strong> Identity is stored in localStorage (__uid2_advertising_token or __euid_advertising_token) for persistence across page loads</li>
           </ul>
         </div>
 

web-integrations/javascript-sdk/client-side/html/stylesheets/app.css

@@ -12,6 +12,19 @@
   --sidebar-bg: #FFF7ED;
   --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
   --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  
+  /* Button Colors */
+  --button-navy: rgba(2, 10, 64, 1);
+  --button-navy-hover: rgba(2, 10, 64, 0.9);
+  
+  /* Link Colors */
+  --link-color: #0459fd;
+  --link-hover: #0347cc;
+  
+  /* Tooltip Colors */
+  --tooltip-bg: #1F2937;
+  --tooltip-trigger: #3B82F6;
+  --tooltip-trigger-hover: #2563EB;
 }
 
 * {
@@ -129,15 +142,15 @@ p {
 }
 
 a {
-  color: #0459fd; /* Self-serve portal link color */
+  color: var(--link-color);
   text-decoration: none;
   font-weight: 600;
   border-bottom: 2px solid transparent;
   transition: border-color 0.2s ease;
 }
 
 a:hover {
-  border-bottom-color: #0459fd;
+  border-bottom-color: var(--link-color);
 }
 
 /* State Table */
@@ -223,7 +236,7 @@ a:hover {
 /* Buttons */
 .button {
   padding: 0.875rem 2rem;
-  background: linear-gradient(135deg, var(--primary-orange) 0%, #FF8566 100%);
+  background: var(--button-navy);
   color: white;
   border: none;
   font-size: 0.95rem;
@@ -235,8 +248,9 @@ a:hover {
 }
 
 .button:hover {
+  background: var(--button-navy-hover);
   transform: translateY(-2px);
-  box-shadow: 0 6px 12px rgba(255, 107, 53, 0.3);
+  box-shadow: 0 6px 12px rgba(2, 10, 64, 0.3);
 }
 
 .button:active {
@@ -287,7 +301,7 @@ a:hover {
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  background-color: #3B82F6; 
+  background-color: var(--tooltip-trigger);
   color: white;
   border: none;
   font-size: 0.7rem;
@@ -301,7 +315,7 @@ a:hover {
 }
 
 .tooltip-trigger:hover {
-  background-color: #2563EB;
+  background-color: var(--tooltip-trigger-hover);
   transform: scale(1.05);
 }
 
@@ -312,7 +326,7 @@ a:hover {
   bottom: calc(100% + 8px); /* Position above with gap */
   left: 50%;
   transform: translateX(-50%);
-  background-color: #1F2937; 
+  background-color: var(--tooltip-bg);
   color: white;
   padding: 10px;
   border-radius: 4px;

web-integrations/styles/colors.scss

@@ -0,0 +1,31 @@
+// Brand Colors
+$color-primary-orange: #FF6B35;
+$color-primary-dark: #2D3748;
+$color-accent-teal: #0D9488;
+$color-accent-yellow: #FBBF24;
+
+// Text Colors
+$color-text-dark: #1A202C;
+$color-text-gray: #718096;
+
+// Background Colors
+$color-bg-white: #FFFFFF;
+$color-bg-light: #F7FAFC;
+$color-sidebar-bg: #FFF7ED;
+
+// Border & Shadow Colors
+$color-border: #E2E8F0;
+
+// Button Colors
+$color-button-navy: rgba(2, 10, 64, 1);
+$color-button-navy-hover: rgba(2, 10, 64, 0.9);
+
+// Link Colors
+$color-link: #0459fd;
+$color-link-hover: #0347cc;
+
+// Tooltip Colors
+$color-tooltip-bg: #1F2937;
+$color-tooltip-trigger: #3B82F6;
+$color-tooltip-trigger-hover: #2563EB;
+

web-integrations/styles/themes.css

@@ -0,0 +1,46 @@
+/* 
+ * Centralized UID2 Examples Theme Variables
+ * 
+ * This file defines the color palette and design tokens used across all UID2 example sites.
+ * To use in your site, either:
+ * 1. Link this file in your HTML: <link rel="stylesheet" href="path/to/themes.css">
+ * 2. Copy these :root variables into your site's CSS file
+ */
+
+:root {
+  /* Brand Colors */
+  --primary-orange: #FF6B35;
+  --primary-dark: #2D3748;
+  --accent-teal: #0D9488;
+  --accent-yellow: #FBBF24;
+
+  /* Text Colors */
+  --text-dark: #1A202C;
+  --text-gray: #718096;
+
+  /* Background Colors */
+  --bg-white: #FFFFFF;
+  --bg-light: #F7FAFC;
+  --sidebar-bg: #FFF7ED;
+
+  /* Border Colors */
+  --border-color: #E2E8F0;
+
+  /* Button Colors */
+  --button-navy: rgba(2, 10, 64, 1);
+  --button-navy-hover: rgba(2, 10, 64, 0.9);
+
+  /* Link Colors */
+  --link-color: #0459fd;
+  --link-hover: #0347cc;
+
+  /* Tooltip Colors */
+  --tooltip-bg: #1F2937;
+  --tooltip-trigger: #3B82F6;
+  --tooltip-trigger-hover: #2563EB;
+
+  /* Shadows */
+  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+

web-integrations/styles/themes.scss

@@ -0,0 +1,39 @@
+@use "colors" as *;
+
+:root {
+  /* Brand Colors */
+  --primary-orange: #{$color-primary-orange};
+  --primary-dark: #{$color-primary-dark};
+  --accent-teal: #{$color-accent-teal};
+  --accent-yellow: #{$color-accent-yellow};
+
+  /* Text Colors */
+  --text-dark: #{$color-text-dark};
+  --text-gray: #{$color-text-gray};
+
+  /* Background Colors */
+  --bg-white: #{$color-bg-white};
+  --bg-light: #{$color-bg-light};
+  --sidebar-bg: #{$color-sidebar-bg};
+
+  /* Border Colors */
+  --border-color: #{$color-border};
+
+  /* Button Colors */
+  --button-navy: #{$color-button-navy};
+  --button-navy-hover: #{$color-button-navy-hover};
+
+  /* Link Colors */
+  --link-color: #{$color-link};
+  --link-hover: #{$color-link-hover};
+
+  /* Tooltip Colors */
+  --tooltip-bg: #{$color-tooltip-bg};
+  --tooltip-trigger: #{$color-tooltip-trigger};
+  --tooltip-trigger-hover: #{$color-tooltip-trigger-hover};
+
+  /* Shadows */
+  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+