@venix-sistemas/jade 1.0.0

package/dist/shared/css/colors.js

@@ -0,0 +1,19 @@
+import { NON_COLOR_PROPERTIES } from "../constants.js";
+export function generateThemeVars(mode, colors) {
+  const colorVars = Object.entries(colors).filter(([key]) => !NON_COLOR_PROPERTIES.includes(key)).filter(([, value]) => typeof value === "string" && value.startsWith("#")).map(([key, value]) => `  --color-${key}: ${value};`).join("\n");
+  const isDark = colors.dark === true;
+  const colorScheme = isDark ? "dark" : "light";
+  const inverseColor = isDark ? "#FFFFFF" : "#000000";
+  return `
+/* ============================================ */
+/* Colors - ${mode.charAt(0).toUpperCase() + mode.slice(1)} Theme                     */
+/* ============================================ */
+
+:root[data-theme='${mode}'] {
+  color-scheme: ${colorScheme};
+  --color-scheme: ${colorScheme === "dark" ? "#000000" : "#FFFFFF"};
+  --color-inverse: ${inverseColor};
+` + colorVars + `
+}
+`;
+}

package/dist/shared/css/cursor.d.ts

@@ -0,0 +1,2 @@
+import type { ThemeConfig } from '../types/index.js';
+export declare function generateCustomCursorCSS(theme: ThemeConfig): string;

package/dist/shared/css/cursor.js

@@ -0,0 +1,74 @@
+export function generateCustomCursorCSS(theme) {
+  const cursor = theme.customCursor;
+  if (!cursor || !cursor.enabled || !cursor.cursors) return "";
+  const cursors = cursor.cursors;
+  let css = "\n/* ============================================ */\n";
+  css += "/* Custom Cursor                                */\n";
+  css += "/* ============================================ */\n";
+  const cursorValue = (type) => {
+    if (!cursors[type]) return null;
+    const { path, hotspot } = cursors[type];
+    const hotspotStr = hotspot ? ` ${hotspot}` : "";
+    return `url('${path}')${hotspotStr}, ${type}`;
+  };
+  if (cursors.default) {
+    const value = cursorValue("default");
+    css += "\n/* 1. Default cursor on everything */\n";
+    css += `body {
+  cursor: ${value};
+}
+`;
+  }
+  if (cursors.pointer) {
+    const value = cursorValue("pointer");
+    css += "\n/* 2. Pointer cursor for clickable elements */\n";
+    css += `a, a *,
+button, button *,
+[role="button"],
+input[type="button"], input[type="submit"], input[type="reset"],
+.v-btn:not(.v-btn--disabled),
+.v-list-item,
+.v-icon,
+.v-tab,
+.v-chip,
+.v-card--link,
+.v-breadcrumbs-item--link,
+.v-pagination__item {
+  cursor: ${value} !important;
+}
+`;
+  }
+  if (cursors.text) {
+    const value = cursorValue("text");
+    css += "\n/* 3. Text cursor (i-beam) for editable fields only */\n";
+    css += `input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="number"],
+input[type="search"],
+input[type="tel"],
+input[type="url"],
+input[type="date"],
+input[type="datetime-local"],
+input[type="month"],
+input[type="week"],
+input[type="time"],
+textarea,
+select,
+[contenteditable="true"] {
+  cursor: ${value} !important;
+}
+`;
+  }
+  if (cursors.default) {
+    const value = cursorValue("default");
+    css += "\n/* 4. Disabled elements */\n";
+    css += `.v-btn--disabled,
+[disabled],
+.disabled {
+  cursor: ${value} !important;
+}
+`;
+  }
+  return css;
+}

package/dist/shared/css/index.d.ts

@@ -0,0 +1,8 @@
+import type { ThemeConfig } from '../types/index.js';
+export interface ProcessOptions {
+    typography?: boolean;
+    customScrollbar?: boolean;
+    customCursor?: boolean;
+    colors?: boolean;
+}
+export declare function processTheme(theme: ThemeConfig, options?: ProcessOptions): string;

package/dist/shared/css/index.js

