@fylib/theme 0.1.0

package/dist/engine.js

@@ -0,0 +1,291 @@
+import { logger } from '@fylib/logger';
+import { defaultTheme } from './default-theme';
+import { fineyPuffy1Theme } from './finey-puffy-1-theme';
+import { fineyWorkbench1Theme } from './finey-workbench-1-theme';
+import { fineyWorkbench2Theme } from './finey-workbench-2-theme';
+import { fineyWorkbench3Theme } from './finey-workbench-3-theme';
+import { christmasTheme } from './christmas-theme';
+import { windows7Theme } from './win7-theme';
+import { windowsXpTheme } from './xp-theme';
+import { fineyNexus1Theme } from './finey-nexus-1-theme';
+import { fineyHub1Theme } from './finey-hub-1-theme';
+export class ThemeEngine {
+    constructor() {
+        this.themes = new Map();
+        this.plugins = [];
+        this.currentTheme = null;
+        this.currentMode = 'light';
+        this.registerTheme(defaultTheme);
+        this.registerTheme(fineyPuffy1Theme);
+        this.registerTheme(fineyWorkbench1Theme);
+        this.registerTheme(fineyWorkbench2Theme);
+        this.registerTheme(fineyWorkbench3Theme);
+        this.registerTheme(christmasTheme);
+        this.registerTheme(windows7Theme);
+        this.registerTheme(windowsXpTheme);
+        this.registerTheme(fineyNexus1Theme);
+        this.registerTheme(fineyHub1Theme);
+    }
+    registerTheme(theme) {
+        if (this.themes.has(theme.name))
+            return;
+        this.themes.set(theme.name, theme);
+        logger.debug('Theme', `Theme registered: ${theme.name}`);
+    }
+    registerPlugin(plugin) {
+        if (this.plugins.some(p => p.name === plugin.name))
+            return;
+        this.plugins.push(plugin);
+        logger.debug('Theme', `Plugin registered: ${plugin.name}`);
+    }
+    setTheme(name) {
+        if (this.currentTheme === name)
+            return;
+        if (!this.themes.has(name)) {
+            logger.error('Theme', `Theme ${name} not found`);
+            throw new Error(`Theme ${name} not found`);
+        }
+        this.currentTheme = name;
+        logger.info('Theme', `Theme changed to: ${name}`);
+    }
+    setMode(mode) {
+        if (this.currentMode === mode)
+            return;
+        this.currentMode = mode;
+        logger.info('Theme', `Theme mode changed to: ${mode}`);
+    }
+    getMode() {
+        return this.currentMode;
+    }
+    getBackgroundEffect() {
+        if (!this.currentTheme)
+            return undefined;
+        const theme = this.themes.get(this.currentTheme);
+        return theme?.backgroundEffect;
+    }
+    getWallpaper() {
+        if (!this.currentTheme)
+            return undefined;
+        const theme = this.themes.get(this.currentTheme);
+        return theme?.wallpaper;
+    }
+    getComponentAnimation(componentSelector, event) {
+        if (!this.currentTheme) {
+            return undefined;
+        }
+        const theme = this.themes.get(this.currentTheme);
+        if (!theme || !theme.componentAnimations) {
+            return undefined;
+        }
+        const componentMap = theme.componentAnimations[componentSelector];
+        if (!componentMap) {
+            return undefined;
+        }
+        return componentMap[event];
+    }
+    getTokens() {
+        if (!this.currentTheme) {
+            throw new Error('No theme set');
+        }
+        const theme = this.themes.get(this.currentTheme);
+        // Start with defaultTheme tokens to ensure all variables are accounted for
+        let tokens = this.deepMerge({}, defaultTheme.tokens);
+        // Layer the current theme's tokens
+        tokens = this.deepMerge(tokens, theme.tokens);
+        // Apply dark mode overrides if needed
+        if (this.currentMode === 'dark' && theme.darkTokens) {
+            tokens = this.deepMerge(tokens, theme.darkTokens);
+        }
+        // Apply global variables and scrollbar styles
+        if (typeof document !== 'undefined') {
+            this.applyGlobalTokens(tokens);
+            if (tokens.scrollbar) {
+                this.applyScrollbarStyles(tokens.scrollbar);
+            }
+        }
+        // Apply plugins
+        for (const plugin of this.plugins) {
+            tokens = plugin.apply(tokens);
+        }
+        return tokens;
+    }
+    applyGlobalTokens(tokens) {
+        const root = document.documentElement;
+        this.injectTokensAsVars(root, tokens);
+    }
+    injectTokensAsVars(element, tokens, prefix = '--fy-') {
+        Object.keys(tokens).forEach(key => {
+            const value = tokens[key];
+            if (value == null)
+                return;
+            if (typeof value === 'object' && !Array.isArray(value)) {
+                this.injectTokensAsVars(element, value, `${prefix}${key}-`);
+            }
+            else {
+                element.style.setProperty(`${prefix}${key}`, String(value));
+            }
+        });
+    }
+    deepMerge(target, source) {
+        const output = { ...target };
+        if (this.isObject(target) && this.isObject(source)) {
+            Object.keys(source).forEach(key => {
+                if (this.isObject(source[key])) {
+                    if (!(key in target)) {
+                        Object.assign(output, { [key]: source[key] });
+                    }
+                    else {
+                        output[key] = this.deepMerge(target[key], source[key]);
+                    }
+                }
+                else {
+                    Object.assign(output, { [key]: source[key] });
+                }
+            });
+        }
+        return output;
+    }
+    isObject(item) {
+        return (item && typeof item === 'object' && !Array.isArray(item));
+    }
+    applyScrollbarStyles(s) {
+        const id = 'fy-scrollbar-styles';
+        let style = document.getElementById(id);
+        if (!style) {
+            style = document.createElement('style');
+            style.id = id;
+            document.head.appendChild(style);
+        }
+        const width = s.width || '10px';
+        // Build Track Background
+        const trackBase = s.trackBackground || 'transparent';
+        const trackFull = s.trackImage
+            ? `url(${s.trackImage}) repeat, ${trackBase}`
+            : trackBase;
+        // Build Thumb Background
+        const thumbBase = s.thumbBackground || '#888';
+        const thumbFull = s.thumbGripImage
+            ? `url(${s.thumbGripImage}) center no-repeat, ${thumbBase}`
+            : thumbBase;
+        const thumbHoverBase = s.thumbHoverBackground || '#555';
+        const thumbHoverFull = s.thumbHoverBackground || '#555';
+        // Horizontal Thumb (using a rotated gradient if it's a linear-gradient)
+        let hThumbFull = thumbFull;
+        let hThumbHoverFull = thumbHoverFull;
+        const hGrip = s.thumbGripImageHorizontal || s.thumbGripImage;
+        if (thumbBase.includes('to right')) {
+            const hBase = thumbBase.replace('to right', 'to bottom');
+            const hHoverBase = thumbHoverBase.replace('to right', 'to bottom');
+            hThumbFull = hGrip ? `url(${hGrip}) center no-repeat, ${hBase}` : hBase;
+            hThumbHoverFull = hGrip ? `url(${hGrip}) center no-repeat, ${hHoverBase}` : hHoverBase;
+        }
+        else if (hGrip) {
+            hThumbFull = `url(${hGrip}) center no-repeat, ${thumbBase}`;
+            hThumbHoverFull = `url(${hGrip}) center no-repeat, ${thumbHoverFull}`;
+        }
+        const radius = s.thumbBorderRadius || '10px';
+        const bWidth = s.thumbBorderWidth || '0px';
+        const bColor = s.thumbBorderColor || 'transparent';
+        const shadow = s.thumbBoxShadow || 'none';
+        // Extract solid color fallback from thumbBase if it's a gradient
+        const thumbFallback = thumbBase.includes('gradient') ? '#2b56a3' : thumbBase;
+        const hThumbFallback = hThumbFull.includes('gradient') ? '#2b56a3' : thumbFallback;
+        let styleContent = `
+      ::-webkit-scrollbar { 
+        width: ${width} !important; 
+        height: ${width} !important; 
+        display: block !important;
+      }
+      ::-webkit-scrollbar-track { 
+        background: ${trackFull} !important; 
+      }
+      ::-webkit-scrollbar-thumb { 
+        background: ${thumbFull} !important; 
+        background-color: ${thumbFallback} !important;
+        border-radius: ${radius} !important; 
+        border: ${bWidth} solid ${bColor} !important;
+        box-shadow: ${shadow} !important;
+        min-height: 20px !important;
+      }
+      ::-webkit-scrollbar-thumb:vertical { 
+        background: ${thumbFull} !important; 
+        background-color: ${thumbFallback} !important;
+      }
+      ::-webkit-scrollbar-thumb:horizontal { 
+        background: ${hThumbFull} !important; 
+        background-color: ${hThumbFallback} !important;
+      }
+      ::-webkit-scrollbar-thumb:hover { 
+        background: ${thumbHoverFull} !important; 
+      }
+      ::-webkit-scrollbar-thumb:vertical:hover { 
+        background: ${thumbHoverFull} !important; 
+      }
+      ::-webkit-scrollbar-thumb:horizontal:hover { 
+        background: ${hThumbHoverFull} !important; 
+      }
+    `;
+        if (s.buttonsVisible) {
+            const bBg = s.buttonBackground || thumbBase;
+            const bHoverBg = s.buttonHoverBackground || bBg;
+            const bActiveBg = s.buttonActiveBackground || bHoverBg;
+            const bRad = s.buttonBorderRadius || radius;
+            const upImg = s.buttonUpImage ? `url(${s.buttonUpImage})` : `url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18 15 12 9 6 15'%3E%3C/polyline%3E%3C/svg%3E")`;
+            const upHoverImg = s.buttonUpHoverImage ? `url(${s.buttonUpHoverImage})` : upImg;
+            const upActiveImg = s.buttonUpActiveImage ? `url(${s.buttonUpActiveImage})` : upHoverImg;
+            const downImg = s.buttonDownImage ? `url(${s.buttonDownImage})` : `url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E")`;
+            const downHoverImg = s.buttonDownHoverImage ? `url(${s.buttonDownHoverImage})` : downImg;
+            const downActiveImg = s.buttonDownActiveImage ? `url(${s.buttonDownActiveImage})` : downHoverImg;
+            styleContent += `
+        ::-webkit-scrollbar-button:single-button {
+          background: ${bBg} !important;
+          display: block !important;
+          border-radius: ${bRad} !important;
+          border: ${bWidth} solid ${bColor} !important;
+          background-position: center !important;
+          background-repeat: no-repeat !important;
+          box-shadow: ${shadow} !important;
+        }
+        ::-webkit-scrollbar-button:single-button:hover {
+          background: ${bHoverBg} !important;
+        }
+        ::-webkit-scrollbar-button:single-button:active {
+          background: ${bActiveBg} !important;
+        }
+        ::-webkit-scrollbar-button:single-button:vertical:decrement {
+          background-image: ${upImg} !important;
+        }
+        ::-webkit-scrollbar-button:single-button:vertical:decrement:hover {
+          background-image: ${upHoverImg} !important;
+        }
+        ::-webkit-scrollbar-button:single-button:vertical:decrement:active {
+          background-image: ${upActiveImg} !important;
+        }
+        ::-webkit-scrollbar-button:single-button:vertical:increment {
+          background-image: ${downImg} !important;
+        }
+        ::-webkit-scrollbar-button:single-button:vertical:increment:hover {
+          background-image: ${downHoverImg} !important;
+        }
+        ::-webkit-scrollbar-button:single-button:vertical:increment:active {
+          background-image: ${downActiveImg} !important;
+        }
+      `;
+        }
+        style.innerHTML = styleContent;
+    }
+}
+export const themeEngine = new ThemeEngine();
+export class ConfigOverridePlugin {
+    constructor() {
+        this.name = 'ConfigOverride';
+    }
+    apply(tokens) {
+        const config = globalThis.configManager?.getConfig();
+        const overrides = config?.theme?.tokenOverrides;
+        if (!overrides) {
+            return tokens;
+        }
+        return themeEngine.deepMerge(tokens, overrides);
+    }
+}

