@goldlabelapps/theme 1.0.1 → 3.2.0

package/dist/design-system/components/surfaces/Swatch/Swatch.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Typography } from '@mui/material';
+export default function Swatch({ label, value }) {
+    const resolvedValue = typeof value === 'string' && value.trim() ? value.trim() : 'transparent';
+    return (_jsxs(Box, { sx: {
+            borderRadius: '3px',
+            border: '1px solid rgba(40, 34, 28, 0.12)',
+            backgroundColor: 'background.paper',
+            p: 1.5,
+        }, children: [_jsx(Box, { "aria-hidden": "true", sx: {
+                    width: 48,
+                    aspectRatio: '1 / 1',
+                    borderRadius: '3px',
+                    border: '1px solid rgba(40, 34, 28, 0.12)',
+                    backgroundColor: resolvedValue,
+                    mb: 1,
+                } }), _jsx(Typography, { variant: "body2", sx: { fontWeight: 600, textTransform: 'capitalize' }, children: label }), _jsx(Typography, { variant: "caption", color: "text.secondary", sx: { fontFamily: 'monospace' }, children: value || 'not set' })] }));
+}

package/dist/design-system/components/surfaces/Swatch/types.d.ts

@@ -0,0 +1 @@
+export type { SwatchProps } from '../../../types';

package/dist/design-system/components/surfaces/Swatch/types.js

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

package/dist/design-system/components/surfaces/SwatchGroup/SwatchGroup.d.ts

@@ -0,0 +1,2 @@
+import type { SwatchGroupProps } from './types';
+export default function SwatchGroup({ items }: SwatchGroupProps): import("react").JSX.Element;

package/dist/design-system/components/surfaces/SwatchGroup/SwatchGroup.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import Swatch from '../Swatch/Swatch';
+export default function SwatchGroup({ items }) {
+    return (_jsx(Box, { sx: {
+            display: 'flex',
+            flexWrap: 'wrap',
+            gap: 1.5,
+            alignItems: 'flex-start',
+        }, children: items.map((item) => (_jsx(Swatch, { label: item.label, value: item.value }, item.label))) }));
+}

package/dist/design-system/components/surfaces/SwatchGroup/types.d.ts

@@ -0,0 +1 @@
+export type { SwatchGroupProps } from '../../../types';

package/dist/design-system/components/surfaces/SwatchGroup/types.js

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

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

@@ -0,0 +1,23 @@
+export { default as DesignSystemProvider } from './components/DesignSystemProvider/DesignSystemProvider';
+export * from './components/layout';
+export { default as Heading } from './components/headings/Heading/Heading';
+export { default as Logo } from './components/brand/Logo/Logo';
+export { default as List } from './components/lists/List/List';
+export { default as ListItem } from './components/lists/ListItem/ListItem';
+export { default as ListItemButton } from './components/lists/ListItemButton/ListItemButton';
+export { default as ListItemText } from './components/lists/ListItemText/ListItemText';
+export { default as ListSubheader } from './components/lists/ListSubheader/ListSubheader';
+export * from './components/feedback';
+export { default as NxButton } from './components/buttons/Button/Button';
+export { default as IconButton } from './components/buttons/IconButton/IconButton';
+export { default as Breadcrumb } from './components/navigation/Breadcrumb/Breadcrumb';
+export { default as Share } from './components/navigation/Share/Share';
+export { default as SiteNav } from './components/navigation/SiteNav/SiteNav';
+export { default as FeaturedImage } from './components/images/FeaturedImage/FeaturedImage';
+export { default as Swatch } from './components/surfaces/Swatch/Swatch';
+export { default as SwatchGroup } from './components/surfaces/SwatchGroup/SwatchGroup';
+export { default as Icon, ICON_NAMES } from './components/icons/Icon/Icon';
+export { DesktopOnly, MobileOnly, useIsMobile } from './components/responsive/Viewport/Viewport';
+export { createAppTheme } from '../styles/theme';
+export * from './types';
+export type { IconName, IconProps } from './components/icons/Icon/Icon';

package/dist/design-system/index.js

