doctor enhancements, setup, enhancements, ui functionality and design consolidation and , test projects fixes , product advisory attestation/rekor and delta verfications enhancements

src/Web/StellaOps.Web/.storybook/preview.ts

@@ -2,6 +2,20 @@ import type { Preview } from '@storybook/angular';
 import '../src/styles.scss';
 
 export const globalTypes = {
+  theme: {
+    name: 'Theme',
+    description: 'Global theme for components',
+    defaultValue: 'light',
+    toolbar: {
+      icon: 'paintbrush',
+      items: [
+        { value: 'light', title: 'Light', icon: 'sun' },
+        { value: 'dark', title: 'Dark', icon: 'moon' },
+        { value: 'system', title: 'System', icon: 'browser' },
+      ],
+      showName: true,
+    },
+  },
   reduceMotion: {
     name: 'Reduced Motion',
     description: 'Toggle reduced-motion mode for motion tokens',
@@ -40,11 +54,26 @@ const preview: Preview = {
   decorators: [
     (story, context) => {
       const root = document.documentElement;
+
+      // Handle theme switching
+      const theme = context.globals.theme || 'light';
+      if (theme === 'system') {
+        // Follow system preference
+        root.removeAttribute('data-theme');
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        root.style.colorScheme = prefersDark ? 'dark' : 'light';
+      } else {
+        root.setAttribute('data-theme', theme);
+        root.style.colorScheme = theme;
+      }
+
+      // Handle reduced motion
       if (context.globals.reduceMotion) {
         root.dataset.reduceMotion = '1';
       } else {
         root.dataset.reduceMotion = '0';
       }
+
       return story();
     },
   ],