@mictonode/widget 0.3.16 → 0.3.17

package/tailwind.config.js

@@ -1,34 +1,211 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-    darkMode: ['class'],
-    content: [
-        './index.html',
-        './src/**/*.{vue,js,ts,jsx,tsx}',
-        './lib/**/*.{vue,js,ts,jsx,tsx}',
-    ],
-    theme: {
-        extend: {},
-    },
-    plugins: [require('daisyui')],
-    daisyui: {
-        themes: [
-            {
-                light: {
-                    ...require('daisyui/src/theming/themes')[
-                        '[data-theme=light]'
-                    ],
-                    primary: '#666cff',
-                },
-            },
-            {
-                dark: {
-                    ...require('daisyui/src/theming/themes')[
-                        '[data-theme=dark]'
-                    ],
-                    primary: '#1c1f2e',
-                    'base-100': '#1c1f2e',
-                },
-            },
-        ],
-    },
-};
+/**
+ * Widget Tailwind Configuration
+ * Aligned with MictoNode Explorer Design System (Phase 7)
+ *
+ * Design System: "The Data Cathedral"
+ * - LCH Color Space Integration (future)
+ * - Protected Primary: #0066ff (synced with explorer)
+ * - Protected Dark Base: #0f1419 (synced with explorer)
+ * - 8-Point Grid System
+ * - Glassmorphism Aesthetic
+ */
+/** @type {import('tailwindcss').Config} */
+export default {
+    darkMode: ['class'],
+    content: [
+        './index.html',
+        './src/**/*.{vue,js,ts,jsx,tsx}',
+        './lib/**/*.{vue,js,ts,jsx,tsx}',
+    ],
+    theme: {
+        extend: {
+            colors: {
+                /* Legacy colors for backward compatibility */
+                yes: '#3fb68b',
+                no: '#ff5353',
+                info: '#00b2ff',
+                main: 'var(--text-main)',
+                secondary: 'var(--text-secondary)',
+                active: '#2d75f6',
+
+                /* Design Token Integration (LCH Color Space) */
+                primary: {
+                    50: 'var(--color-primary-50)',
+                    100: 'var(--color-primary-100)',
+                    200: 'var(--color-primary-200)',
+                    300: 'var(--color-primary-300)',
+                    400: 'var(--color-primary-400)',
+                    500: 'var(--color-primary-500)',
+                    600: 'var(--color-primary-600)',
+                    700: 'var(--color-primary-700)',
+                    800: 'var(--color-primary-800)',
+                    900: 'var(--color-primary-900)',
+                    950: 'var(--color-primary-950)',
+                },
+                accent: {
+                    50: 'var(--color-accent-50)',
+                    100: 'var(--color-accent-100)',
+                    200: 'var(--color-accent-200)',
+                    300: 'var(--color-accent-300)',
+                    400: 'var(--color-accent-400)',
+                    500: 'var(--color-accent-500)',
+                    600: 'var(--color-accent-600)',
+                    700: 'var(--color-accent-700)',
+                    800: 'var(--color-accent-800)',
+                    900: 'var(--color-accent-900)',
+                    950: 'var(--color-accent-950)',
+                },
+                neutral: {
+                    50: 'var(--color-neutral-50)',
+                    100: 'var(--color-neutral-100)',
+                    200: 'var(--color-neutral-200)',
+                    300: 'var(--color-neutral-300)',
+                    400: 'var(--color-neutral-400)',
+                    500: 'var(--color-neutral-500)',
+                    600: 'var(--color-neutral-600)',
+                    700: 'var(--color-neutral-700)',
+                    800: 'var(--color-neutral-800)',
+                    900: 'var(--color-neutral-900)',
+                    950: 'var(--color-neutral-950)',
+                },
+                success: 'var(--color-success)',
+                warning: 'var(--color-warning)',
+                error: 'var(--color-error)',
+
+                /* Semantic Aliases (resolve to scale tokens, light/dark auto) */
+                surface: {
+                    DEFAULT: 'var(--color-surface)',
+                    raised: 'var(--color-surface-raised)',
+                    overlay: 'var(--color-surface-overlay)',
+                },
+                'border-s': {
+                    subtle: 'var(--color-border-subtle)',
+                    DEFAULT: 'var(--color-border-default)',
+                },
+            },
+            spacing: {
+                /* Design token spacing integration (8-Point Grid) */
+                '1': 'var(--space-1)',
+                '2': 'var(--space-2)',
+                '3': 'var(--space-3)',
+                '4': 'var(--space-4)',
+                '5': 'var(--space-5)',
+                '6': 'var(--space-6)',
+                '8': 'var(--space-8)',
+                '10': 'var(--space-10)',
+                '12': 'var(--space-12)',
+                '16': 'var(--space-16)',
+                '20': 'var(--space-20)',
+                '24': 'var(--space-24)',
+            },
+            borderRadius: {
+                /* Design token radius integration */
+                'none': 'var(--radius-none)',
+                'sm': 'var(--radius-sm)',
+                'md': 'var(--radius-md)',
+                'lg': 'var(--radius-lg)',
+                'xl': 'var(--radius-xl)',
+                '2xl': 'var(--radius-2xl)',
+                'full': 'var(--radius-full)',
+            },
+            boxShadow: {
+                /* Design token shadow integration (Multi-layer for depth) */
+                'sm': 'var(--shadow-sm)',
+                'md': 'var(--shadow-md)',
+                'lg': 'var(--shadow-lg)',
+                'xl': 'var(--shadow-xl)',
+                '2xl': 'var(--shadow-2xl)',
+                'inner': 'var(--shadow-inner)',
+                'glow-primary': 'var(--shadow-glow-primary)',
+                'glow-accent': 'var(--shadow-glow-accent)',
+            },
+            zIndex: {
+                /* Design token z-index integration */
+                'base': 'var(--z-base)',
+                'above': 'var(--z-above)',
+                'dropdown': 'var(--z-dropdown)',
+                'sticky': 'var(--z-sticky)',
+                'fixed': 'var(--z-fixed)',
+                'modal-backdrop': 'var(--z-modal-backdrop)',
+                'modal': 'var(--z-modal)',
+                'popover': 'var(--z-popover)',
+                'tooltip': 'var(--z-tooltip)',
+            },
+            transitionDuration: {
+                /* Design token duration integration */
+                'fast': 'var(--duration-fast)',
+                'base': 'var(--duration-base)',
+                'slow': 'var(--duration-slow)',
+                'slower': 'var(--duration-slower)',
+            },
+            transitionTimingFunction: {
+                /* Design token easing integration (Physics-based) */
+                'default': 'var(--ease-default)',
+                'in': 'var(--ease-in)',
+                'out': 'var(--ease-out)',
+                'in-out': 'var(--ease-in-out)',
+                'spring': 'var(--ease-spring)',
+            },
+            fontFamily: {
+                /* Design token font integration */
+                'display': 'var(--font-display)',
+                'body': 'var(--font-body)',
+                'mono': 'var(--font-mono)',
+            },
+        },
+    },
+    plugins: [require('daisyui')],
+    daisyui: {
+        themes: [
+            {
+                light: {
+                    ...require('daisyui/src/theming/themes')['[data-theme=light]'],
+                    // PROTECTED: Primary color #0066ff (synced with explorer)
+                    primary: '#0066ff',
+                    'primary-focus': '#0052cc',
+                    'primary-content': '#ffffff',
+                    secondary: '#1e40af',
+                    'secondary-focus': '#1e3a8a',
+                    'secondary-content': '#ffffff',
+                    accent: '#3b82f6',
+                    'accent-focus': '#2563eb',
+                    'accent-content': '#ffffff',
+                    info: '#0066ff',
+                    success: '#3fb68b',
+                    warning: '#f59e0b',
+                    error: '#ff5353',
+                    neutral: '#1e40af',
+                    'neutral-focus': '#1e3a8a',
+                    'neutral-content': '#ffffff',
+                },
+            },
+            {
+                dark: {
+                    ...require('daisyui/src/theming/themes')['[data-theme=dark]'],
+                    // PROTECTED: Primary color #0066ff (synced with explorer)
+                    primary: '#0066ff',
+                    'primary-focus': '#0052cc',
+                    'primary-content': '#ffffff',
+                    secondary: '#1e40af',
+                    'secondary-focus': '#1e3a8a',
+                    'secondary-content': '#ffffff',
+                    accent: '#3b82f6',
+                    'accent-focus': '#2563eb',
+                    'accent-content': '#ffffff',
+                    info: '#0066ff',
+                    success: '#3fb68b',
+                    warning: '#f59e0b',
+                    error: '#ff5353',
+                    neutral: '#1e40af',
+                    'neutral-focus': '#1e3a8a',
+                    'neutral-content': '#ffffff',
+                    // Explorer DS overrides (S4 4.20)
+                    'base-100': '#0f1419',
+                    'base-200': '#1a1f2e',
+                    'base-300': '#232a3a',
+                    'base-content': '#e5e7eb',
+                },
+            },
+        ],
+    },
+};

