:root,

:host,
.dark-theme .invert-theme {
--ds-gray-100-value: 0, 0%, 95%;
--ds-gray-200-value: 0, 0%, 92%;
--ds-gray-300-value: 0, 0%, 90%;
--ds-gray-400-value: 0, 0%, 92%;
--ds-gray-500-value: 0, 0%, 79%;
--ds-gray-600-value: 0, 0%, 66%;
--ds-gray-700-value: 0, 0%, 56%;
--ds-gray-800-value: 0, 0%, 49%;
--ds-gray-900-value: 0, 0%, 40%;
--ds-gray-1000-value: 0, 0%, 9%;
--ds-blue-100-value: 212, 100%, 97%;
--ds-blue-200-value: 210, 100%, 96%;
--ds-blue-300-value: 210, 100%, 94%;
--ds-blue-400-value: 209, 100%, 90%;
--ds-blue-500-value: 209, 100%, 80%;
--ds-blue-600-value: 208, 100%, 66%;
--ds-blue-700-value: 212, 100%, 48%;
--ds-blue-800-value: 212, 100%, 41%;
--ds-blue-900-value: 211, 100%, 42%;
--ds-blue-1000-value: 211, 100%, 15%;
--ds-red-100-value: 0, 100%, 97%;
--ds-red-200-value: 0, 100%, 96%;
--ds-red-300-value: 0, 100%, 95%;
--ds-red-400-value: 0, 90%, 92%;
--ds-red-500-value: 0, 82%, 85%;
--ds-red-600-value: 359, 90%, 71%;
--ds-red-700-value: 358, 75%, 59%;
--ds-red-800-value: 358, 70%, 52%;
--ds-red-900-value: 358, 66%, 48%;
--ds-red-1000-value: 355, 49%, 15%;
--ds-amber-100-value: 39, 100%, 95%;
--ds-amber-200-value: 44, 100%, 92%;
--ds-amber-300-value: 43, 96%, 90%;
--ds-amber-400-value: 42, 100%, 78%;
--ds-amber-500-value: 38, 100%, 71%;
--ds-amber-600-value: 36, 90%, 62%;
--ds-amber-700-value: 39, 100%, 57%;
--ds-amber-800-value: 35, 100%, 52%;
--ds-amber-900-value: 30, 100%, 32%;
--ds-amber-1000-value: 20, 79%, 17%;
--ds-green-100-value: 120, 60%, 96%;
--ds-green-200-value: 120, 60%, 95%;
--ds-green-300-value: 120, 60%, 91%;
--ds-green-400-value: 122, 60%, 86%;
--ds-green-500-value: 124, 60%, 75%;
--ds-green-600-value: 125, 60%, 64%;
--ds-green-700-value: 131, 41%, 46%;
--ds-green-800-value: 132, 43%, 39%;
--ds-green-900-value: 133, 50%, 32%;
--ds-green-1000-value: 128, 29%, 15%;
--ds-teal-100-value: 169, 70%, 96%;
--ds-teal-200-value: 167, 70%, 94%;
--ds-teal-300-value: 168, 70%, 90%;
--ds-teal-400-value: 170, 70%, 85%;
--ds-teal-500-value: 170, 70%, 72%;
--ds-teal-600-value: 170, 70%, 57%;
--ds-teal-700-value: 173, 80%, 36%;
--ds-teal-800-value: 173, 83%, 30%;
--ds-teal-900-value: 174, 91%, 25%;
--ds-teal-1000-value: 171, 80%, 13%;
--ds-purple-100-value: 276, 100%, 97%;
--ds-purple-200-value: 277, 87%, 97%;
--ds-purple-300-value: 274, 78%, 95%;
--ds-purple-400-value: 276, 71%, 92%;
--ds-purple-500-value: 274, 70%, 82%;
--ds-purple-600-value: 273, 72%, 73%;
--ds-purple-700-value: 272, 51%, 54%;
--ds-purple-800-value: 272, 47%, 45%;
--ds-purple-900-value: 274, 71%, 43%;
--ds-purple-1000-value: 276, 100%, 15%;
--ds-pink-100-value: 330, 100%, 96%;
--ds-pink-200-value: 340, 90%, 96%;
--ds-pink-300-value: 340, 82%, 94%;
--ds-pink-400-value: 341, 76%, 91%;
--ds-pink-500-value: 340, 75%, 84%;
--ds-pink-600-value: 341, 75%, 73%;
--ds-pink-700-value: 336, 80%, 58%;
--ds-pink-800-value: 336, 74%, 51%;
--ds-pink-900-value: 336, 65%, 45%;
--ds-pink-1000-value: 333, 74%, 15%;
--ds-gray-alpha-100: #0000000d;
--ds-gray-alpha-200: #00000015;
--ds-gray-alpha-300: #0000001a;
--ds-gray-alpha-400: #00000014;
--ds-gray-alpha-500: #00000036;
--ds-gray-alpha-600: #00000057;
--ds-gray-alpha-700: #00000070;
--ds-gray-alpha-800: #00000082;
--ds-gray-alpha-900: #0000009c;
--ds-gray-alpha-1000: #000000e8;
--ds-background-100-value: 0, 0%, 100%;
--ds-background-200-value: 0, 0%, 98%;
--ds-contrast-fg: #fff;
--ds-focus-border: 0 0 0 1px var(--ds-gray-alpha-600),
0px 0px 0px 4px #00000029;
--ds-focus-color: var(--ds-blue-700);
--vaul-overlay-background: 255, 255, 255;
--vaul-overlay-background-start: #0000;
--vaul-overlay-background-end: #0006;
}