@@ -0,0 +1,22 @@
+export { default as DesignSystemProvider } from './components/DesignSystemProvider/DesignSystemProvider';
+export * from './components/layout';
+export { default as Heading } from './components/headings/Heading/Heading';
+export { default as Logo } from './components/brand/Logo/Logo';
+export { default as List } from './components/lists/List/List';
+export { default as ListItem } from './components/lists/ListItem/ListItem';
+export { default as ListItemButton } from './components/lists/ListItemButton/ListItemButton';
+export { default as ListItemText } from './components/lists/ListItemText/ListItemText';
+export { default as ListSubheader } from './components/lists/ListSubheader/ListSubheader';
+export * from './components/feedback';
+export { default as NxButton } from './components/buttons/Button/Button';
+export { default as IconButton } from './components/buttons/IconButton/IconButton';
+export { default as Breadcrumb } from './components/navigation/Breadcrumb/Breadcrumb';
+export { default as Share } from './components/navigation/Share/Share';
+export { default as SiteNav } from './components/navigation/SiteNav/SiteNav';
+export { default as FeaturedImage } from './components/images/FeaturedImage/FeaturedImage';
+export { default as Swatch } from './components/surfaces/Swatch/Swatch';
+export { default as SwatchGroup } from './components/surfaces/SwatchGroup/SwatchGroup';
+export { default as Icon, ICON_NAMES } from './components/icons/Icon/Icon';
+export { DesktopOnly, MobileOnly, useIsMobile } from './components/responsive/Viewport/Viewport';
+export { createAppTheme } from '../styles/theme';
+export * from './types';

package/dist/index.d.ts

@@ -2,3 +2,28 @@ export * from "./types";
 export * from "./lib/utils";
 export * from "./context";
 export * from "./components";