package/tsconfig.json

@@ -1,25 +1,25 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "preserve",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/tsconfig.node.json

@@ -1,10 +1,10 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["vite.config.ts"]
-}
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -1,62 +1,62 @@
-// @ts-nocheck
-import { resolve } from 'path';
-import { defineConfig } from 'vite';
-import vue from '@vitejs/plugin-vue';
-import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
-import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill';
-import nodePolyfills from 'rollup-plugin-polyfill-node';
-import inject from '@rollup/plugin-inject';
-
-// https://vitejs.dev/config/
-export default defineConfig({
-    plugins: [vue(), cssInjectedByJsPlugin()],
-    resolve: {
-        preserveSymlinks: true,
-        alias: {
-            path: 'path-browserify',
-            stream: 'stream-browserify',
-            crypto: 'crypto-browserify',
-            assert: 'assert-browserify',
-        },
-    },
-    optimizeDeps: {
-        force: true,
-
-        esbuildOptions: {
-            target: ['es2020'],
-            define: {
-                global: 'globalThis',
-            },
-            plugins: [
-                NodeGlobalsPolyfillPlugin({
-                    process: true,
-                    buffer: true,
-                }),
-            ],
-        },
-    },
-    build: {
-        lib: {
-            // Could also be a dictionary or array of multiple entry points
-            entry: resolve(__dirname, 'lib/main.ts'),
-            name: 'ping-widget',
-            // the proper extensions will be added
-            fileName: 'ping-widget',
-        },
-        commonjsOptions: {
-            transformMixedEsModules: true,
-        },
-        rollupOptions: {
-            output: {
-                manualChunks: undefined,
-            },
-            plugins: [
-                nodePolyfills({
-                    process: true,
-                    buffer: true,
-                }),
-                inject({ Buffer: ['buffer', 'Buffer'] }),
-            ],
-        },
-    },
-});
+// @ts-nocheck
+import { resolve } from 'path';
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
+import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill';
+import nodePolyfills from 'rollup-plugin-polyfill-node';
+import inject from '@rollup/plugin-inject';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [vue(), cssInjectedByJsPlugin()],
+    resolve: {
+        preserveSymlinks: true,
+        alias: {
+            path: 'path-browserify',
+            stream: 'stream-browserify',
+            crypto: 'crypto-browserify',
+            assert: 'assert-browserify',
+        },
+    },
+    optimizeDeps: {
+        force: true,
+
+        esbuildOptions: {
+            target: ['es2020'],
+            define: {
+                global: 'globalThis',
+            },
+            plugins: [
+                NodeGlobalsPolyfillPlugin({
+                    process: true,
+                    buffer: true,
+                }),
+            ],
+        },
+    },
+    build: {
+        lib: {
+            // Could also be a dictionary or array of multiple entry points
+            entry: resolve(__dirname, 'lib/main.ts'),
+            name: 'ping-widget',
+            // the proper extensions will be added
+            fileName: 'ping-widget',
+        },
+        commonjsOptions: {
+            transformMixedEsModules: true,
+        },
+        rollupOptions: {
+            output: {
+                manualChunks: undefined,
+            },
+            plugins: [
+                nodePolyfills({
+                    process: true,
+                    buffer: true,
+                }),
+                inject({ Buffer: ['buffer', 'Buffer'] }),
+            ],
+        },
+    },
+});

package/vue-shim.d.ts

@@ -1,6 +1,6 @@
-declare module "*.vue" {
-  import { ComponentOptions } from "vue"
-
-  const comp: ComponentOptions
-  export default comp
-}
+declare module "*.vue" {
+  import { ComponentOptions } from "vue"
+
+  const comp: ComponentOptions
+  export default comp
+}