@stevederico/skateboard-ui 5.0.0 → 5.2.2

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+5.2.2
+
+  Fix CI install
+
+5.2.1
+
+  Publish from CI
+
+5.2.0
+
+  Add live list option
+  Reload stale builds
+  Raise dark contrast
+  Bolder page titles
+
+5.1.0
+
+  Add loadLegal option
+  Lazy legal TextView routes
+  has* legal footer flags
+
 # CHANGELOG
 
 5.0.0

package/dist/App.d.ts

@@ -1,5 +1,7 @@
 import type { ComponentType, ReactNode } from 'react';
-import type { SkateboardConstants } from './components/core/Utilities.js';
+import type { SkateboardConstants, LegalTexts } from './components/core/Utilities.js';
+/** Re-export for consumers that type `loadLegal`. */
+export type { LegalTexts } from './components/core/Utilities.js';
 /** A route rendered under /app (config.appRoutes). */
 export interface AppRoute {
     path: string;
@@ -26,6 +28,12 @@ export interface CreateSkateboardAppConfig {
         children?: ReactNode;
     }>;
     overrides?: AppOverrides;
+    /**
+     * Lazy-load legal document bodies so they stay out of the main JS chunk.
+     * When set, `/terms` `/privacy` `/eula` `/subs` call this on first visit.
+     * Eager `constants.termsOfService` etc. remain supported as a fallback.
+     */
+    loadLegal?: () => Promise<LegalTexts>;
 }
 /**
  * Bootstrap and render a skateboard-ui application.
@@ -49,6 +57,8 @@ export interface CreateSkateboardAppConfig {
  * @param {React.ComponentType} [config.overrides.notFound] - Replace NotFound
  * @param {React.ComponentType} [config.overrides.authOverlay] - Replace AuthOverlay
  *
+ * @param {() => Promise<LegalTexts>} [config.loadLegal] - Lazy-load legal document bodies
+ *
  * @example
  * import { createSkateboardApp } from '@stevederico/skateboard-ui/App';
  * import constants from './constants.json';
@@ -59,6 +69,14 @@ export interface CreateSkateboardAppConfig {
  * });
  *
  * @example
+ * // Keep legal text out of the main chunk
+ * createSkateboardApp({
+ *   constants,
+ *   appRoutes: [{ path: 'home', element: <HomeView /> }],
+ *   loadLegal: () => import('./legal.json'),
+ * });
+ *
+ * @example
  * // Override built-in views
  * createSkateboardApp({
  *   constants,
@@ -69,4 +87,4 @@ export interface CreateSkateboardAppConfig {
  *   }
  * });
  */
-export declare function createSkateboardApp({ constants, appRoutes, defaultRoute, landingPage, wrapper: Wrapper, overrides }: CreateSkateboardAppConfig): void;
+export declare function createSkateboardApp({ constants, appRoutes, defaultRoute, landingPage, wrapper: Wrapper, overrides, loadLegal }: CreateSkateboardAppConfig): void;

package/dist/App.js

@@ -6,7 +6,7 @@ import { getState } from './components/core/Context.js';
 import { ThemeProvider } from './components/core/ThemeProvider.js';
 import Layout from './components/layout/Layout.js';
 import LandingView from './components/views/LandingView.js';
-import TextView from './components/views/TextView.js';
+import LegalRoute from './components/views/LegalRoute.js';
 import SignUpView from './components/views/SignUpView.js';
 import SignInView from './components/views/SignInView.js';
 import SignOutView from './components/views/SignOutView.js';
@@ -39,7 +39,7 @@ function AuthRedirect() {
     }, [dispatch, navigate, location.state]);
     return null;
 }
