@goldlabelapps/theme 3.2.0 → 3.2.8

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

@@ -36,25 +36,45 @@ export const nxLightStyle = {
         '--focus-ring': '#5A5A5A',
     },
     body: {
-        backgroundColor: 'transparent',
+        backgroundColor: '#FFFFFF',
         color: '#1E1E1E',
         transition: 'background-color 0.2s ease',
     },
+    a: {
+        color: '#012867',
+        textDecoration: 'none',
+        '&:hover': {
+            color: '#011f52',
+        },
+    },
+    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 +95,34 @@ 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',
     },
+    a: {
+        color: '#F8FAFC',
+        textDecoration: 'none',
+        '&:hover': {
+            color: '#E2E8F0',
+        },
+    },
+    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/index.d.ts

@@ -15,6 +15,7 @@ export { default as Field } from "./design-system/components/feedback/Field/Fiel
 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";

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";

package/dist/styles/globals.css

@@ -11,15 +11,94 @@
     --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;
+  }
+
+  :where(.dark, .dark *),
+  .dark,
+  [data-theme="dark"] {
+    --background: #0F172A;
+    --background-secondary: #1E293B;
+    --paper: #1E293B;
+    --primary: #F8FAFC;
+    --primary-hover: #E2E8F0;
+    --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);
   }
 
   * {
     border-color: rgba(15, 23, 42, 0.12);
   }
 
+  a {
+    color: var(--primary);
+    text-decoration: none;
+    transition: color 0.15s ease;
+  }
+
+  a:hover {
+    color: var(--primary-hover);
+  }
+
   html {
     scroll-behavior: smooth;
     color-scheme: light;
@@ -65,6 +144,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 +205,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 {

package/dist/styles/theme.js

@@ -1,20 +1,44 @@
 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 resolvedPrimary = themeConfig?.primary ?? (isDark ? '#FFFFFF' : '#5A5A5A');
+    const resolvedSecondary = themeConfig?.secondary ?? (isDark ? '#F5F5F5' : '#7A7A7A');
     const palette = {
         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,6 +51,30 @@ 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 resolvedPalette = {
@@ -47,6 +95,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,
@@ -89,6 +141,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goldlabelapps/theme",
-  "version": "3.2.0",
+  "version": "3.2.8",
   "description": "NX° theme tokens, UI primitives, and layout showcase blocks",
   "publishConfig": {
     "access": "public"
@@ -42,10 +42,10 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsc -p tsconfig.build.json && mkdir -p dist/styles && cp src/styles/*.css dist/styles/",
+    "build": "pnpm --dir ../flash 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,12 @@
     "react-dom": ">=18.0.0"
   },
   "dependencies": {
+    "@goldlabelapps/flash": "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"
   },