@@ -0,0 +1,31 @@
+import { generateFontFaces, generateRootVars } from "./typography.js";
+import { generateThemeVars } from "./colors.js";
+import { generateCustomScrollbarCSS } from "./scrollbar.js";
+import { generateCustomCursorCSS } from "./cursor.js";
+import { generateThemeTransitionCSS } from "./transition.js";
+export function processTheme(theme, options = {}) {
+  const output = [];
+  if (options.typography !== false && theme.typography?.enabled !== false) {
+    output.push(generateFontFaces(theme));
+    output.push(generateRootVars(theme));
+  }
+  if (options.colors !== false && theme.colors?.enabled !== false) {
+    if (theme.colors?.themes) {
+      output.push(generateThemeTransitionCSS());
+      Object.entries(theme.colors.themes).forEach(([themeName, themeColors]) => {
+        if (themeName === "system") return;
+        if (!themeColors.primary && !themeColors.background) return;
+        output.push(generateThemeVars(themeName, themeColors));
+      });
+    }
+  }
+  if (options.customScrollbar !== false && theme.customScrollbar?.enabled !== false) {
+    const scrollbarCSS = generateCustomScrollbarCSS(theme);
+    if (scrollbarCSS) output.push(scrollbarCSS);
+  }
+  if (options.customCursor !== false && theme.customCursor?.enabled !== false) {
+    const cursorCSS = generateCustomCursorCSS(theme);
+    if (cursorCSS) output.push(cursorCSS);
+  }
+  return output.join("\n");
+}

package/dist/shared/css/scrollbar.d.ts

@@ -0,0 +1,2 @@
+import type { ThemeConfig } from '../types/index.js';
+export declare function generateCustomScrollbarCSS(theme: ThemeConfig): string;

package/dist/shared/css/scrollbar.js

@@ -0,0 +1,51 @@
+export function generateCustomScrollbarCSS(theme) {
+  const scrollbar = theme.customScrollbar;
+  if (!scrollbar || !scrollbar.enabled) return "";
+  const width = scrollbar.width || "auto";
+  const borderRadius = scrollbar.borderRadius || "8px";
+  const borderWidth = scrollbar.borderWidth || "3px";
+  const colorVar = (key, fallback) => {
+    const value = scrollbar.colors?.[key] || fallback;
+    if (value.startsWith("var(--") || value.startsWith("#") || value.startsWith("rgb")) {
+      return value;
+    }
+    return `var(--color-${value})`;
+  };
+  const thumb = colorVar("thumb", "primary");
+  const thumbHover = colorVar("thumbHover", "secondary");
+  const track = colorVar("track", "background2");
+  const border = colorVar("border", "background3");
+  let css = "\n/* ============================================ */\n";
+  css += "/* Custom Scrollbar                             */\n";
+  css += "/* ============================================ */\n";
+  css += `
+::-webkit-scrollbar {
+  width: ${width};
+  height: ${width};
+}
+`;
+  css += `
+::-webkit-scrollbar-track {
+  background: ${track};
+}
+`;
+  css += `
+::-webkit-scrollbar-thumb {
+  background: ${thumb};
+  border-radius: ${borderRadius};
+  border: ${borderWidth} solid ${border};
+}
+`;
+  css += `
+::-webkit-scrollbar-thumb:hover {
+  background: ${thumbHover};
+}
+`;
+  css += `
+html {
+  scrollbar-width: ${width === "auto" ? "auto" : "thin"};
+  scrollbar-color: ${thumb} ${track};
+}
+`;
+  return css;
+}

package/dist/shared/css/transition.d.ts

@@ -0,0 +1,2 @@
+/** Duration of the native cross-fade (View Transitions API) when switching themes. */
+export declare function generateThemeTransitionCSS(): string;

package/dist/shared/css/transition.js

@@ -0,0 +1,20 @@
+export function generateThemeTransitionCSS() {
+  return `
+/* ============================================ */
+/* Theme transition                              */
+/* ============================================ */
+
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation-duration: 0.3s;
+}
+
+::view-transition,
+::view-transition-group(*),
+::view-transition-image-pair(*),
+::view-transition-old(*),
+::view-transition-new(*) {
+  pointer-events: none !important;
+}
+`;
+}

package/dist/shared/css/typography.d.ts

@@ -0,0 +1,3 @@
+import type { ThemeConfig } from '../types/index.js';
+export declare function generateFontFaces(theme: ThemeConfig): string;
+export declare function generateRootVars(theme: ThemeConfig): string;

package/dist/shared/css/typography.js