---

--> aplique em toda codebase

components/footer.js

@@ -4,13 +4,12 @@ class CustomFooter extends HTMLElement {
     this.shadowRoot.innerHTML = `
       <style>
         footer {
-          background-color: #1e293b;
+          background-color: hsl(var(--ds-gray-1000-value));
           color: white;
           padding: 2rem 0;
           margin-top: 3rem;
         }
-        
-        .container {
+.container {
           max-width: 1200px;
           margin: 0 auto;
           padding: 0 1rem;
@@ -23,8 +22,8 @@ class CustomFooter extends HTMLElement {
           font-size: 1.125rem;
           font-weight: 600;
           margin-bottom: 1rem;
-          color: #e2e8f0;
-        }
+          color: hsl(var(--ds-gray-100-value));
+}
         
         .footer-section ul {
           display: flex;
@@ -33,8 +32,8 @@ class CustomFooter extends HTMLElement {
         }
         
         .footer-section a {
-          color: #94a3b8;
-          transition: color 0.2s;
+          color: hsl(var(--ds-gray-500-value));
+transition: color 0.2s;
         }
         
         .footer-section a:hover {
@@ -45,9 +44,9 @@ class CustomFooter extends HTMLElement {
           text-align: center;
           margin-top: 2rem;
           padding-top: 2rem;
-          border-top: 1px solid #334155;
-          color: #94a3b8;
-          font-size: 0.875rem;
+          border-top: 1px solid hsl(var(--ds-gray-800-value));
+          color: hsl(var(--ds-gray-500-value));
+font-size: 0.875rem;
         }
         
         @media (max-width: 640px) {

components/header.js

@@ -4,12 +4,12 @@ class CustomHeader extends HTMLElement {
     this.shadowRoot.innerHTML = `
       <style>
         header {
-          background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);
+          background: linear-gradient(135deg, hsl(var(--ds-blue-700-value)) 0%, hsl(var(--ds-purple-700-value)) 100%);
           color: white;
           padding: 1.5rem 0;
-          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+          box-shadow: 0 4px 6px -1px var(--ds-gray-alpha-300);
         }
