@goldlabelapps/theme 3.2.0 → 3.5.6

package/dist/design-system/components/images/FeaturedImage/FeaturedImage.js

@@ -2,24 +2,83 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ErrorOutlineRoundedIcon from '@mui/icons-material/ErrorOutlineRounded';
 import { Box } from '@mui/material';
-import { alpha } from '@mui/material/styles';
-import { useState } from 'react';
-export default function FeaturedImage({ image, width = '100%', height, }) {
-    const { src, alt, objectFit = 'cover', width: imageWidth, height: imageHeight } = image;
-    const altText = typeof alt === 'string' ? alt : '';
-    const caption = altText.trim();
+import { alpha, useTheme as useMuiTheme } from '@mui/material/styles';
+import { useContext, useState } from 'react';
+import { ThemeContext } from '../../../../context/ThemeContext';
+import defaultOgManifest from '../../../../data/og-images.json';
+function findOgImageItem(manifest, slug) {
+    if (!slug || !manifest?.items)
+        return undefined;
+    const lowerSlug = slug.trim().toLowerCase();
+    const directMatch = manifest.items.find((item) => item.id?.toLowerCase() === lowerSlug ||
+        item.category?.toLowerCase() === lowerSlug ||
+        item.name?.toLowerCase() === lowerSlug);
+    if (directMatch)
+        return directMatch;
+    const categorySegment = lowerSlug.split('/')[0];
+    if (categorySegment && categorySegment !== lowerSlug) {
+        return manifest.items.find((item) => item.id?.toLowerCase() === categorySegment ||
+            item.category?.toLowerCase() === categorySegment ||
+            item.name?.toLowerCase() === categorySegment);
+    }
+    return undefined;
+}
+export default function FeaturedImage({ image, slug = 'nx', alt, width = '100%', height, objectFit: propObjectFit, manifest = defaultOgManifest, borderRadius: propBorderRadius, flushTop = false, }) {
+    const themeContext = useContext(ThemeContext);
+    const muiTheme = useMuiTheme();
+    const activeTheme = themeContext ? themeContext.theme : (muiTheme?.palette?.mode ?? 'dark');
+    let resolvedSrc = image?.src;
+    let resolvedAlt = typeof alt === 'string' ? alt : (typeof image?.alt === 'string' ? image.alt : null);
+    let resolvedImageWidth = image?.width;
+    let resolvedImageHeight = image?.height;
+    const resolvedObjectFit = propObjectFit ?? image?.objectFit ?? 'cover';
+    const isUrlPath = (src) => Boolean(src && (src.startsWith('/') || src.startsWith('http://') || src.startsWith('https://') || src.startsWith('data:')));
+    const candidateSlug = !isUrlPath(resolvedSrc) && resolvedSrc ? resolvedSrc : slug;
+    if (!isUrlPath(resolvedSrc)) {
+        resolvedSrc = undefined;
+    }
+    if (!resolvedSrc && candidateSlug) {
+        const ogItem = findOgImageItem(manifest, candidateSlug);
+        if (ogItem?.versions) {
+            const version = ogItem.versions[activeTheme] ?? ogItem.versions.light ?? ogItem.versions.dark;
+            if (version) {
+                resolvedSrc = version.path;
+                if (resolvedAlt == null) {
+                    resolvedAlt = ogItem.name ?? null;
+                }
+                if (resolvedImageWidth == null && version.dimensions?.width) {
+                    resolvedImageWidth = version.dimensions.width;
+                }
+                if (resolvedImageHeight == null && version.dimensions?.height) {
+                    resolvedImageHeight = version.dimensions.height;
+                }
+            }
+        }
+    }
+    if (!resolvedSrc) {
+        return null;
+    }
+    const altText = typeof resolvedAlt === 'string' ? resolvedAlt : '';
     const [status, setStatus] = useState('loaded');
-    const hasIntrinsicRatio = typeof imageWidth === 'number' && typeof imageHeight === 'number' && imageWidth > 0 && imageHeight > 0;
-    const resolvedPaddingTop = hasIntrinsicRatio && height == null ? `${(imageHeight / imageWidth) * 100}%` : undefined;
+    const isWidthNumber = typeof resolvedImageWidth === 'number';
+    const isHeightNumber = typeof resolvedImageHeight === 'number';
+    const hasIntrinsicRatio = isWidthNumber &&
+        isHeightNumber &&
+        resolvedImageWidth > 0 &&
+        resolvedImageHeight > 0;
+    const resolvedPaddingTop = hasIntrinsicRatio && height == null
+        ? `${(resolvedImageHeight / resolvedImageWidth) * 100}%`
+        : undefined;
     const resolvedHeight = height ?? (hasIntrinsicRatio ? 0 : 220);
+    const defaultRadius = flushTop ? '1.5rem 1.5rem 0 0' : '3px';
     return (_jsxs(Box, { sx: {
-            my: 2,
+            my: flushTop ? 0 : 2,
             width: width ?? '100%',
             height: resolvedHeight,
             ...(resolvedPaddingTop ? { paddingTop: resolvedPaddingTop } : {}),
             overflow: 'hidden',
-            borderRadius: '3px',
-            bgcolor: 'grey.100',
+            borderRadius: propBorderRadius ?? defaultRadius,
+            bgcolor: 'transparent',
             position: 'relative',
         }, children: [status === 'error' ? (_jsxs(Box, { "data-testid": "featured-image-error", sx: {
                     position: 'absolute',
@@ -43,25 +102,14 @@ export default function FeaturedImage({ image, width = '100%', height, }) {
                             lineHeight: 1.35,
                             wordBreak: 'break-all',
                             boxShadow: '0 8px 24px rgba(0, 0, 0, 0.12)',
-                        }, children: src })] })) : null, _jsx(Box, { component: "img", src: src, alt: altText, onLoad: () => setStatus('loaded'), onError: () => setStatus('error'), sx: {
+                        }, children: resolvedSrc })] })) : null, _jsx(Box, { component: "img", src: resolvedSrc, alt: altText, suppressHydrationWarning: true, onLoad: () => setStatus('loaded'), onError: () => setStatus('error'), sx: {
                     position: 'absolute',
                     inset: 0,
                     width: '100%',
                     height: '100%',
                     display: 'block',
-                    objectFit,
+                    objectFit: resolvedObjectFit,
                     opacity: 1,
                     zIndex: 0,
-                } }), caption ? (_jsx(Box, { sx: {
-                    position: 'absolute',
-                    left: 8,
-                    bottom: 8,
-                    px: 1,
-                    py: 0.5,
-                    borderRadius: '3px',
-                    backgroundColor: (theme) => alpha(theme.palette.background.default, 0.82),
-                    color: 'text.primary',
-                    fontSize: '0.78rem',
-                    lineHeight: 1.2,
-                }, children: _jsx(Box, { component: "span", sx: { display: 'block', fontWeight: 400 }, children: caption }) })) : null] }));
+                } })] }));
 }