@@ -0,0 +1,62 @@
+export function generateFontFaces(theme) {
+  if (!theme.typography?.customFonts) return "";
+  const uniqueFonts = /* @__PURE__ */ new Map();
+  theme.typography.customFonts.forEach((font) => {
+    if (!uniqueFonts.has(font.name)) {
+      uniqueFonts.set(font.name, []);
+    }
+    uniqueFonts.get(font.name).push(font);
+  });
+  let css = "\n/* ============================================ */\n";
+  css += "/* Typography - Font Faces                      */\n";
+  css += "/* ============================================ */\n\n";
+  uniqueFonts.forEach((weights) => {
+    weights.forEach((font) => {
+      const urls = Object.entries(font.sources).map(([format, url]) => `url('${url}') format('${format}')`).join(",\n       ");
+      css += `@font-face {
+  font-family: '${font.name}';
+  src: ${urls};
+  font-weight: ${font.weight};
+  font-style: ${font.style || "normal"};
+  font-display: swap;
+}
+
+`;
+    });
+  });
+  return css;
+}
+function buildFontFamily(theme) {
+  const fontNames = [];
+  if (theme.typography?.customFonts) {
+    const uniqueNames = [...new Set(theme.typography.customFonts.map((font) => font.name))];
+    uniqueNames.forEach((name) => {
+      fontNames.push(`'${name}'`);
+    });
+  }
+  if (theme.typography?.defaultFonts) {
+    fontNames.push(theme.typography.defaultFonts);
+  }
+  return fontNames.join(", ");
+}
+export function generateRootVars(theme) {
+  let vars = "\n/* ============================================ */\n";
+  vars += "/* Typography - Root Variables                  */\n";
+  vars += "/* ============================================ */\n\n";
+  vars += ":root {\n";
+  const fontFamily = buildFontFamily(theme);
+  if (fontFamily) {
+    vars += `  --font-family-base: ${fontFamily};
+`;
+    vars += `  --v-font-body: ${fontFamily};
+`;
+    vars += `  --v-font-heading: ${fontFamily};
+`;
+  }
+  if (theme.typography?.fontSize) {
+    vars += `  --font-size-base: ${theme.typography.fontSize};
+`;
+  }
+  vars += "}\n";
+  return vars;
+}

package/dist/shared/theme.json