+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";
+export { default as List } from "./design-system/components/lists/List/List";
+export { default as ListItem } from "./design-system/components/lists/ListItem/ListItem";
+export { default as ListItemButton } from "./design-system/components/lists/ListItemButton/ListItemButton";
+export { default as ListItemText } from "./design-system/components/lists/ListItemText/ListItemText";
+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 { 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";
+export { default as SiteNav } from "./design-system/components/navigation/SiteNav/SiteNav";
+export { default as FeaturedImage } from "./design-system/components/images/FeaturedImage/FeaturedImage";
+export { default as Swatch } from "./design-system/components/surfaces/Swatch/Swatch";
+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 { 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

@@ -2,3 +2,24 @@ export * from "./types";
 export * from "./lib/utils";
 export * from "./context";
 export * from "./components";
+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";
+export { default as List } from "./design-system/components/lists/List/List";
+export { default as ListItem } from "./design-system/components/lists/ListItem/ListItem";
+export { default as ListItemButton } from "./design-system/components/lists/ListItemButton/ListItemButton";
+export { default as ListItemText } from "./design-system/components/lists/ListItemText/ListItemText";
+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 { default as NxButton } from "./design-system/components/buttons/Button/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";
+export { default as SiteNav } from "./design-system/components/navigation/SiteNav/SiteNav";
+export { default as FeaturedImage } from "./design-system/components/images/FeaturedImage/FeaturedImage";
+export { default as Swatch } from "./design-system/components/surfaces/Swatch/Swatch";
+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 { createAppTheme } from "./styles/theme";

package/dist/styles/site-layout.css

@@ -0,0 +1,354 @@
+:root {
+  color-scheme: light;
+}
+
+.site-shell {
+  --site-shell-inline-pad: clamp(1rem, 2.5vw, 2rem);
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  gap: 1.25rem;
+  padding: 1.25rem var(--site-shell-inline-pad) calc(6.25rem + env(safe-area-inset-bottom));
+  background: var(--surface-page);
+  color: var(--text-strong);
+}
+
+.site-header,
+.site-footer,
+.site-panel {
+  border: 1px solid var(--border-hairline);
+  background: var(--surface-paper);
+  box-shadow: var(--nx-shadow-card);
+  backdrop-filter: blur(10px);
+}
+
+.site-header {
+  border-radius: 3px;
+  padding: 1rem 1.25rem;
+}
+
+.site-header-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.site-brand {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex: 1;
+  min-width: 0;
+}
+
+.site-header-title-row {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex-wrap: wrap;
+  min-width: 0;
+}
+
+.site-home-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 3rem;
+  height: 3rem;
+  flex-shrink: 0;
+  border-radius: 3px;
+  overflow: hidden;
+  background: var(--surface-page);
+}
+
+.site-home-link img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.site-header-text-stack {
+  min-width: 0;
+}
+
+.site-header-text-stack h1 {
+  margin: 0 0 0.25rem;
+  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
+  line-height: 1.2;
+}
+
+.site-breadcrumbs ol {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  color: var(--text-subtle);
+  font-size: 0.92rem;
+}
+
+.site-header-description {
+  font-size: 0.9rem;
+  color: var(--text-muted);
+}
+
+.site-breadcrumbs li + li::before {
+  content: "/";
+  margin-right: 0.45rem;
+  color: var(--text-muted);
+}
+
+.site-breadcrumbs a,
+.site-nav-item > a,
+.site-nav-branch-summary a,
+.site-footer a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.site-breadcrumbs a:hover,
+.site-nav-item > a:hover,
+.site-nav-branch-summary a:hover,
+.site-footer a:hover {
+  text-decoration: underline;
+}
+
+.site-header-mobile-nav {
+  display: none;
+}
+
+.site-mobile-nav-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.6rem 0.9rem;
+  border-radius: 3px;
+  background: var(--surface-ink);
+  color: var(--text-on-ink);
+  cursor: pointer;
+  font-size: 0.92rem;
+  font-weight: 400;
+}
+
+.site-mobile-nav-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+  padding: 0.75rem;
+  border-radius: 3px;
+  background: color-mix(in srgb, var(--surface-page) 90%, var(--surface-paper) 10%);
+}
+
+.site-main {
+  display: grid;
+  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) minmax(220px, 280px);
+  grid-template-areas: 'left center right';
+  gap: 1.25rem;
+  align-items: start;
+  flex: 1 0 auto;
+}
+
+.site-col {
+  min-width: 0;
+}
+
+.site-col-left {
+  grid-area: left;
+}
+
+.site-col-center {
+  grid-area: center;
+}
+
+.site-col-right {
+  grid-area: right;
+}
+
+.site-panel {
+  border-radius: 3px;
+  padding: 1rem 1.1rem;
+}
+
+.site-nav-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.site-nav-item > a,
+.site-nav-branch-summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.25rem 0;
+  color: var(--text-strong);
+}
+
+.site-nav-item > a:hover,
+.site-nav-branch-summary:hover {
+  background: none;
+  transform: none;
+}
+
+.site-nav-branch summary {
+  list-style: none;
+}
+
+.site-nav-branch summary::-webkit-details-marker {
+  display: none;
+}
+
+.site-featured-image {
+  margin-bottom: 1rem;
+  overflow: hidden;
+  border-radius: 3px;
+  background: color-mix(in srgb, var(--surface-page) 90%, var(--surface-paper) 10%);
+}
+
+.site-featured-image-bg {
+  display: block;
+  width: 100%;
+  max-height: 320px;
+  object-fit: cover;
+}
+
+.site-sidebar-placeholder {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.site-sidebar-placeholder-label {
+  margin: 0;
+  font-weight: 400;
+}
+
+.site-sidebar-placeholder-text {
+  margin: 0;
+  color: var(--text-subtle);
+  line-height: 1.6;
+}
+
+.site-footer {
+  position: fixed;
+  top: auto;
+  left: 0;
+  width: 100vw;
+  transform: none;
+  bottom: 0;
+  z-index: 1300;
+  margin: 0;
+  border: 1px solid var(--border-hairline);
+  border-left: 0;
+  border-right: 0;
+  border-bottom: 0;
+  border-radius: 0;
+  background: color-mix(in srgb, var(--surface-page) 72%, transparent);
+  backdrop-filter: blur(14px) saturate(130%);
+  -webkit-backdrop-filter: blur(14px) saturate(130%);
+  box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.12);
+}
+
+.site-footer-toolbar {
+  width: min(1400px, calc(100% - (var(--site-shell-inline-pad) * 2)));
+  margin-inline: auto;
+  min-height: 0;
+  padding: 0.65rem 0 calc(0.65rem + env(safe-area-inset-bottom));
+  justify-content: center;
+}
+
+.site-footer-columns {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  align-items: flex-start;
+  justify-items: start;
+  gap: clamp(0.8rem, 2vw, 2rem);
+}
+
+.site-footer-section {
+  min-width: 0;
+  text-align: left;
+}
+
+.site-footer-section h3 {
+  margin: 0 0 0.2rem;
+  font-size: 0.8rem;
+  font-weight: 400;
+}
+
+.site-footer-section ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+
+@media (min-width: 1000px) {
+  .site-header-description {
+    font-size: 1.125rem;
+  }
+}
+
+@media (max-width: 999px) {
+  .site-main {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      'right'
+      'center';
+  }
+
+  .site-col-left {
+    display: none;
+  }
+
+  .site-col-right {
+    display: block;
+  }
+
+  .site-shell {
+    --site-shell-inline-pad: 0.9rem;
+    padding: 0.9rem 0.9rem calc(7.25rem + env(safe-area-inset-bottom));
+  }
+
+  .site-header-top {
+    flex-wrap: wrap;
+    align-items: flex-start;
+  }
+
+  .site-header-mobile-nav {
+    display: block;
+  }
+
+  .site-header {
+    padding: 0.9rem;
+  }
+
+  .site-header-title-row {
+    align-items: flex-start;
+  }
+
+  .site-home-link {
+    width: 2.75rem;
+    height: 2.75rem;
+  }
+}
+
+@media (max-width: 800px) {
+  .site-footer-columns {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0.8rem;
+  }
+}
+
+@media (max-width: 520px) {
+  .site-footer-columns {
+    grid-template-columns: 1fr;
+  }
+}