-function App({ constants, appRoutes, defaultRoute, landingPage, overrides = {} }) {
+function App({ constants, appRoutes, defaultRoute, landingPage, overrides = {}, loadLegal }) {
     const location = useLocation();
     // document.title is set by useAppSetup (on navigation) — single source of truth.
     useAppSetup(location);
@@ -53,7 +53,7 @@ function App({ constants, appRoutes, defaultRoute, landingPage, overrides = {} }
     // An explicit override always wins, so consumers can supply custom auth pages.
     const SignInComponent = overrides.signIn || (isAuthOverlayEnabled() ? AuthRedirect : SignInView);
     const SignUpComponent = overrides.signUp || (isAuthOverlayEnabled() ? AuthRedirect : SignUpView);
-    return (_jsxs(Routes, { children: [_jsxs(Route, { element: _jsx(LayoutComponent, {}), children: [_jsx(Route, { path: "/console", element: _jsx(Navigate, { to: "/app", replace: true }) }), _jsxs(Route, { path: "/app", element: _jsx(ProtectedRoute, {}), children: [_jsx(Route, { index: true, element: _jsx(Navigate, { to: defaultRoute, replace: true }) }), appRoutes.map(({ path, element }) => (_jsx(Route, { path: path, element: element }, path))), _jsx(Route, { path: "settings", element: _jsx(SettingsComponent, {}) }), _jsx(Route, { path: "payment", element: _jsx(PaymentComponent, {}) })] })] }), _jsx(Route, { path: "/", element: landingPage || _jsx(LandingView, {}) }), _jsx(Route, { path: "/signin", element: _jsx(SignInComponent, {}) }), _jsx(Route, { path: "/signup", element: _jsx(SignUpComponent, {}) }), _jsx(Route, { path: "/signout", element: _jsx(SignOutComponent, {}) }), _jsx(Route, { path: "/terms", element: _jsx(TextView, { details: constants.termsOfService }) }), _jsx(Route, { path: "/privacy", element: _jsx(TextView, { details: constants.privacyPolicy }) }), _jsx(Route, { path: "/eula", element: _jsx(TextView, { details: constants.EULA }) }), _jsx(Route, { path: "/subs", element: _jsx(TextView, { details: constants.subscriptionDetails }) }), _jsx(Route, { path: "*", element: _jsx(NotFoundComponent, {}) })] }));
+    return (_jsxs(Routes, { children: [_jsxs(Route, { element: _jsx(LayoutComponent, {}), children: [_jsx(Route, { path: "/console", element: _jsx(Navigate, { to: "/app", replace: true }) }), _jsxs(Route, { path: "/app", element: _jsx(ProtectedRoute, {}), children: [_jsx(Route, { index: true, element: _jsx(Navigate, { to: defaultRoute, replace: true }) }), appRoutes.map(({ path, element }) => (_jsx(Route, { path: path, element: element }, path))), _jsx(Route, { path: "settings", element: _jsx(SettingsComponent, {}) }), _jsx(Route, { path: "payment", element: _jsx(PaymentComponent, {}) })] })] }), _jsx(Route, { path: "/", element: landingPage || _jsx(LandingView, {}) }), _jsx(Route, { path: "/signin", element: _jsx(SignInComponent, {}) }), _jsx(Route, { path: "/signup", element: _jsx(SignUpComponent, {}) }), _jsx(Route, { path: "/signout", element: _jsx(SignOutComponent, {}) }), _jsx(Route, { path: "/terms", element: _jsx(LegalRoute, { field: "termsOfService", fallback: constants.termsOfService, loadLegal: loadLegal }) }), _jsx(Route, { path: "/privacy", element: _jsx(LegalRoute, { field: "privacyPolicy", fallback: constants.privacyPolicy, loadLegal: loadLegal }) }), _jsx(Route, { path: "/eula", element: _jsx(LegalRoute, { field: "EULA", fallback: constants.EULA, loadLegal: loadLegal }) }), _jsx(Route, { path: "/subs", element: _jsx(LegalRoute, { field: "subscriptionDetails", fallback: constants.subscriptionDetails, loadLegal: loadLegal }) }), _jsx(Route, { path: "*", element: _jsx(NotFoundComponent, {}) })] }));
 }
 /**
  * Bootstrap and render a skateboard-ui application.
@@ -77,6 +77,8 @@ function App({ constants, appRoutes, defaultRoute, landingPage, overrides = {} }
  * @param {React.ComponentType} [config.overrides.notFound] - Replace NotFound
  * @param {React.ComponentType} [config.overrides.authOverlay] - Replace AuthOverlay
  *
+ * @param {() => Promise<LegalTexts>} [config.loadLegal] - Lazy-load legal document bodies
+ *
  * @example
  * import { createSkateboardApp } from '@stevederico/skateboard-ui/App';
  * import constants from './constants.json';
@@ -87,6 +89,14 @@ function App({ constants, appRoutes, defaultRoute, landingPage, overrides = {} }
  * });
  *
  * @example
+ * // Keep legal text out of the main chunk
+ * createSkateboardApp({
+ *   constants,
+ *   appRoutes: [{ path: 'home', element: <HomeView /> }],
+ *   loadLegal: () => import('./legal.json'),
+ * });
+ *
+ * @example
  * // Override built-in views
  * createSkateboardApp({
  *   constants,
@@ -97,11 +107,27 @@ function App({ constants, appRoutes, defaultRoute, landingPage, overrides = {} }
  *   }
  * });
  */
-export function createSkateboardApp({ constants, appRoutes, defaultRoute = appRoutes[0]?.path || 'home', landingPage, wrapper: Wrapper, overrides }) {
+export function createSkateboardApp({ constants, appRoutes, defaultRoute = appRoutes[0]?.path || 'home', landingPage, wrapper: Wrapper, overrides, loadLegal }) {
     // Validate constants before initialization
     validateConstants(constants);
     // Initialize utilities with constants
     initializeUtilities(constants);
+    // A deploy replaces the hashed chunk files. A page opened before it asks
+    // for chunks that are gone ("Importing a module script failed"); reload
+    // once to pick up the new build instead of showing a broken route.
+    window.addEventListener('vite:preloadError', (event) => {
+        event.preventDefault();
+        try {
+            const last = Number(sessionStorage.getItem('skateboard-chunk-reload') || 0);
+            if (Date.now() - last < 10_000)
+                return;
+            sessionStorage.setItem('skateboard-chunk-reload', String(Date.now()));
+        }
+        catch {
+            // Storage can be unavailable (private mode, some web views); reload anyway
+        }
+        window.location.reload();
+    });
     // Prevent theme flash by setting dark class before React hydrates
     // This runs synchronously before render, reading from localStorage or system preference
     const storageKey = 'theme';
@@ -112,5 +138,5 @@ export function createSkateboardApp({ constants, appRoutes, defaultRoute = appRo
     const container = document.getElementById('root');
     const root = createRoot(container);
     const AuthOverlayComponent = overrides?.authOverlay || AuthOverlay;
-    root.render(_jsx(ErrorBoundary, { children: _jsx(ThemeProvider, { attribute: "class", defaultTheme: "system", enableSystem: true, children: _jsx(ContextProvider, { constants: constants, children: Wrapper ? (_jsx(Wrapper, { children: _jsxs(Router, { children: [_jsx(AuthOverlayComponent, {}), _jsx(App, { constants: constants, appRoutes: appRoutes, defaultRoute: defaultRoute, landingPage: landingPage, overrides: overrides })] }) })) : (_jsxs(Router, { children: [_jsx(AuthOverlayComponent, {}), _jsx(App, { constants: constants, appRoutes: appRoutes, defaultRoute: defaultRoute, landingPage: landingPage, overrides: overrides })] })) }) }) }));
+    root.render(_jsx(ErrorBoundary, { children: _jsx(ThemeProvider, { attribute: "class", defaultTheme: "system", enableSystem: true, children: _jsx(ContextProvider, { constants: constants, children: Wrapper ? (_jsx(Wrapper, { children: _jsxs(Router, { children: [_jsx(AuthOverlayComponent, {}), _jsx(App, { constants: constants, appRoutes: appRoutes, defaultRoute: defaultRoute, landingPage: landingPage, overrides: overrides, loadLegal: loadLegal })] }) })) : (_jsxs(Router, { children: [_jsx(AuthOverlayComponent, {}), _jsx(App, { constants: constants, appRoutes: appRoutes, defaultRoute: defaultRoute, landingPage: landingPage, overrides: overrides, loadLegal: loadLegal })] })) }) }) }));
 }

package/dist/components/core/Utilities.d.ts

@@ -28,6 +28,13 @@ export interface StripeProduct {
     features?: string[];
     [key: string]: unknown;
 }
+/** Legal document bodies that can be loaded lazily via `loadLegal`. */
+export interface LegalTexts {
+    termsOfService?: string;
+    privacyPolicy?: string;
+    EULA?: string;
+    subscriptionDetails?: string;
+}
 /**
  * App configuration object passed to createSkateboardApp / initializeUtilities.
  * Required fields are enforced at runtime by validateConstants(); everything
@@ -56,6 +63,14 @@ export interface SkateboardConstants {
     privacyPolicy?: string;
     EULA?: string;
     subscriptionDetails?: string;
+    /** Show Privacy footer link when the body is loaded via `loadLegal` instead of constants. */
+    hasPrivacyPolicy?: boolean;
+    /** Show Terms footer link when the body is loaded via `loadLegal` instead of constants. */
+    hasTermsOfService?: boolean;
+    /** Show EULA footer link when the body is loaded via `loadLegal` instead of constants. */
+    hasEULA?: boolean;
+    /** Show subscription-details link when the body is loaded via `loadLegal`. */
+    hasSubscriptionDetails?: boolean;
     navLinks?: ConstantsLink[];
     footerLinks?: ConstantsLink[];
     pricing?: {
@@ -345,13 +360,24 @@ export declare function apiRequestWithParams<T = any>(endpoint: string, params?:
  * @throws {Error} - If required fields are missing or invalid
  */
 export declare function validateConstants(constants: SkateboardConstants): SkateboardConstants;
+/** Options for {@link useListData}. */
+export interface ListDataOptions {
+    /**
+     * Keep the list fresh: refetch quietly every this many milliseconds while
+     * the page is visible, and again when the user returns to it. `true`
+     * means 60 seconds. Quiet refetches skip the loading state and keep the
+     * last good rows on error, so new items just appear.
+     */
+    live?: boolean | number;
+}
 /**
- * Standard list data fetcher with optional sorting
+ * Standard list data fetcher with optional sorting and live refresh
  * @param {string} endpoint - API endpoint to fetch from
  * @param {function} sortFn - Optional sort function for results
+ * @param {ListDataOptions} options - `live` turns on quiet periodic refetch
  * @returns {object} - { data, loading, error, refetch }
  */
-export declare function useListData<T = any>(endpoint: string, sortFn?: ((a: T, b: T) => number) | null): {
+export declare function useListData<T = any>(endpoint: string, sortFn?: ((a: T, b: T) => number) | null, options?: ListDataOptions): {
     data: T[];
     loading: boolean;
     error: string | null;

package/dist/components/core/Utilities.js

@@ -838,22 +838,24 @@ export function validateConstants(constants) {
     }
     return constants;
 }
-// ===== REACT HOOKS =====
 /**
- * Standard list data fetcher with optional sorting
+ * Standard list data fetcher with optional sorting and live refresh
  * @param {string} endpoint - API endpoint to fetch from
  * @param {function} sortFn - Optional sort function for results
+ * @param {ListDataOptions} options - `live` turns on quiet periodic refetch
  * @returns {object} - { data, loading, error, refetch }
  */
-export function useListData(endpoint, sortFn = null) {
+export function useListData(endpoint, sortFn = null, options = {}) {
     const [data, setData] = useState([]);
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState(null);
     // Keep sortFn in a ref so an inline sort function doesn't retrigger the fetch effect every render
     const sortFnRef = useRef(sortFn);
     sortFnRef.current = sortFn;
-    const fetchData = async (signal) => {
-        setLoading(true);
+    const liveMs = options.live === true ? 60_000 : typeof options.live === 'number' ? options.live : 0;
+    const fetchData = async (signal, quiet = false) => {
+        if (!quiet)
+            setLoading(true);
         try {
             const result = await apiRequest(endpoint, { signal });
             const sort = sortFnRef.current;
@@ -865,17 +867,32 @@ export function useListData(endpoint, sortFn = null) {
             // Ignore abort errors (DOMException in the browser, not an Error)
             if ((err instanceof DOMException || err instanceof Error) && err.name === 'AbortError')
                 return;
-            setError(err instanceof Error ? err.message : String(err));
+            // A failed quiet refresh keeps showing the last good rows
+            if (!quiet)
+                setError(err instanceof Error ? err.message : String(err));
         }
         finally {
-            setLoading(false);
+            if (!quiet)
+                setLoading(false);
         }
     };
     useEffect(() => {
         const controller = new AbortController();
         fetchData(controller.signal);
-        return () => controller.abort();
-    }, [endpoint]);
+        if (liveMs <= 0)
+            return () => controller.abort();
+        const tick = () => {
+            if (document.visibilityState === 'visible')
+                fetchData(controller.signal, true);
+        };
+        const timer = setInterval(tick, liveMs);
+        document.addEventListener('visibilitychange', tick);
+        return () => {
+            controller.abort();
+            clearInterval(timer);
+            document.removeEventListener('visibilitychange', tick);
+        };
+    }, [endpoint, liveMs]);
     return { data, loading, error, refetch: () => fetchData() };
 }
 // ===== UI VISIBILITY CONTROLS =====

package/dist/components/layout/Header.js

@@ -4,6 +4,6 @@ import { Button } from "../../ui/button.js";
 import { Badge } from "../../ui/badge.js";
 import { cn } from "../../shadcn/lib/utils.js";
 function Header({ title, buttonTitle, onButtonTitleClick, buttonClass, className, children, ...props }) {
-    return (_jsxs(_Fragment, { children: [_jsx("header", { className: cn("flex h-(--header-height) shrink-0 items-center gap-2", className), ...props, children: _jsxs("div", { className: "flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6", children: [_jsx("h1", { className: "text-lg font-medium", children: title }), _jsxs("div", { className: "ml-auto flex items-center gap-2", children: [typeof buttonTitle !== "undefined" && (_jsx(Button, { variant: "ghost", size: "sm", className: buttonClass || "", onClick: onButtonTitleClick, children: buttonTitle })), children] })] }) }), _jsx(Separator, {})] }));
+    return (_jsxs(_Fragment, { children: [_jsx("header", { className: cn("flex h-(--header-height) shrink-0 items-center gap-2", className), ...props, children: _jsxs("div", { className: "flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6", children: [_jsx("h1", { className: "text-[1.625rem] leading-8 font-extrabold tracking-tight", children: title }), _jsxs("div", { className: "ml-auto flex items-center gap-2", children: [typeof buttonTitle !== "undefined" && (_jsx(Button, { variant: "ghost", size: "sm", className: buttonClass || "", onClick: onButtonTitleClick, children: buttonTitle })), children] })] }) }), _jsx(Separator, {})] }));
 }
 export default Header;

package/dist/components/views/LandingView.js

@@ -54,9 +54,9 @@ export default function LandingView() {
         ...((constants.stripeProducts?.length ?? 0) > 0 ? [{ label: 'Pricing', href: '#pricing' }] : []),
     ];
     const footerLinks = constants.footerLinks || [
-        ...(constants.privacyPolicy ? [PRIVACY_LINK] : []),
-        ...(constants.termsOfService ? [TERMS_LINK] : []),
-        ...(constants.EULA ? [EULA_LINK] : []),
+        ...(constants.privacyPolicy || constants.hasPrivacyPolicy ? [PRIVACY_LINK] : []),
+        ...(constants.termsOfService || constants.hasTermsOfService ? [TERMS_LINK] : []),
+        ...(constants.EULA || constants.hasEULA ? [EULA_LINK] : []),
     ];
     const items = constants.features?.items || [];
     const sp = (constants.stripeProducts || [])[0];

package/dist/components/views/LegalRoute.d.ts

@@ -0,0 +1,22 @@
+import type { LegalTexts } from '../core/Utilities.js';
+/** Which legal blob a route should render. */
+export type LegalField = keyof LegalTexts;
+export interface LegalRouteProps {
+    /** Field to read from the loaded (or eager) legal texts. */
+    field: LegalField;
+    /** Eager text from constants — used when `loadLegal` is absent. */
+    fallback?: string;
+    /** Optional lazy loader; preferred over embedding legal text in the main chunk. */
+    loadLegal?: () => Promise<LegalTexts>;
+}
+/**
+ * Route element for `/terms`, `/privacy`, `/eula`, and `/subs`.
+ *
+ * When `loadLegal` is provided the body is fetched on first visit under a
+ * spinner; otherwise `fallback` (eager constants) is rendered immediately so
+ * skateboard-ui 5.0 apps keep working unchanged.
+ *
+ * @param props - Field name plus optional loader / eager fallback
+ * @returns TextView once the document is available
+ */
+export default function LegalRoute({ field, fallback, loadLegal }: LegalRouteProps): import("react").JSX.Element;

package/dist/components/views/LegalRoute.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import TextView from './TextView.js';
+import { Spinner } from '../../ui/spinner.js';
+/**
+ * Route element for `/terms`, `/privacy`, `/eula`, and `/subs`.
+ *
+ * When `loadLegal` is provided the body is fetched on first visit under a
+ * spinner; otherwise `fallback` (eager constants) is rendered immediately so
+ * skateboard-ui 5.0 apps keep working unchanged.
+ *
+ * @param props - Field name plus optional loader / eager fallback
+ * @returns TextView once the document is available
+ */
+export default function LegalRoute({ field, fallback, loadLegal }) {
+    const [details, setDetails] = useState(loadLegal ? null : (fallback ?? ''));
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        if (!loadLegal) {
+            setDetails(fallback ?? '');
+            return;
+        }
+        let cancelled = false;
+        loadLegal()
+            .then((legal) => {
+            if (cancelled)
+                return;
+            const value = legal[field];
+            setDetails(typeof value === 'string' ? value : '');
+        })
+            .catch((err) => {
+            if (cancelled)
+                return;
+            console.error('Failed to load legal text', err);
+            setError('Could not load this document. Try again.');
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [field, fallback, loadLegal]);
+    if (error) {
+        return (_jsx("div", { className: "flex flex-1 items-center justify-center p-8 text-sm text-muted-foreground", role: "alert", children: error }));
+    }
+    if (details === null) {
+        return (_jsx("div", { className: "flex flex-1 items-center justify-center p-8", role: "status", "aria-label": "Loading", children: _jsx(Spinner, {}) }));
+    }
+    return _jsx(TextView, { details: details });
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stevederico/skateboard-ui",
   "private": false,
-  "version": "5.0.0",
+  "version": "5.2.2",
   "type": "module",
   "exports": {
     ".": {

package/styles.css

@@ -170,22 +170,22 @@
 .dark {
   --background: oklch(0.05 0 0);
   --foreground: oklch(0.985 0 0);
-  --card: oklch(0.12 0 0);
+  --card: oklch(0.19 0 0);
   --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.12 0 0);
+  --popover: oklch(0.19 0 0);
   --popover-foreground: oklch(0.985 0 0);
   --primary: oklch(0.985 0 0);
   --primary-foreground: oklch(0.05 0 0);
-  --secondary: oklch(0.18 0 0);
+  --secondary: oklch(0.28 0 0);
   --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.18 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.2 0 0);
+  --muted: oklch(0.28 0 0);
+  --muted-foreground: oklch(0.8 0 0);
+  --accent: oklch(0.28 0 0);
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.396 0.141 25.723);
   --destructive-foreground: oklch(0.637 0.237 25.331);
-  --border: oklch(0.32 0 0);
-  --input: oklch(0.30 0 0);
+  --border: oklch(0.5 0 0);
+  --input: oklch(0.5 0 0);
   --ring: oklch(0.439 0 0);
   --chart-1: oklch(0.488 0.243 264.376);
   --chart-2: oklch(0.696 0.17 162.48);
@@ -207,22 +207,22 @@
   :root:not(.light) {
     --background: oklch(0.05 0 0);
     --foreground: oklch(0.985 0 0);
-    --card: oklch(0.12 0 0);
+    --card: oklch(0.19 0 0);
     --card-foreground: oklch(0.985 0 0);
-    --popover: oklch(0.12 0 0);
+    --popover: oklch(0.19 0 0);
     --popover-foreground: oklch(0.985 0 0);
     --primary: oklch(0.985 0 0);
     --primary-foreground: oklch(0.05 0 0);
-    --secondary: oklch(0.18 0 0);
+    --secondary: oklch(0.28 0 0);
     --secondary-foreground: oklch(0.985 0 0);
-    --muted: oklch(0.18 0 0);
-    --muted-foreground: oklch(0.708 0 0);
-    --accent: oklch(0.2 0 0);
+    --muted: oklch(0.28 0 0);
+    --muted-foreground: oklch(0.8 0 0);
+    --accent: oklch(0.28 0 0);
     --accent-foreground: oklch(0.985 0 0);
     --destructive: oklch(0.396 0.141 25.723);
     --destructive-foreground: oklch(0.637 0.237 25.331);
-    --border: oklch(0.32 0 0);
-    --input: oklch(0.30 0 0);
+    --border: oklch(0.5 0 0);
+    --input: oklch(0.5 0 0);
     --ring: oklch(0.439 0 0);
     --chart-1: oklch(0.488 0.243 264.376);
     --chart-2: oklch(0.696 0.17 162.48);