@@ -0,0 +1,193 @@
+{
+    "name": "default",
+    "typography": {
+        "enabled": true,
+        "defaultFonts": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+        "fontSize": "16px",
+        "customFonts": [
+            {
+                "name": "Iceberg",
+                "preload": true,
+                "sources": {
+                    "woff2": "/fonts/Iceberg/Iceberg-Regular.woff2"
+                },
+                "weight": "normal",
+                "style": "normal"
+            }
+        ]
+    },
+    "customScrollbar": {
+        "enabled": true,
+        "width": "auto",
+        "borderRadius": "8px",
+        "borderWidth": "3px",
+        "colors": {
+            "thumb": "primary",
+            "thumbHover": "secondary",
+            "track": "background2",
+            "border": "background3"
+        }
+    },
+    "customCursor": {
+        "enabled": false,
+        "cursors": {
+            "default": {
+                "path": "/images/ui/cursor/cursor.png",
+                "hotspot": "0 0"
+            },
+            "pointer": {
+                "path": "/images/ui/cursor/cursor-hand.png",
+                "hotspot": "0 0"
+            },
+            "text": {
+                "path": "/images/ui/cursor/cursor-text.png",
+                "hotspot": "12 12"
+            }
+        },
+        "_comment": "default | pointer | text"
+    },
+    "colors": {
+        "enabled": true,
+        "defaults": true,
+        "defaultColor": "dark",
+        "themes": {
+            "system": {
+                "translations": {
+                    "pt-BR": "Automático",
+                    "en-US": "Automatic"
+                },
+                "icon": {
+                    "emote": "🎨",
+                    "css": "line-md:light-dark",
+                    "svg": "line-md:light-dark-loop"
+                }
+            },
+            "dark": {
+                "dark": true,
+                "primary": "#FF6B6B",
+                "secondary": "#FFB96A",
+                "accent": "#82B1FF",
+                "error": "#FF5252",
+                "info": "#2196F3",
+                "success": "#4CAF50",
+                "warning": "#FCCF3D",
+                "background": "#0C0C0C",
+                "background2": "#191919",
+                "background3": "#282828",
+                "translations": {
+                    "pt-BR": "Escuro",
+                    "en-US": "Dark"
+                },
+                "icon": {
+                    "emote": "🌙",
+                    "css": "mdi:moon-and-stars",
+                    "svg": "line-md:moon-filled-loop"
+                }
+            },
+            "light": {
+                "dark": false,
+                "primary": "#FF0000",
+                "secondary": "#FF8800",
+                "accent": "#82B1FF",
+                "error": "#FF5252",
+                "info": "#2196F3",
+                "success": "#4CAF50",
+                "warning": "#FCCF3D",
+                "background": "#FAFAFA",
+                "background2": "#F0F0F0",
+                "background3": "#E6E6E6",
+                "translations": {
+                    "pt-BR": "Claro",
+                    "en-US": "Light"
+                },
+                "icon": {
+                    "emote": "☀️",
+                    "css": "mdi:white-balance-sunny",
+                    "svg": "line-md:sunny-filled-loop"
+                }
+            },
+            "carnaval": {
+                "dark": true,
+                "seasonal": true,
+                "dateRange": {
+                    "start": "02-14",
+                    "end": "03-05"
+                },
+                "primary": "#FF1493",
+                "secondary": "#FFD000",
+                "accent": "#00D4AA",
+                "error": "#FF0000",
+                "info": "#00BFFF",
+                "success": "#32CD32",
+                "warning": "#FF8C00",
+                "background": "#1A001A",
+                "background2": "#2D002D",
+                "background3": "#400040",
+                "translations": {
+                    "pt-BR": "Carnaval",
+                    "en-US": "Carnival"
+                },
+                "icon": {
+                    "emote": "🎭",
+                    "css": "mdi:emoticon-excited-outline",
+                    "svg": "line-md:emoji-grin"
+                }
+            },
+            "natal": {
+                "dark": true,
+                "seasonal": true,
+                "dateRange": {
+                    "start": "12-01",
+                    "end": "12-26"
+                },
+                "primary": "#CA2A2A",
+                "secondary": "#3BA340",
+                "accent": "#FFD54F",
+                "error": "#FF1744",
+                "info": "#2979FF",
+                "success": "#00E676",
+                "warning": "#FFAB00",
+                "background": "#0F0F0F",
+                "background2": "#191919",
+                "background3": "#282828",
+                "translations": {
+                    "pt-BR": "Natal",
+                    "en-US": "Christmas"
+                },
+                "icon": {
+                    "emote": "🎄",
+                    "css": "mdi:pine-tree-variant",
+                    "svg": "line-md:star-filled"
+                }
+            },
+            "halloween": {
+                "dark": true,
+                "seasonal": true,
+                "dateRange": {
+                    "start": "10-15",
+                    "end": "10-31"
+                },
+                "primary": "#FF6F00",
+                "secondary": "#A42BF0",
+                "accent": "#76FF03",
+                "error": "#FF0000",
+                "info": "#4A90D9",
+                "success": "#32CD32",
+                "warning": "#FF8C00",
+                "background": "#0D0D0D",
+                "background2": "#1A0A00",
+                "background3": "#2B1500",
+                "translations": {
+                    "pt-BR": "Dia das Bruxas",
+                    "en-US": "Halloween"
+                },
+                "icon": {
+                    "emote": "🎃",
+                    "css": "mdi:halloween",
+                    "svg": "line-md:emoji-frown"
+                }
+            }
+        }
+    },
+    "_comment": "Use 'node app/utils/generate-theme-css.cjs' to generate CSS"
+}

package/dist/shared/types/color-options.d.ts

@@ -0,0 +1,14 @@
+import type { ThemeColors } from './colors.js';
+export interface ColorOptions {
+    enabled: boolean;
+    apply: boolean;
+    defaultColor: string;
+    themes: Record<string, Partial<ThemeColors>>;
+    /**
+     * Preferred variant for each theme's icon when `icon` is an object
+     * (`ThemeIconFormats`). Default: `'svg'`. Falls back to `'emote'` when the
+     * theme doesn't define the chosen format, or when `icon` is just a string
+     * (legacy format).
+     */
+    iconFormat: 'emote' | 'css' | 'svg';
+}

package/dist/shared/types/colors.d.ts

@@ -0,0 +1,38 @@
+export interface ThemeTranslations {
+    [locale: string]: string;
+}
+export interface ThemeIconFormats {
+    /** Emoji, always present — fallback when the preferred format doesn't exist. */
+    emote: string;
+    /** Iconify icon name (e.g. 'mdi:sun-compass'), no animation (@nuxt/icon in CSS mode). */
+    css?: string;
+    /** Iconify icon name (e.g. 'line-md:sunny-filled-loop'), animated (@nuxt/icon in SVG mode). */
+    svg?: string;
+}
+export interface ThemeColors {
+    dark?: boolean;
+    seasonal?: boolean;
+    dateRange?: {
+        start: string;
+        end: string;
+    };
+    primary?: string;
+    secondary?: string;
+    accent?: string;
+    error?: string;
+    info?: string;
+    success?: string;
+    warning?: string;
+    background?: string;
+    background2?: string;
+    background3?: string;
+    translations?: ThemeTranslations;
+    /** A plain emoji ('🎨') or an object with per-format variants — see `ThemeIconFormats`. */
+    icon?: string | ThemeIconFormats;
+}
+export interface ColorsConfig {
+    enabled: boolean;
+    defaults: boolean;
+    defaultColor: string;
+    themes: Record<string, ThemeColors>;
+}

