add CustomStyles to storybook

Author: jose-web

package-lock.json

@@ -8,6 +8,13 @@ const meta: Meta = {
     argTypes: {
         deleteEvent: { action: 'deleteEvent' },
         editEvent: { action: 'editEvent' },
+
+        colorPrimary: { control: 'color' },
+        colorSecondary: { control: 'color' },
+        colorBackground: { control: 'color' },
+        colorEdit: { control: 'color' },
+        colorDelete: { control: 'color' },
+        colorText: { control: 'color' },
     },
 };
 
@@ -91,4 +98,48 @@ export const LocalData: Story = {
       </sau-table>
     `,
     }),
+};
+
+export const CustomStyles: Story = {
+    args: {
+        // Valores por defecto basados en tu CSS
+        colorPrimary: 'rgb(147, 51, 234)',
+        colorSecondary: 'rgb(147, 51, 234)',
+        colorBackground: 'rgb(255, 255, 255)',
+        colorEdit: 'rgb(34, 197, 94)',
+        colorDelete: 'rgb(239, 68, 68)',
+        colorText: 'rgb(31, 41, 55)',
+        headers: [
+            { name: 'USUARIO', key: 'name' },
+            { name: 'ESTADO', key: 'status', type: 'boolean' },
+        ],
+        fixedContent: [
+            { name: 'Gemini User', status: true },
+            { name: 'Tester', status: false },
+        ]
+    },
+    render: (args) => ({
+        props: args,
+        template: `
+      <style>
+        .custom-container .sau-table {
+            --sau-color-primary: {{colorPrimary}};
+            --sau-color-secondary: {{colorSecondary}};
+            --sau-color-background: {{colorBackground}};
+            --sau-color-edit: {{colorEdit}};
+            --sau-color-delete: {{colorDelete}};
+            --sau-color-text: {{colorText}};
+        }
+      </style>
+
+      <div class="custom-container">
+        <sau-table 
+          [headers]="headers" 
+          [fixedContent]="fixedContent"
+          (deleteEvent)="deleteEvent($event)"
+          (editEvent)="editEvent($event)">
+        </sau-table>
+      </div>
+    `,
+    }),
 };