-        .container {
+.container {
           max-width: 1200px;
           margin: 0 auto;
           padding: 0 1rem;

style.css

@@ -1,42 +1,41 @@
 
 .border-gradient {
     border: 1px solid transparent;
-    background: linear-gradient(var(--bg-color, white), var(--bg-color, white)) padding-box,
-                linear-gradient(to right, #0ea5e9, #8b5cf6) border-box;
+    background: linear-gradient(var(--bg-color, hsl(var(--ds-background-100-value))), var(--bg-color, hsl(var(--ds-background-100-value)))) padding-box,
+                linear-gradient(to right, hsl(var(--ds-blue-700-value)), hsl(var(--ds-purple-700-value))) border-box;
     border-radius: 0.5rem;
 }
 
 .dark-theme {
-    --bg-color: #1e293b;
-    background-color: #0f172a;
-    color: #e2e8f0;
+    --bg-color: hsl(var(--ds-gray-1000-value));
+    background-color: hsl(var(--ds-gray-900-value));
+    color: hsl(var(--ds-gray-100-value));
 }
 
 .dark-theme .border-gradient {
-    background: linear-gradient(#1e293b, #1e293b) padding-box,
-                linear-gradient(to right, #0ea5e9, #8b5cf6) border-box;
+    background: linear-gradient(hsl(var(--ds-gray-1000-value)), hsl(var(--ds-gray-1000-value))) padding-box,
+                linear-gradient(to right, hsl(var(--ds-blue-700-value)), hsl(var(--ds-purple-700-value))) border-box;
 }
 
 .dark-theme .card-header {
-    background-color: #1e293b;
-    color: #e2e8f0;
+    background-color: hsl(var(--ds-gray-1000-value));
+    color: hsl(var(--ds-gray-100-value));
 }
 
 .dark-theme table {
-    color: #e2e8f0;
+    color: hsl(var(--ds-gray-100-value));
 }
 
 .dark-theme table th {
-    color: #94a3b8;
+    color: hsl(var(--ds-gray-500-value));
 }
 
 .dark-theme table td {
-    border-color: #334155;
+    border-color: hsl(var(--ds-gray-800-value));
 }
 .dark-theme .hover-scale:hover {
-    background-color: #1e293b;
+    background-color: hsl(var(--ds-gray-1000-value));
 }
-
 /* KPI Table Styles */
 .kpi-table {
     width: 100%;
@@ -46,33 +45,32 @@
 .kpi-table th {
     text-align: left;
     padding: 0.75rem;
-    border-bottom: 1px solid #e5e7eb;
+    border-bottom: 1px solid hsl(var(--ds-gray-300-value));
     font-weight: 600;
-    color: #4b5563;
+    color: hsl(var(--ds-gray-700-value));
 }
 
 .kpi-table td {
     padding: 0.75rem;
-    border-bottom: 1px solid #e5e7eb;
+    border-bottom: 1px solid hsl(var(--ds-gray-300-value));
 }
 
 .kpi-table tr:hover {
-    background-color: #f9fafb;
+    background-color: hsl(var(--ds-gray-100-value));
 }
 
 .dark-theme .kpi-table th {
-    color: #9ca3af;
-    border-color: #374151;
+    color: hsl(var(--ds-gray-500-value));
+    border-color: hsl(var(--ds-gray-800-value));
 }
 
 .dark-theme .kpi-table td {
-    border-color: #374151;
+    border-color: hsl(var(--ds-gray-800-value));
 }
 
 .dark-theme .kpi-table tr:hover {
-    background-color: #1f2937;
+    background-color: hsl(var(--ds-gray-1000-value));
 }
-
 /* Badge Styles */
 .badge {
     display: inline-block;
@@ -84,53 +82,53 @@
 }
 
 .badge-blue {
-    background-color: #dbeafe;
-    color: #1e40af;
+    background-color: hsl(var(--ds-blue-100-value));
+    color: hsl(var(--ds-blue-900-value));
 }
 
 .badge-green {
-    background-color: #d1fae5;
-    color: #065f46;
+    background-color: hsl(var(--ds-green-100-value));
+    color: hsl(var(--ds-green-900-value));
 }
 
 .badge-yellow {
-    background-color: #fef3c7;
-    color: #92400e;
+    background-color: hsl(var(--ds-amber-100-value));
+    color: hsl(var(--ds-amber-900-value));
 }
 
 .badge-orange {
-    background-color: #ffedd5;
-    color: #9a3412;
+    background-color: hsl(var(--ds-amber-200-value));
+    color: hsl(var(--ds-amber-900-value));
 }
 
 .badge-red {
-    background-color: #fee2e2;
-    color: #991b1b;
+    background-color: hsl(var(--ds-red-100-value));
+    color: hsl(var(--ds-red-900-value));
 }
 
 .badge-purple {
-    background-color: #f3e8ff;
-    color: #6b21a8;
+    background-color: hsl(var(--ds-purple-100-value));
+    color: hsl(var(--ds-purple-900-value));
 }
 
 .badge-gray {
-    background-color: #f3f4f6;
-    color: #4b5563;
+    background-color: hsl(var(--ds-gray-100-value));
+    color: hsl(var(--ds-gray-700-value));
 }
 
 .badge-emerald {
-    background-color: #d1fae5;
-    color: #047857;
+    background-color: hsl(var(--ds-teal-100-value));
+    color: hsl(var(--ds-teal-900-value));
 }
 
 .badge-amber {
-    background-color: #fef3c7;
-    color: #b45309;
+    background-color: hsl(var(--ds-amber-100-value));
+    color: hsl(var(--ds-amber-900-value));
 }
 
 .badge-rose {
-    background-color: #ffe4e6;
-    color: #be123c;
+    background-color: hsl(var(--ds-pink-100-value));
+    color: hsl(var(--ds-pink-900-value));
 }
 .glass-effect {
     background: rgba(255, 255, 255, 0.7);