package/dist/styles/theme.d.ts

@@ -0,0 +1,3 @@
+import type { DesignSystemMode, DesignSystemThemeConfig } from '../design-system/types';
+export declare function createAppTheme(mode?: DesignSystemMode, themeConfig?: DesignSystemThemeConfig): import("@mui/material").Theme;
+export default createAppTheme;

package/dist/styles/theme.js

@@ -0,0 +1,120 @@
+import { createTheme } from '@mui/material/styles';
+export function createAppTheme(mode = 'light', themeConfig) {
+    const isDark = mode === 'dark';
+    const resolvedPrimary = themeConfig?.primary ?? (isDark ? '#F3F3F3' : '#5A5A5A');
+    const resolvedSecondary = themeConfig?.secondary ?? (isDark ? '#E3E3E3' : '#7A7A7A');
+    const palette = {
+        dark: {
+            primary: resolvedPrimary,
+            secondary: resolvedSecondary,
+            background: '#111111',
+            paper: '#1C1C1C',
+            text: '#F7F7F7',
+            textSecondary: '#C7C7C7',
+            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)',
+        },
+        light: {
+            primary: resolvedPrimary,
+            secondary: resolvedSecondary,
+            background: '#FFFFFF',
+            paper: '#FFFFFF',
+            text: '#1E1E1E',
+            textSecondary: '#5A5A5A',
+            border: 'rgba(31, 31, 31, 0.14)',
+            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)',
+        },
+    }[mode];
+    const resolvedPalette = {
+        ...palette,
+        background: themeConfig?.background ?? palette.background,
+        paper: themeConfig?.paper ?? palette.paper,
+        text: themeConfig?.text ?? palette.text,
+        textSecondary: themeConfig?.textSecondary ?? palette.textSecondary,
+    };
+    return createTheme({
+        palette: {
+            mode,
+            primary: {
+                main: resolvedPalette.primary,
+                contrastText: isDark ? '#111111' : '#FFFFFF',
+            },
+            secondary: {
+                main: resolvedPalette.secondary,
+                contrastText: isDark ? '#111111' : '#FFFFFF',
+            },
+            background: {
+                default: resolvedPalette.background,
+                paper: resolvedPalette.paper,
+            },
+            text: {
+                primary: resolvedPalette.text,
+                secondary: resolvedPalette.textSecondary,
+            },
+        },
+        shape: {
+            borderRadius: 3
+        },
+        typography: {
+            fontFamily: 'var(--font-title)',
+            h1: {
+                fontFamily: 'var(--font-title)',
+                fontWeight: 400,
+                fontSize: '2.5rem',
+                lineHeight: 1.05,
+                letterSpacing: '-0.02em',
+                color: resolvedPalette.secondary,
+            },
+            h2: {
+                fontFamily: 'var(--font-title)',
+                fontWeight: 400,
+                fontSize: '2rem',
+                lineHeight: 1.1,
+                color: resolvedPalette.secondary,
+            },
+            h3: {
+                fontFamily: 'var(--font-title)',
+                fontWeight: 400,
+                fontSize: '1.5rem',
+                color: resolvedPalette.secondary,
+            },
+            button: {
+                textTransform: 'none',
+                fontWeight: 400,
+                letterSpacing: '0.01em'
+            }
+        },
+        components: {
+            MuiButton: {
+                styleOverrides: {
+                    root: {
+                        borderRadius: '3px',
+                        padding: '0.7rem 1.2rem',
+                        boxShadow: resolvedPalette.buttonShadow,
+                    },
+                },
+            },
+            MuiCard: {
+                styleOverrides: {
+                    root: {
+                        border: `1px solid ${resolvedPalette.border}`,
+                        boxShadow: resolvedPalette.shadow,
+                    },
+                },
+            },
+            MuiPaper: {
+                styleOverrides: {
+                    root: {
+                        borderRadius: '3px',
+                        border: `1px solid ${resolvedPalette.borderSoft}`,
+                    },
+                },
+            },
+        },
+    });
+}
+export default createAppTheme;