package/dist/design-system/components/images/FeaturedImage/types.d.ts

@@ -1 +1 @@
-export type { FeaturedImageData, FeaturedImageProps } from '../../../types';
+export type { FeaturedImageData, FeaturedImageProps, OgImageItem, OgImagesManifest, OgImageVersion } from '../../../types';

package/dist/design-system/components/layout/Footer/Footer.js

@@ -5,7 +5,7 @@ import { AppBar, Box, Toolbar } from '@mui/material';
 import Heading from '../../headings/Heading/Heading';
 export default function Footer({ columns = [] }) {
     const [isVisible, setIsVisible] = useState(false);
-    const [footerHeight, setFooterHeight] = useState(0);
+    const [_footerHeight, setFooterHeight] = useState(0);
     const footerRef = useRef(null);
     const visibleColumns = columns
         .filter((column) => Boolean(column?.title && column?.href))

package/dist/design-system/components/layout/index.d.ts

@@ -3,5 +3,6 @@ export { default as PageSection } from './PageSection/PageSection';
 export { default as SectionTitle } from './SectionTitle/SectionTitle';
 export { default as SiteFooter } from './Footer/Footer';
 export { default as Header } from './Header/Header';
+export { LayoutActions } from '../../../components/navigation/LayoutActions';
 export { default as MenuDrawer } from './MenuDrawer/MenuDrawer';
 export { default as SiteMain } from './Main/Main';

package/dist/design-system/components/layout/index.js

@@ -3,5 +3,6 @@ export { default as PageSection } from './PageSection/PageSection';
 export { default as SectionTitle } from './SectionTitle/SectionTitle';
 export { default as SiteFooter } from './Footer/Footer';
 export { default as Header } from './Header/Header';
+export { LayoutActions } from '../../../components/navigation/LayoutActions';
 export { default as MenuDrawer } from './MenuDrawer/MenuDrawer';
 export { default as SiteMain } from './Main/Main';

package/dist/design-system/components/navigation/SiteNav/SiteNav.js

@@ -78,5 +78,5 @@ export default function SiteNav({ items, navigateTo }) {
         const pathname = window.location.pathname;
         setCurrentPath(pathname.endsWith('/') && pathname !== '/' ? pathname.slice(0, -1) : pathname);
     }, []);