package/dist/finey-hub-1-theme.d.ts

@@ -0,0 +1,2 @@
+import { ThemeDefinition } from '@fylib/core';
+export declare const fineyHub1Theme: ThemeDefinition;

package/dist/finey-hub-1-theme.js

@@ -0,0 +1,352 @@
+export const fineyHub1Theme = {
+    name: 'finey-hub-1',
+    backgroundEffect: {
+        name: 'dots',
+        intensity: 30,
+        speed: 0.5,
+        loop: true
+    },
+    wallpaper: {
+        name: 'dots',
+        type: 'pattern',
+        opacity: 0.05
+    },
+    tokens: {
+        colors: {
+            primary: '#0969da', // GitHub Blue
+            secondary: '#656d76',
+            success: '#1a7f37',
+            danger: '#d1242f',
+            warning: '#9a6700',
+            info: '#0969da',
+            white: '#ffffff',
+            black: '#1f2328',
+            background: '#ffffff',
+            text: '#1f2328',
+            'primary-rgb': '9,105,218',
+            surface: '#f6f8fa',
+            border: '#d0d7de'
+        },
+        spacing: {
+            xs: '4px',
+            sm: '8px',
+            md: '16px',
+            lg: '24px',
+            xl: '32px',
+        },
+        borderRadius: {
+            sm: '6px',
+            md: '6px',
+            lg: '12px',
+            full: '9999px',
+        },
+        typography: {
+            fontFamily: {
+                base: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
+                heading: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"',
+                mono: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace'
+            },
+            fontSize: {
+                sm: '12px',
+                md: '14px',
+                lg: '16px',
+            },
+            fontWeight: {
+                normal: '400',
+                bold: '600',
+            }
+        },
+        layout: {
+            app: {
+                gap: '0'
+            },
+            header: {
+                height: '64px',
+                padding: '0 24px',
+                shadow: '0 1px 0 rgba(31,35,40,0.04)',
+                toggle: {
+                    background: 'transparent',
+                    textColor: '#1f2328',
+                    borderColor: '#d0d7de',
+                    borderRadius: '6px',
+                    icon: 'list' // 8-bit feel
+                }
+            },
+            sidebar: {
+                width: '260px',
+                padding: '16px 0',
+                toggle: {
+                    background: '#f6f8fa',
+                    textColor: '#1f2328',
+                    borderColor: '#d0d7de',
+                    borderRadius: '6px',
+                    icon: 'list',
+                    mode: 'floating',
+                    tonguePosition: 'bottom'
+                }
+            },
+            content: {
+                padding: '24px'
+            }
+        },
+        effects: {
+            button: {
+                background: '#f6f8fa',
+                borderColor: '#d0d7de',
+                shadow: '0 1px 0 rgba(31,35,40,0.04)',
+                textColor: '#1f2328'
+            },
+            window: {
+                background: '#ffffff',
+                shadow: '0 8px 24px rgba(149,157,165,0.2)',
+                borderColor: '#d0d7de'
+            },
+            modal: {
+                background: '#ffffff',
+                borderColor: '#d0d7de',
+                shadow: '0 8px 24px rgba(140,149,159,0.2)',
+                overlayColor: 'rgba(31,35,40,0.5)',
+                borderWidth: '1px',
+                borderRadius: '12px',
+                dividerColor: '#d0d7de'
+            },
+            input: {
+                background: '#ffffff',
+                borderColor: '#d0d7de',
+                shadow: 'inset 0 1px 0 rgba(31,35,40,0.02)',
+                placeholderColor: '#6e7781',
+                borderWidth: '1px',
+                borderRadius: '6px',
+                icons: {
+                    mode: 'inside',
+                    name: 'magnifying-glass',
+                    position: 'left',
+                    outsideGap: '8px',
+                    color: '#656d76'
+                }
+            },
+            card: {
+                background: '#ffffff',
+                borderColor: '#d0d7de',
+                shadow: 'none',
+                dividerColor: '#d0d7de'
+            },
+            select: {
+                background: '#ffffff',
+                borderColor: '#d0d7de',
+                shadow: '0 1px 0 rgba(31,35,40,0.04)',
+                borderWidth: '1px',
+                borderRadius: '6px'
+            },
+            table: {
+                background: '#ffffff',
+                borderColor: '#d0d7de',
+                headerBackground: '#f6f8fa',
+                rowHoverBackground: '#f6f8fa',
+                stripedBackground: '#f6f8fa',
+                textColor: '#1f2328',
+                headerTextColor: '#656d76'
+            },
+            accordion: {
+                background: '#ffffff',
+                borderColor: '#d0d7de',
+                shadow: 'none',
+                dividerColor: '#d0d7de',
+                borderRadius: '6px',
+                headerBackground: 'transparent'
+            },
+            badge: {
+                background: '#eff1f3',
+                textColor: '#1f2328',
+                borderRadius: '999px',
+                animation: 'none'
+            },
+            toast: {
+                background: '#ffffff',
+                borderColor: '#d0d7de',
+                textColor: '#1f2328',
+                shadow: '0 8px 24px rgba(140,149,159,0.2)',
+                borderRadius: '6px'
+            },
+            notificationMenu: {
+                button: {
+                    background: 'transparent',
+                    textColor: '#1f2328',
+                    icon: 'bell',
+                    badgeBackground: '#cf222e',
+                    badgeTextColor: '#ffffff'
+                },
+                dropdown: {
+                    background: '#ffffff',
+                    borderColor: '#d0d7de',
+                    shadow: '0 8px 24px rgba(140,149,159,0.2)',
+                    width: '320px',
+                    maxHeight: '400px',
+                    borderRadius: '6px'
+                },
+                item: {
+                    background: 'transparent',
+                    hoverBackground: '#f6f8fa',
+                    textColor: '#1f2328',
+                    descriptionColor: '#656d76',
+                    dividerColor: '#d0d7de',
+                    unreadIndicator: '#0969da'
+                },
+                config: {
+                    showAll: false,
+                    limit: 5,
+                    allowClear: true,
+                    accordionMode: true,
+                    showViewAll: true,
+                    viewAllPosition: 'footer-right'
+                }
+            }
+        }
+    },
+    darkTokens: {
+        colors: {
+            primary: '#2f81f7',
+            secondary: '#7d8590',
+            success: '#238636',
+            danger: '#f85149',
+            warning: '#d29922',
+            info: '#2f81f7',
+            white: '#f0f6fc',
+            black: '#010409',
+            background: '#0d1117',
+            text: '#e6edf3',
+            'primary-rgb': '47,129,247',
+            surface: '#161b22',
+            border: '#30363d'
+        },
+        layout: {
+            header: {
+                shadow: '0 1px 0 rgba(1,4,9,0.85)',
+                toggle: {
+                    textColor: '#e6edf3',
+                    borderColor: '#30363d'
+                }
+            },
+            sidebar: {
+                toggle: {
+                    background: '#161b22',
+                    textColor: '#e6edf3',
+                    borderColor: '#30363d'
+                }
+            }
+        },
+        effects: {
+            button: {
+                background: '#21262d',
+                borderColor: '#30363d',
+                shadow: '0 1px 0 rgba(1,4,9,0.04)',
+                textColor: '#c9d1d9'
+            },
+            window: {
+                background: '#0d1117',
+                shadow: '0 8px 24px rgba(1,4,9,0.5)',
+                borderColor: '#30363d'
+            },
+            modal: {
+                background: '#161b22',
+                borderColor: '#30363d',
+                shadow: '0 8px 24px rgba(1,4,9,0.5)',
+                overlayColor: 'rgba(1,4,9,0.8)',
+                dividerColor: '#30363d'
+            },
+            input: {
+                background: '#0d1117',
+                borderColor: '#30363d',
+                shadow: 'none',
+                placeholderColor: '#484f58',
+                icons: {
+                    color: '#7d8590'
+                }
+            },
+            select: {
+                background: '#161b22',
+                borderColor: '#30363d',
+                shadow: '0 8px 24px rgba(1,4,9,0.5)',
+                borderWidth: '1px',
+                borderRadius: '6px'
+            },
+            table: {
+                background: '#0d1117',
+                borderColor: '#30363d',
+                headerBackground: '#161b22',
+                rowHoverBackground: '#161b22',
+                stripedBackground: '#161b22',
+                textColor: '#e6edf3',
+                headerTextColor: '#7d8590'
+            },
+            card: {
+                background: '#0d1117',
+                borderColor: '#30363d',
+                dividerColor: '#30363d'
+            },
+            accordion: {
+                background: '#0d1117',
+                borderColor: '#30363d',
+                shadow: 'none',
+                dividerColor: '#30363d',
+                borderRadius: '6px',
+                headerBackground: 'transparent'
+            },
+            badge: {
+                background: '#21262d',
+                textColor: '#c9d1d9'
+            },
+            toast: {
+                background: '#161b22',
+                borderColor: '#30363d',
+                textColor: '#e6edf3',
+                shadow: '0 8px 24px rgba(1,4,9,0.5)',
+                borderRadius: '6px'
+            },
+            notificationMenu: {
+                button: {
+                    background: 'transparent',
+                    textColor: '#e6edf3',
+                    icon: 'bell',
+                    badgeBackground: '#f85149',
+                    badgeTextColor: '#f0f6fc'
+                },
+                dropdown: {
+                    background: '#161b22',
+                    borderColor: '#30363d',
+                    shadow: '0 8px 24px rgba(1,4,9,0.5)',
+                    width: '320px',
+                    maxHeight: '400px',
+                    borderRadius: '6px'
+                },
+                item: {
+                    background: 'transparent',
+                    hoverBackground: '#161b22',
+                    textColor: '#e6edf3',
+                    descriptionColor: '#7d8590',
+                    dividerColor: '#30363d',
+                    unreadIndicator: '#2f81f7'
+                },
+                config: {
+                    showAll: false,
+                    limit: 5,
+                    allowClear: true,
+                    accordionMode: true,
+                    showViewAll: true,
+                    viewAllPosition: 'footer-right'
+                }
+            }
+        }
+    },
+    componentAnimations: {
+        'fy-button': {
+            hover: 'button-hover-lift'
+        },
+        'fy-card': {
+            enter: 'card-fade-in'
+        },
+        'fy-layout': {
+            enter: 'layout-fade-in'
+        }
+    }
+};

package/dist/finey-nexus-1-theme.d.ts

@@ -0,0 +1,2 @@
+import { ThemeDefinition } from '@fylib/core';
+export declare const fineyNexus1Theme: ThemeDefinition;