@goldlabelapps/theme 3.2.0 → 3.5.6

package/dist/styles/theme.js

@@ -1,20 +1,44 @@
 import { createTheme } from '@mui/material/styles';
-export function createAppTheme(mode = 'light', themeConfig) {
+export function createAppTheme(mode = 'dark', themeConfig) {
     const isDark = mode === 'dark';
-    const resolvedPrimary = themeConfig?.primary ?? (isDark ? '#F3F3F3' : '#5A5A5A');
-    const resolvedSecondary = themeConfig?.secondary ?? (isDark ? '#E3E3E3' : '#7A7A7A');
-    const palette = {
+    const resolvedPrimary = themeConfig?.primary ?? (isDark ? '#FFFFFF' : '#5A5A5A');
+    const resolvedSecondary = themeConfig?.secondary ?? (isDark ? '#F5F5F5' : '#7A7A7A');
+    const paletteMap = {
         dark: {
             primary: resolvedPrimary,
             secondary: resolvedSecondary,
             background: '#111111',
             paper: '#1C1C1C',
-            text: '#F7F7F7',
-            textSecondary: '#C7C7C7',
+            text: '#FFFFFF',
+            textSecondary: '#CBD5E1',
             border: 'rgba(255, 255, 255, 0.16)',
             borderSoft: 'rgba(255, 255, 255, 0.10)',
             shadow: '0 12px 40px rgba(0, 0, 0, 0.35)',
             buttonShadow: '0 12px 30px rgba(0, 0, 0, 0.4)',
+            error: {
+                main: '#F87171',
+                light: '#FCA5A5',
+                dark: '#EF4444',
+                contrastText: '#0F172A',
+            },
+            warning: {
+                main: '#FBBF24',
+                light: '#FDE047',
+                dark: '#F59E0B',
+                contrastText: '#0F172A',
+            },
+            info: {
+                main: '#38BDF8',
+                light: '#7DD3FC',
+                dark: '#0284C7',
+                contrastText: '#0F172A',
+            },
+            success: {
+                main: '#4ADE80',
+                light: '#86EFAC',
+                dark: '#22C55E',
+                contrastText: '#0F172A',
+            },
         },
         light: {
             primary: resolvedPrimary,
@@ -27,8 +51,33 @@ export function createAppTheme(mode = 'light', themeConfig) {
             borderSoft: 'rgba(31, 31, 31, 0.08)',
             shadow: '0 12px 40px rgba(31, 31, 31, 0.12)',
             buttonShadow: '0 12px 30px rgba(31, 31, 31, 0.18)',
+            error: {
+                main: '#DC2626',
+                light: '#EF4444',
+                dark: '#991B1B',
+                contrastText: '#FFFFFF',
+            },
+            warning: {
+                main: '#D97706',
+                light: '#F59E0B',
+                dark: '#92400E',
+                contrastText: '#FFFFFF',
+            },
+            info: {
+                main: '#2563EB',
+                light: '#3B82F6',
+                dark: '#1E40AF',
+                contrastText: '#FFFFFF',
+            },
+            success: {
+                main: '#16A34A',
+                light: '#22C55E',
+                dark: '#166534',
+                contrastText: '#FFFFFF',
+            },
         },
-    }[mode];
+    };
+    const palette = paletteMap[mode && mode in paletteMap ? mode : 'light'];
     const resolvedPalette = {
         ...palette,
         background: themeConfig?.background ?? palette.background,
@@ -47,6 +96,10 @@ export function createAppTheme(mode = 'light', themeConfig) {
                 main: resolvedPalette.secondary,
                 contrastText: isDark ? '#111111' : '#FFFFFF',
             },
+            error: palette.error,
+            warning: palette.warning,
+            info: palette.info,
+            success: palette.success,
             background: {
                 default: resolvedPalette.background,
                 paper: resolvedPalette.paper,
@@ -82,6 +135,32 @@ export function createAppTheme(mode = 'light', themeConfig) {
                 fontSize: '1.5rem',
                 color: resolvedPalette.secondary,
             },
+            h4: {
+                fontFamily: 'var(--font-title)',
+                fontWeight: 400,
+                fontSize: '1.25rem',
+                color: resolvedPalette.secondary,
+            },
+            h5: {
+                fontFamily: 'var(--font-title)',
+                fontWeight: 400,
+                fontSize: '1.1rem',
+                color: resolvedPalette.secondary,
+            },
+            h6: {
+                fontFamily: 'var(--font-title)',
+                fontWeight: 400,
+                fontSize: '1rem',
+                color: resolvedPalette.secondary,
+            },
+            subtitle1: {
+                fontFamily: 'var(--font-title)',
+                fontWeight: 400,
+            },
+            subtitle2: {
+                fontFamily: 'var(--font-title)',
+                fontWeight: 400,
+            },
             button: {
                 textTransform: 'none',
                 fontWeight: 400,
@@ -89,6 +168,26 @@ export function createAppTheme(mode = 'light', themeConfig) {
             }
         },
         components: {
+            MuiFormHelperText: {
+                styleOverrides: {
+                    root: {
+                        '&.Mui-error': {
+                            color: isDark ? '#FCA5A5' : '#DC2626',
+                            fontWeight: 500,
+                        },
+                    },
+                },
+            },
+            MuiInputBase: {
+                styleOverrides: {
+                    root: {
+                        backgroundColor: isDark ? '#1E293B' : undefined,
+                        '&.Mui-error .MuiOutlinedInput-notchedOutline': {
+                            borderColor: isDark ? '#F87171' : '#DC2626',
+                        },
+                    },
+                },
+            },
             MuiButton: {
                 styleOverrides: {
                     root: {

package/dist/styles/tokens.css

@@ -106,4 +106,69 @@
   --border-input-hover: rgba(30, 28, 52, 0.42);
   --border-input-focus: var(--nx-clay);
   --focus-ring: var(--nx-clay);
+  --nx-error: #dc2626;
+  --nx-error-bg: rgba(220, 38, 38, 0.08);
+  --nx-error-border: rgba(220, 38, 38, 0.3);
+  --nx-error-text: #991b1b;
+  --nx-warning: #d97706;
+  --nx-warning-bg: rgba(217, 119, 6, 0.08);
+  --nx-warning-border: rgba(217, 119, 6, 0.3);
+  --nx-warning-text: #92400e;
+  --nx-success: #16a34a;
+  --nx-success-bg: rgba(22, 163, 74, 0.08);
+  --nx-success-border: rgba(22, 163, 74, 0.3);
+  --nx-success-text: #166534;
+  --nx-info: #2563eb;
+  --nx-info-bg: rgba(37, 99, 235, 0.08);
+  --nx-info-border: rgba(37, 99, 235, 0.3);
+  --nx-info-text: #1e40af;
 }
+
+:where(.dark, .dark *),
+.dark,
+[data-theme="dark"] {
+  color-scheme: dark;
+  --nx-ink: #ffffff;
+  --nx-ink-logo: #ffffff;
+  --nx-dusty: #f8fafc;
+  --nx-body: #f8fafc;
+  --nx-sign: #f1f5f9;
+  --nx-ash: #e2e8f0;
+  --nx-muted: #cbd5e1;
+  --nx-fog: #cbd5e1;
+  --nx-parchment: #0f172a;
+  --nx-paper: #1e293b;
+  --nx-oat: #334155;
+  --nx-clay: #60a5fa;
+  --nx-line: rgba(255, 255, 255, 0.16);
+  --nx-line-soft: rgba(255, 255, 255, 0.10);
+  --nx-glass: rgba(30, 41, 59, 0.72);
+  --nx-glass-hi: rgba(51, 65, 85, 0.82);
+  --nx-tile: rgba(30, 41, 59, 0.86);
+  --nx-scrim: rgba(15, 23, 42, 0.95);
+  --surface-input: rgba(30, 41, 59, 0.92);
+  --surface-input-hover: #334155;
+  --surface-input-focus: #475569;
+  --surface-input-disabled: #1e293b;
+  --border-input: rgba(255, 255, 255, 0.22);
+  --border-input-hover: rgba(255, 255, 255, 0.32);
+  --border-input-focus: #ffffff;
+  --focus-ring: #ffffff;
+  --nx-error: #f87171;
+  --nx-error-bg: rgba(248, 113, 113, 0.15);
+  --nx-error-border: rgba(248, 113, 113, 0.4);
+  --nx-error-text: #fca5a5;
+  --nx-warning: #fbbf24;
+  --nx-warning-bg: rgba(251, 191, 36, 0.15);
+  --nx-warning-border: rgba(251, 191, 36, 0.4);
+  --nx-warning-text: #fde047;
+  --nx-success: #4ade80;
+  --nx-success-bg: rgba(74, 222, 128, 0.15);
+  --nx-success-border: rgba(74, 222, 128, 0.4);
+  --nx-success-text: #86efac;
+  --nx-info: #60a5fa;
+  --nx-info-bg: rgba(96, 165, 250, 0.15);
+  --nx-info-border: rgba(96, 165, 250, 0.4);
+  --nx-info-text: #93c5fd;
+}
+

package/dist/types/index.d.ts

@@ -1,3 +1,4 @@
+import type { TextFieldProps } from '@mui/material';
 export interface SiteMetadata {
     title: string;
     description: string;
@@ -317,3 +318,222 @@ export interface GuideArticle extends GuideMeta {
     content: string;
     rawMarkdown: string;
 }
+export type DesignSystemMode = 'light' | 'dark';
+export interface DesignSystemThemeConfig {
+    primary?: string;
+    secondary?: string;
+    background?: string;
+    paper?: string;
+    text?: string;
+    textSecondary?: string;
+}
+export interface DesignSystemProviderProps {
+    children: React.ReactNode;
+    mode?: DesignSystemMode;
+    themeConfig?: DesignSystemThemeConfig;
+}
+export type ButtonSize = 'sm' | 'md' | 'lg';
+export type ButtonTone = 'primary' | 'neutral' | 'danger';
+export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'text';
+export interface NxButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {
+    variant?: ButtonVariant;
+    tone?: ButtonTone;
+    size?: ButtonSize;
+    fullWidth?: boolean;
+    href?: string;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    ariaLabel?: string;
+    sx?: unknown;
+}
+export type ButtonProps = NxButtonProps;
+export interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {
+    icon?: React.ReactNode;
+    variant?: ButtonVariant;
+    tone?: ButtonTone;
+    size?: ButtonSize;
+    href?: string;
+    ariaLabel?: string;
+    color?: string;
+    sx?: unknown;
+}
+export interface AlertProps {
+    children?: React.ReactNode;
+    title?: string;
+    severity?: 'info' | 'success' | 'warning' | 'error';
+    dismissible?: boolean;
+}
+export interface NxCardProps {
+    children?: React.ReactNode;
+    padding?: 'sm' | 'md' | 'lg';
+    variant?: 'paper' | 'glass' | 'tile' | 'ink';
+    hoverLift?: boolean;
+    mode?: DesignSystemMode;
+}
+export type CardProps = NxCardProps;
+export interface FieldProps extends Omit<TextFieldProps, 'label' | 'error' | 'helperText'> {
+    label?: string;
+    error?: string;
+    helperText?: string;
+    hint?: string;
+}
+export type HeadingTone = 'clay' | 'ink' | 'primary' | 'secondary';
+export type HeadingVariant = 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    tone?: HeadingTone;
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span';
+    variant?: HeadingVariant;
+    style?: React.CSSProperties;
+    sx?: unknown;
+}
+export interface FeaturedImageData {
+    src?: string;
+    alt?: string;
+    width?: number | string;
+    height?: number | string;
+    objectFit?: 'cover' | 'contain' | 'fill';
+}
+export interface OgImageVersion {
+    path: string;
+    dimensions?: {
+        width: number;
+        height: number;
+    };
+}
+export interface OgImageItem {
+    id?: string;
+    category?: string;
+    name?: string;
+    versions?: {
+        light?: OgImageVersion;
+        dark?: OgImageVersion;
+        [key: string]: OgImageVersion | undefined;
+    };
+}
+export interface OgImagesManifest {
+    items: OgImageItem[];
+}
+export interface FeaturedImageProps {
+    image?: FeaturedImageData;
+    slug?: string;
+    alt?: string;
+    width?: number | string;
+    height?: number | string;
+    objectFit?: 'cover' | 'contain' | 'fill';
+    manifest?: OgImagesManifest;
+    borderRadius?: string | number;
+    flushTop?: boolean;
+}
+export interface AppShellProps {
+    children: React.ReactNode;
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+}
+export interface SiteFooterLink {
+    title: string;
+    href: string;
+}
+export interface SiteFooterColumn {
+    title: string;
+    href: string;
+    children?: SiteFooterLink[];
+}
+export interface SiteFooterProps {
+    columns?: SiteFooterColumn[];
+}
+export interface SiteHeaderProps {
+    title?: string;
+    icon?: string;
+    iconSize?: number;
+    homeHref?: string;
+    logoSrc?: string;
+    logoAlt?: string;
+    logo?: React.ReactNode;
+    nav?: React.ReactNode;
+    actions?: React.ReactNode;
+    children?: React.ReactNode;
+}
+export interface SiteMainProps {
+    children?: React.ReactNode;
+    className?: string;
+    featuredImage?: string;
+}
+export interface MenuDrawerProps {
+    open: boolean;
+    onClose: () => void;
+    children?: React.ReactNode;
+    navItems?: React.ReactNode;
+    actions?: React.ReactNode;
+    toggleAriaLabel?: string;
+}
+export interface PageSectionProps {
+    children?: React.ReactNode;
+    id?: string;
+    className?: string;
+    title?: string;
+    subtitle?: string;
+}
+export interface SectionTitleProps {
+    title: string;
+    subtitle?: string;
+    align?: 'left' | 'center' | 'right';
+}
+export interface BreadcrumbItem {
+    label: string;
+    href?: string;
+}
+export interface BreadcrumbProps {
+    items: BreadcrumbItem[];
+}
+export type ShareSize = 'sm' | 'md' | 'lg' | 'small' | 'medium' | 'large';
+export interface ShareProps {
+    url?: string;
+    title?: string;
+    description?: string;
+    size?: ShareSize;
+}
+export interface T_NavNode {
+    slug?: string;
+    path?: string;
+    title?: string;
+    label?: string;
+    href?: string;
+    children?: T_NavNode[];
+    items?: T_NavNode[];
+    [key: string]: unknown;
+}
+export interface SiteNavProps {
+    nodes?: T_NavNode[];
+    items?: T_NavNode[];
+    navigateTo?: (path: string) => void;
+}
+export interface UseIsMobileOptions {
+    breakpoint?: number;
+    maxWidth?: number | string;
+}
+export interface VisibilityProps {
+    children: React.ReactNode;
+    isMobile?: boolean;
+    maxWidth?: number | string;
+    fallback?: React.ReactNode;
+}
+export interface SwatchProps {
+    label: string;
+    value: string;
+}
+export interface SwatchGroupProps {
+    items: SwatchProps[];
+}
+export interface LogoProps {
+    href?: string;
+    name?: string;
+    text?: string;
+    subtitle?: string;
+    src?: string;
+    icon?: string;
+    favicon?: boolean;
+    faceColor?: string;
+    smileColor?: string;
+    iconSize?: number;
+    children?: React.ReactNode;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goldlabelapps/theme",
-  "version": "3.2.0",
+  "version": "3.5.6",
   "description": "NX° theme tokens, UI primitives, and layout showcase blocks",
   "publishConfig": {
     "access": "public"
@@ -45,7 +45,7 @@
     "build": "tsc -p tsconfig.build.json && mkdir -p dist/styles && cp src/styles/*.css dist/styles/",
     "type-check": "tsc --noEmit",
     "test": "vitest run",
-    "lint": "echo \"No lint configured yet\"",
+    "lint": "eslint .",
     "clean": "rm -rf dist"
   },
   "peerDependencies": {
@@ -56,10 +56,13 @@
     "react-dom": ">=18.0.0"
   },
   "dependencies": {
+    "@goldlabelapps/flash": "workspace:*",
+    "@goldlabelapps/uberedux": "workspace:*",
     "canvas-confetti": "^1.9.4",
     "clsx": "^2.1.1",
     "framer-motion": "^13.1.1",
     "lucide-react": "^1.34.0",
+    "react-markdown": "^10.1.0",
     "react-share": "^5.3.0",
     "tailwind-merge": "^3.6.0"
   },

package/dist/components/guide/GuideLayout.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-import type { GuideMeta } from "../../types";
-export interface GuideLayoutProps {
-    guides: GuideMeta[];
-    currentGuide?: GuideMeta;
-    children: React.ReactNode;
-}
-export declare function GuideLayout({ guides, currentGuide, children, }: GuideLayoutProps): React.JSX.Element;

package/dist/components/guide/GuideLayout.js

@@ -1,12 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Link from "next/link";
-import { BookOpen } from "lucide-react";
-export function GuideLayout({ guides, currentGuide, children, }) {
-    return (_jsx("div", { className: "min-h-screen pt-28 pb-20 bg-white", children: _jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: _jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-12 gap-8", children: [_jsx("aside", { className: "lg:col-span-3 space-y-4", children: _jsxs("div", { className: "p-4 rounded-2xl bg-slate-50 border border-slate-200", children: [_jsxs("div", { className: "flex items-center gap-2 mb-4 text-[#012867] font-bold text-sm", children: [_jsx(BookOpen, { className: "h-4 w-4" }), _jsx("span", { children: "How To Guides" })] }), _jsx("ul", { className: "space-y-1", children: guides.map((g) => {
-                                        const isActive = currentGuide?.slug === g.slug;
-                                        return (_jsx("li", { children: _jsx(Link, { href: `/how-to${g.slug === "/" ? "" : g.slug}`, className: `block px-3 py-2 rounded-xl text-xs font-semibold transition-colors ${isActive
-                                                    ? "bg-[#012867] text-white"
-                                                    : "text-slate-700 hover:bg-slate-200/70"}`, children: g.title }) }, g.slug));
-                                    }) })] }) }), _jsx("main", { className: "lg:col-span-9", children: children })] }) }) }));
-}

package/dist/components/guide/MarkdownContent.js

@@ -1,6 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-export function MarkdownContent({ content }) {
-    // Simple markdown renderer for headers, tables, code blocks, and lists
-    return (_jsx("div", { className: "prose prose-slate max-w-none text-slate-800 leading-relaxed font-sans", children: _jsx("div", { dangerouslySetInnerHTML: { __html: content } }) }));
-}