-    return renderNavItems(items, navigateTo, 0, 'nav', currentPath);
+    return renderNavItems(items ?? [], navigateTo, 0, 'nav', currentPath);
 }

package/dist/design-system/components/nxStyle.d.ts

@@ -40,6 +40,19 @@ export declare const nxLightStyle: {
         color: string;
         transition: string;
     };
+    code: {
+        backgroundColor: string;
+        color: string;
+    };
+    pre: {
+        backgroundColor: string;
+        color: string;
+        borderColor: string;
+    };
+    'pre code': {
+        backgroundColor: string;
+        color: string;
+    };
 };
 export declare const nxDarkStyle: {
     ':root': {
@@ -83,6 +96,19 @@ export declare const nxDarkStyle: {
         color: string;
         transition: string;
     };
+    code: {
+        backgroundColor: string;
+        color: string;
+    };
+    pre: {
+        backgroundColor: string;
+        color: string;
+        borderColor: string;
+    };
+    'pre code': {
+        backgroundColor: string;
+        color: string;
+    };
 };
 export declare function getNxStyle(mode: 'light' | 'dark'): {
     ':root': {
@@ -126,4 +152,17 @@ export declare function getNxStyle(mode: 'light' | 'dark'): {
         color: string;
         transition: string;
     };
+    code: {
+        backgroundColor: string;
+        color: string;
+    };
+    pre: {
+        backgroundColor: string;
+        color: string;
+        borderColor: string;
+    };
+    'pre code': {
+        backgroundColor: string;
+        color: string;
+    };
 };

package/dist/design-system/components/nxStyle.js

@@ -36,25 +36,38 @@ export const nxLightStyle = {
         '--focus-ring': '#5A5A5A',
     },
     body: {
-        backgroundColor: 'transparent',
+        backgroundColor: '#FFFFFF',
         color: '#1E1E1E',
         transition: 'background-color 0.2s ease',
     },
+    code: {
+        backgroundColor: '#F1F5F9',
+        color: '#0F172A',
+    },
+    pre: {
+        backgroundColor: '#F8FAFC',
+        color: '#0F172A',
+        borderColor: '#E2E8F0',
+    },
+    'pre code': {
+        backgroundColor: 'transparent',
+        color: 'inherit',
+    },
 };
 export const nxDarkStyle = {
     ':root': {
-        '--nx-ink': '#F5F5F5',
-        '--nx-ink-logo': '#F5F5F5',
-        '--nx-dusty': '#D9D9D9',
-        '--nx-body': '#E5E5E5',
-        '--nx-sign': '#CFCFCF',
-        '--nx-ash': '#B8B8B8',
-        '--nx-muted': '#A3A3A3',
-        '--nx-fog': '#8F8F8F',
+        '--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': '#111111',
         '--nx-paper': '#1C1C1C',
         '--nx-oat': '#4A4A4A',
-        '--nx-clay': '#F0F0F0',
+        '--nx-clay': '#38BDF8',
         '--nx-line': 'rgba(255, 255, 255, 0.16)',
         '--nx-line-soft': 'rgba(255, 255, 255, 0.10)',
         '--nx-glass': 'rgba(28, 28, 28, 0.72)',
@@ -75,14 +88,27 @@ export const nxDarkStyle = {
         '--surface-footer': '#1C1C1C',
         '--border-input': 'rgba(255, 255, 255, 0.22)',
         '--border-input-hover': 'rgba(255, 255, 255, 0.32)',
-        '--border-input-focus': '#F0F0F0',
-        '--focus-ring': '#F0F0F0',
+        '--border-input-focus': '#FFFFFF',
+        '--focus-ring': '#FFFFFF',
     },
     body: {
-        backgroundColor: 'transparent',
-        color: '#F7F7F7',
+        backgroundColor: '#111111',
+        color: '#F8FAFC',
         transition: 'background-color 0.2s ease',
     },
+    code: {
+        backgroundColor: '#1E293B',
+        color: '#F8FAFC',
+    },
+    pre: {
+        backgroundColor: '#0F172A',
+        color: '#FFFFFF',
+        borderColor: '#334155',
+    },
+    'pre code': {
+        backgroundColor: 'transparent',
+        color: 'inherit',
+    },
 };
 export function getNxStyle(mode) {
     return mode === 'dark' ? nxDarkStyle : nxLightStyle;

package/dist/design-system/types.d.ts

@@ -0,0 +1 @@
+export * from '../types';

package/dist/design-system/types.js

@@ -0,0 +1 @@
+export * from '../types';

package/dist/index.d.ts

@@ -2,6 +2,9 @@ export * from "./types";
 export * from "./lib/utils";
 export * from "./context";
 export * from "./components";
+export type { ButtonProps } from "./components/ui/Button";
+export type { CardProps } from "./components/ui/Card";
+export type { BashProps, BashCommand } from "./components/ui/Bash";
 export { default as DesignSystemProvider } from "./design-system/components/DesignSystemProvider/DesignSystemProvider";
 export { default as Heading } from "./design-system/components/headings/Heading/Heading";
 export { default as Logo } from "./design-system/components/brand/Logo/Logo";
@@ -12,9 +15,8 @@ export { default as ListItemText } from "./design-system/components/lists/ListIt
 export { default as ListSubheader } from "./design-system/components/lists/ListSubheader/ListSubheader";
 export { default as Alert } from "./design-system/components/feedback/Alert/Alert";
 export { default as Field } from "./design-system/components/feedback/Field/Field";
-export type { AlertProps } from "./design-system/components/feedback/Alert/types";
-export type { FieldProps } from "./design-system/components/feedback/Field/types";
 export { default as NxButton } from "./design-system/components/buttons/Button/Button";
+export { Button } from "./components/ui/Button";
 export { default as IconButton } from "./design-system/components/buttons/IconButton/IconButton";
 export { default as Breadcrumb } from "./design-system/components/navigation/Breadcrumb/Breadcrumb";
 export { default as Share } from "./design-system/components/navigation/Share/Share";
@@ -24,6 +26,6 @@ export { default as Swatch } from "./design-system/components/surfaces/Swatch/Sw
 export { default as SwatchGroup } from "./design-system/components/surfaces/SwatchGroup/SwatchGroup";
 export { default as Icon, ICON_NAMES } from "./design-system/components/icons/Icon/Icon";
 export { DesktopOnly, MobileOnly, useIsMobile } from "./design-system/components/responsive/Viewport/Viewport";
+export { Waiting, type WaitingProps } from "./components/navigation/Waiting";
 export { createAppTheme } from "./styles/theme";
 export type { IconName, IconProps } from "./design-system/components/icons/Icon/Icon";
-export type { DesignSystemMode, DesignSystemProviderProps, DesignSystemThemeConfig } from "./design-system/types";

package/dist/index.js

@@ -13,6 +13,7 @@ export { default as ListSubheader } from "./design-system/components/lists/ListS
 export { default as Alert } from "./design-system/components/feedback/Alert/Alert";
 export { default as Field } from "./design-system/components/feedback/Field/Field";
 export { default as NxButton } from "./design-system/components/buttons/Button/Button";
+export { Button } from "./components/ui/Button";
 export { default as IconButton } from "./design-system/components/buttons/IconButton/IconButton";
 export { default as Breadcrumb } from "./design-system/components/navigation/Breadcrumb/Breadcrumb";
 export { default as Share } from "./design-system/components/navigation/Share/Share";
@@ -22,4 +23,5 @@ export { default as Swatch } from "./design-system/components/surfaces/Swatch/Sw
 export { default as SwatchGroup } from "./design-system/components/surfaces/SwatchGroup/SwatchGroup";
 export { default as Icon, ICON_NAMES } from "./design-system/components/icons/Icon/Icon";
 export { DesktopOnly, MobileOnly, useIsMobile } from "./design-system/components/responsive/Viewport/Viewport";
+export { Waiting } from "./components/navigation/Waiting";
 export { createAppTheme } from "./styles/theme";

package/dist/styles/globals.css

@@ -11,15 +11,92 @@
     --primary-hover: #011f52;
     --secondary: #0F172A;
     --foreground: #0f172a;
-    --foreground-muted: #64748b;
+    --foreground-muted: #475569;
     --card-bg: #ffffff;
     --card-border: rgba(1, 40, 103, 0.1);
+    --surface-input: #ffffff;
+    --surface-input-border: #cbd5e1;
   }
 
-  * {
-    border-color: rgba(15, 23, 42, 0.12);
+  :where(.dark, .dark *),
+  .dark,
+  [data-theme="dark"] {
+    --background: #0F172A;
+    --background-secondary: #1E293B;
+    --paper: #1E293B;
+    --primary: #ffffff;
+    --primary-hover: #38BDF8;
+    --secondary: #F8FAFC;
+    --foreground: #F8FAFC;
+    --foreground-muted: #CBD5E1;
+    --card-bg: #1E293B;
+    --card-border: rgba(255, 255, 255, 0.12);
+    --surface-input: #1E293B;
+    --surface-input-border: rgba(255, 255, 255, 0.22);
   }
 
+  input[type="text"],
+  input[type="email"],
+  input[type="password"],
+  input[type="search"],
+  input[type="tel"],
+  input[type="url"],
+  input[type="number"],
+  input[type="date"],
+  input[type="datetime-local"],
+  input[type="month"],
+  input[type="time"],
+  input[type="week"],
+  textarea,
+  select {
+    background-color: var(--surface-input, #ffffff);
+    color: var(--foreground);
+  }
+
+  :where(.dark, .dark *) input[type="text"],
+  :where(.dark, .dark *) input[type="email"],
+  :where(.dark, .dark *) input[type="password"],
+  :where(.dark, .dark *) input[type="search"],
+  :where(.dark, .dark *) input[type="tel"],
+  :where(.dark, .dark *) input[type="url"],
+  :where(.dark, .dark *) input[type="number"],
+  :where(.dark, .dark *) input[type="date"],
+  :where(.dark, .dark *) input[type="datetime-local"],
+  :where(.dark, .dark *) input[type="month"],
+  :where(.dark, .dark *) input[type="time"],
+  :where(.dark, .dark *) input[type="week"],
+  :where(.dark, .dark *) textarea,
+  :where(.dark, .dark *) select,
+  .dark input[type="text"],
+  .dark input[type="email"],
+  .dark input[type="password"],
+  .dark input[type="search"],
+  .dark input[type="tel"],
+  .dark input[type="url"],
+  .dark input[type="number"],
+  .dark input[type="date"],
+  .dark input[type="datetime-local"],
+  .dark input[type="month"],
+  .dark input[type="time"],
+  .dark input[type="week"],
+  .dark textarea,
+  .dark select {
+    background-color: var(--surface-input, #1e293b);
+    color: var(--foreground);
+  }
+
+  h1, h2, h3, h4, h5, h6,
+  :where(.dark, .dark *) h1,
+  :where(.dark, .dark *) h2,
+  :where(.dark, .dark *) h3,
+  :where(.dark, .dark *) h4,
+  :where(.dark, .dark *) h5,
+  :where(.dark, .dark *) h6 {
+    font-weight: 400 !important;
+  }
+
+
+
   html {
     scroll-behavior: smooth;
     color-scheme: light;
@@ -65,6 +142,43 @@
     font-size: inherit;
   }
 
+  :where(.dark, .dark *) code,
+  .dark code {
+    background-color: #1e293b;
+    color: #f1f5f9;
+  }
+
+  :where(.dark, .dark *) pre,
+  .dark pre {
+    background-color: #0f172a;
+    color: #f8fafc;
+    border-color: #334155;
+  }
+
+  :where(.dark, .dark *) pre code,
+  .dark pre code {
+    background-color: transparent;
+    color: inherit;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root:not(.light) code {
+      background-color: #1e293b;
+      color: #f1f5f9;
+    }
+
+    :root:not(.light) pre {
+      background-color: #0f172a;
+      color: #f8fafc;
+      border-color: #334155;
+    }
+
+    :root:not(.light) pre code {
+      background-color: transparent;
+      color: inherit;
+    }
+  }
+
   ::selection {
     background-color: #012867;
     color: #ffffff;
@@ -89,3 +203,36 @@
 ::-webkit-scrollbar-thumb:hover {
   background: #94a3b8;
 }
+
+:where(.dark, .dark *) ::-webkit-scrollbar-track,
+.dark ::-webkit-scrollbar-track,
+.dark::-webkit-scrollbar-track {
+  background: #0f172a;
+}
+
+:where(.dark, .dark *) ::-webkit-scrollbar-thumb,
+.dark ::-webkit-scrollbar-thumb,
+.dark::-webkit-scrollbar-thumb {
+  background: #334155;
+}
+
+:where(.dark, .dark *) ::-webkit-scrollbar-thumb:hover,
+.dark ::-webkit-scrollbar-thumb:hover,
+.dark::-webkit-scrollbar-thumb:hover {
+  background: #475569;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not(.light) ::-webkit-scrollbar-track {
+    background: #0f172a;
+  }
+
+  :root:not(.light) ::-webkit-scrollbar-thumb {
+    background: #334155;
+  }
+
+  :root:not(.light) ::-webkit-scrollbar-thumb:hover {
+    background: #475569;
+  }
+}
+

package/dist/styles/site-layout.css

@@ -112,7 +112,7 @@
 .site-nav-item > a:hover,
 .site-nav-branch-summary a:hover,
 .site-footer a:hover {
-  text-decoration: underline;
+  text-decoration: none;
 }
 
 .site-header-mobile-nav {