package/dist/shared/types/cursor.d.ts

@@ -0,0 +1,7 @@
+export interface CursorConfig {
+    enabled: boolean;
+    cursors: Record<string, {
+        path: string;
+        hotspot: string;
+    }>;
+}

package/dist/shared/types/icon.d.ts

@@ -0,0 +1,7 @@
+export interface IconOptions {
+    enabled: boolean;
+    /** Iconify collections bundled locally (offline), e.g. 'line-md'. */
+    collections: string[];
+    /** Shortcuts: short name -> emoji, Iconify icon name ('line-md:home') or inline SVG. */
+    aliases: Record<string, string>;
+}

package/dist/shared/types/index.d.ts

@@ -0,0 +1,10 @@
+import './runtime-config.js';
+export type { FontConfig, TypographyConfig } from './typography.js';
+export type { ScrollbarConfig } from './scrollbar.js';
+export type { CursorConfig } from './cursor.js';
+export type { ThemeColors, ThemeTranslations, ColorsConfig, ThemeIconFormats } from './colors.js';
+export type { ThemeConfig } from './theme.js';
+export type { TranslationConfig } from './translation.js';
+export type { ColorOptions } from './color-options.js';
+export type { VuetifyOptions } from './vuetify.js';
+export type { IconOptions } from './icon.js';

package/dist/shared/types/index.js

@@ -0,0 +1 @@
+import "./runtime-config";

package/dist/shared/types/runtime-config.d.ts

@@ -0,0 +1,33 @@
+import type { ThemeColors } from './colors.js';
+declare module '@nuxt/schema' {
+    interface PublicRuntimeConfig {
+        venixTheme?: {
+            defaultTheme: string;
+            colorThemes: Record<string, Partial<ThemeColors>>;
+            applyColors: boolean;
+            localeCookie: string;
+            defaultLocale: string;
+            locale: string;
+            iconFormat: 'emote' | 'css' | 'svg';
+            icon: {
+                aliases: Record<string, string>;
+            };
+            enabled: {
+                typography: boolean;
+                scrollbar: boolean;
+                cursor: boolean;
+                color: boolean;
+                translation: boolean;
+                manageHtmlLang: boolean;
+                vuetify: boolean;
+                icon: boolean;
+            };
+        };
+    }
+}
+declare global {
+    interface Window {
+        __VENIX_INITIAL_THEME__?: string;
+    }
+}
+export {};

package/dist/shared/types/runtime-config.js

@@ -0,0 +1 @@
+export {};

package/dist/shared/types/scrollbar.d.ts

@@ -0,0 +1,12 @@
+export interface ScrollbarConfig {
+    enabled: boolean;
+    width: string;
+    borderRadius: string;
+    borderWidth: string;
+    colors: {
+        thumb: string;
+        thumbHover: string;
+        track: string;
+        border: string;
+    };
+}

package/dist/shared/types/theme.d.ts

@@ -0,0 +1,11 @@
+import type { TypographyConfig } from './typography.js';
+import type { ScrollbarConfig } from './scrollbar.js';
+import type { CursorConfig } from './cursor.js';
+import type { ColorsConfig } from './colors.js';
+export interface ThemeConfig {
+    name: string;
+    typography: TypographyConfig;
+    customScrollbar: ScrollbarConfig;
+    customCursor: CursorConfig;
+    colors: ColorsConfig;
+}

package/dist/shared/types/translation.d.ts

@@ -0,0 +1,16 @@
+export interface TranslationConfig {
+    enabled: boolean;
+    locale: string;
+    defaultLocale: string;
+    cookieSync: string;
+    /**
+     * Keeps `<html lang>` in sync with the locale this module resolves
+     * (needed for screen readers to pronounce translated theme names correctly
+     * — WCAG 3.1.1). Off by default: if the project already uses a real i18n
+     * module (e.g. `@nuxtjs/i18n`), THAT should be the source of truth for
+     * `lang` — turning this on at the same time can make the two fight over
+     * the attribute. Only enable this in projects with no routing-based i18n,
+     * that only use this module's own theme-name translations.
+     */
+    manageHtmlLang: boolean;
+}