diff --git a/resources/js/components/themes/theme-preview.tsx b/resources/js/components/themes/theme-preview.tsx
index 6973199..e35cfda 100644
--- a/resources/js/components/themes/theme-preview.tsx
+++ b/resources/js/components/themes/theme-preview.tsx
@@ -1,9 +1,9 @@
-import { useThemeStore } from '@/lib/theme/store';
-import { tokenValueToCss } from '@/lib/theme/color';
-import { Button } from '@/components/ui/button';
import { Sun, Moon } from 'lucide-react';
import { useMemo, useState } from 'react';
import CardsPreview from '@/components/preview/cards-preview';
+import { Button } from '@/components/ui/button';
+import { tokenValueToCss } from '@/lib/theme/color';
+import { useThemeStore } from '@/lib/theme/store';
const COLOR_TOKENS = [
'background', 'foreground',
@@ -27,6 +27,7 @@ function buildVars(
for (const token of COLOR_TOKENS) {
const val = colors[token];
+
if (val) {
const css = tokenValueToCss(val);
vars[`--${token}`] = css;
diff --git a/resources/js/components/themes/typography-controls.tsx b/resources/js/components/themes/typography-controls.tsx
index e6df266..861037e 100644
--- a/resources/js/components/themes/typography-controls.tsx
+++ b/resources/js/components/themes/typography-controls.tsx
@@ -7,14 +7,14 @@ import {
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
+import { Slider } from '@/components/ui/slider';
+import { useThemeStore } from '@/lib/theme/store';
import {
loadGoogleFont,
MONO_FONTS,
SANS_FONTS,
SERIF_FONTS,
} from './font-list';
-import { Slider } from '@/components/ui/slider';
-import { useThemeStore } from '@/lib/theme/store';
const SCALES = [
{ name: 'Minor Second', value: 1.067 },
@@ -129,13 +129,11 @@ export function TypographyControls() {
}
function FontSelect({
- kind,
label,
options,
value,
onChange,
}: {
- kind: string;
label: string;
options: string[];
value: string;
diff --git a/resources/js/layouts/main/main-footer.tsx b/resources/js/layouts/main/main-footer.tsx
index 3f1dbff..a1354f8 100644
--- a/resources/js/layouts/main/main-footer.tsx
+++ b/resources/js/layouts/main/main-footer.tsx
@@ -1,11 +1,11 @@
import { Link } from '@inertiajs/react';
import { GithubIcon } from 'lucide-react';
+import XIcon from '@/components/icons/x-icon';
import { Button } from '@/components/ui/button';
import { PlaceholderPattern } from '@/components/ui/placeholder-pattern';
import MainWrapper from '@/layouts/main/main-wrapper';
import { home } from '@/routes';
-import XIcon from '@/components/icons/x-icon';
const navLinks = [
{ href: '#', label: 'Features' },
diff --git a/resources/js/layouts/main/theme/main-theme-card.tsx b/resources/js/layouts/main/theme/main-theme-card.tsx
index 029b2a7..f82a94c 100644
--- a/resources/js/layouts/main/theme/main-theme-card.tsx
+++ b/resources/js/layouts/main/theme/main-theme-card.tsx
@@ -1,4 +1,5 @@
-import { motion, type Variants } from 'motion/react';
+import { motion } from 'motion/react';
+import type {Variants} from 'motion/react';
import {
Card,
CardContent,
diff --git a/resources/js/layouts/main/theme/main-theme-search.tsx b/resources/js/layouts/main/theme/main-theme-search.tsx
index 918f35e..d436588 100644
--- a/resources/js/layouts/main/theme/main-theme-search.tsx
+++ b/resources/js/layouts/main/theme/main-theme-search.tsx
@@ -48,7 +48,9 @@ function MainThemeSearch({
}, [debouncedSearch, selectedTags]);
useEffect(() => {
- if (!showFilters) return;
+ if (!showFilters) {
+return;
+}
const handler = (e: MouseEvent) => {
if (
diff --git a/resources/js/lib/theme/color.ts b/resources/js/lib/theme/color.ts
index 8552a17..367f9b3 100644
--- a/resources/js/lib/theme/color.ts
+++ b/resources/js/lib/theme/color.ts
@@ -5,12 +5,21 @@ const toOklch = converter('oklch');
// Convert hex (#rrggbb) -> "L C H" string used as token value.
export function hexToTokenValue(hex: string): string {
const parsed = parse(hex);
- if (!parsed) return '0 0 0';
+
+ if (!parsed) {
+return '0 0 0';
+}
+
const o = toOklch(parsed);
- if (!o) return '0 0 0';
+
+ if (!o) {
+return '0 0 0';
+}
+
const L = round(o.l ?? 0, 3);
const C = round(o.c ?? 0, 3);
const H = round(o.h ?? 0, 3);
+
return `${L} ${C} ${H}`;
}
@@ -19,6 +28,7 @@ export function tokenValueToHex(value: string): string {
const clean = value.split('/')[0].trim();
const [l, c, h] = clean.split(/\s+/).map(Number);
const hex = formatHex({ mode: 'oklch', l: l || 0, c: c || 0, h: h || 0 });
+
return hex ?? '#000000';
}
@@ -27,11 +37,13 @@ export function tokenValueToCss(value: string): string {
// pass through alpha syntax
return `oklch(${value})`;
}
+
return `oklch(${value})`;
}
function round(n: number, d: number) {
const f = Math.pow(10, d);
+
return Math.round(n * f) / f;
}
@@ -41,9 +53,17 @@ export function derivePaletteFromPrimary(
dark: boolean,
): Record {
const parsed = parse(hex);
- if (!parsed) return {};
+
+ if (!parsed) {
+return {};
+}
+
const o = toOklch(parsed);
- if (!o) return {};
+
+ if (!o) {
+return {};
+}
+
const h = o.h ?? 250;
const c = o.c ?? 0.05;
@@ -68,6 +88,7 @@ export function derivePaletteFromPrimary(
ring: `${o.l} ${c} ${h}`,
};
}
+
return {
background: `1 0 0`,
foreground: `0.16 0.02 ${h}`,
diff --git a/resources/js/lib/theme/css-export.ts b/resources/js/lib/theme/css-export.ts
index b8c4623..254c10c 100644
--- a/resources/js/lib/theme/css-export.ts
+++ b/resources/js/lib/theme/css-export.ts
@@ -4,12 +4,21 @@ const toOklch = converter('oklch');
export function hexToTokenValue(hex: string): string {
const parsed = parse(hex);
- if (!parsed) return '0 0 0';
+
+ if (!parsed) {
+return '0 0 0';
+}
+
const o = toOklch(parsed);
- if (!o) return '0 0 0';
+
+ if (!o) {
+return '0 0 0';
+}
+
const L = round(o.l ?? 0, 3);
const C = round(o.c ?? 0, 3);
const H = round(o.h ?? 0, 3);
+
return `${L} ${C} ${H}`;
}
@@ -17,6 +26,7 @@ export function tokenValueToHex(value: string): string {
const clean = value.split('/')[0].trim();
const [l, c, h] = clean.split(/\s+/).map(Number);
const hex = formatHex({ mode: 'oklch', l: l || 0, c: c || 0, h: h || 0 });
+
return hex ?? '#000000';
}
@@ -24,11 +34,13 @@ export function tokenValueToCss(value: string): string {
if (value.includes('/')) {
return `oklch(${value})`;
}
+
return `oklch(${value})`;
}
function round(n: number, d: number) {
const f = Math.pow(10, d);
+
return Math.round(n * f) / f;
}
@@ -37,9 +49,17 @@ export function derivePaletteFromPrimary(
dark: boolean,
): Record {
const parsed = parse(hex);
- if (!parsed) return {};
+
+ if (!parsed) {
+return {};
+}
+
const o = toOklch(parsed);
- if (!o) return {};
+
+ if (!o) {
+return {};
+}
+
const h = o.h ?? 250;
const c = o.c ?? 0.05;
@@ -64,6 +84,7 @@ export function derivePaletteFromPrimary(
ring: `${o.l} ${c} ${h}`,
};
}
+
return {
background: `1 0 0`,
foreground: `0.16 0.02 ${h}`,
@@ -110,7 +131,11 @@ export function generateIndexCss(state: {
const lines = entries.map(
([k, v]) => ` ${toVar(k)}: ${toColor(v)};`,
);
- if (extra) lines.push(extra);
+
+ if (extra) {
+lines.push(extra);
+}
+
return `${selector} {\n${lines.join('\n')}\n}`;
};
diff --git a/resources/js/pages/settings/profile.tsx b/resources/js/pages/settings/profile.tsx
index ff878f2..5204b64 100644
--- a/resources/js/pages/settings/profile.tsx
+++ b/resources/js/pages/settings/profile.tsx
@@ -1,5 +1,4 @@
import { Form, Head, Link, usePage } from '@inertiajs/react';
-import ProfileController from '@/actions/App/Http/Controllers/Settings/ProfileController';
import DeleteUser from '@/components/delete-user';
import Heading from '@/components/heading';
import InputError from '@/components/input-error';
@@ -8,6 +7,7 @@ import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { edit } from '@/routes/profile';
import { send } from '@/routes/verification';
+import ProfileController from '@/actions/App/Http/Controllers/Settings/ProfileController';
export default function Profile({
mustVerifyEmail,
diff --git a/resources/js/pages/settings/security.tsx b/resources/js/pages/settings/security.tsx
index 78d4aa2..f81e6ae 100644
--- a/resources/js/pages/settings/security.tsx
+++ b/resources/js/pages/settings/security.tsx
@@ -1,7 +1,6 @@
import { Form, Head } from '@inertiajs/react';
import { ShieldCheck } from 'lucide-react';
import { useEffect, useRef, useState } from 'react';
-import SecurityController from '@/actions/App/Http/Controllers/Settings/SecurityController';
import Heading from '@/components/heading';
import InputError from '@/components/input-error';
import PasswordInput from '@/components/password-input';
@@ -12,6 +11,7 @@ import { Label } from '@/components/ui/label';
import { useTwoFactorAuth } from '@/hooks/use-two-factor-auth';
import { edit } from '@/routes/security';
import { disable, enable } from '@/routes/two-factor';
+import SecurityController from '@/actions/App/Http/Controllers/Settings/SecurityController';
type Props = {
canManageTwoFactor?: boolean;
diff --git a/resources/js/pages/themes/create.tsx b/resources/js/pages/themes/create.tsx
index 78b0fff..3697192 100644
--- a/resources/js/pages/themes/create.tsx
+++ b/resources/js/pages/themes/create.tsx
@@ -1,17 +1,17 @@
import { Head, Link, router } from '@inertiajs/react';
-import { ArrowLeft, Check, Pencil, Save } from 'lucide-react';
+import { ArrowLeft, Pencil, Save } from 'lucide-react';
import { useCallback, useEffect, useRef, useState } from 'react';
+import { toast } from 'sonner';
import { ControlsPanel } from '@/components/themes/controls-panel';
import { ExportDialog } from '@/components/themes/export-dialog';
import { ThemePreview } from '@/components/themes/theme-preview';
import { Button } from '@/components/ui/button';
import { Separator } from '@/components/ui/separator';
import ThemeCreatorLayout from '@/layouts/theme-creator-layout';
+import { useThemeStore } from '@/lib/theme/store';
import { cn } from '@/lib/utils';
import { index, store } from '@/routes/themes';
import { useThemeCreatorStore } from '@/store/theme-creator';
-import { useThemeStore } from '@/lib/theme/store';
-import { toast } from 'sonner';
const MOBILE_TABS = ['Editor', 'Preview'] as const;
const MIN_SIDEBAR = 330;
@@ -61,7 +61,7 @@ export default function ThemeCreate() {
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp);
};
- }, []);
+ }, [setSidebarWidth]);
const handleSave = () => {
const themeData = {
diff --git a/resources/js/store/theme.ts b/resources/js/store/theme.ts
index 00443e5..cca9c15 100644
--- a/resources/js/store/theme.ts
+++ b/resources/js/store/theme.ts
@@ -1,6 +1,7 @@
import { create } from 'zustand';
import { persist } from 'zustand/middleware';
-import { DEFAULT_LIGHT, DEFAULT_DARK, type TokenMap } from '@/lib/theme/defaults';
+import { DEFAULT_LIGHT, DEFAULT_DARK } from '@/lib/theme/defaults';
+import type {TokenMap} from '@/lib/theme/defaults';
export type ThemeFonts = { sans: string; serif: string; mono: string };