Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 75beb23e3e |
9 changed files with 426 additions and 775 deletions
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@methanium/ui",
|
||||
"version": "0.0.32",
|
||||
"version": "0.0.29",
|
||||
"type": "module",
|
||||
"main": "./dist/index.js",
|
||||
"types": "./dist/index.d.ts",
|
||||
|
|
|
|||
652
pnpm-lock.yaml
generated
652
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load diff
|
|
@ -6,7 +6,7 @@ function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
|
|||
<Loader2Icon
|
||||
role="status"
|
||||
aria-label="Loading"
|
||||
className={cn("size-4 animate-spin!", className)}
|
||||
className={cn("size-4 animate-spin", className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ function CodeBlock({
|
|||
data-slot="code-block"
|
||||
data-line-numbers={showLineNumbers || undefined}
|
||||
data-language={language || undefined}
|
||||
className="group/code-block overflow-hidden rounded-lg border-[length:var(--ui-border-width)] border-border bg-[var(--markdown-code-background,var(--markdown-code-background-default))] my-2!"
|
||||
className="group/code-block overflow-hidden rounded-lg border-[length:var(--ui-border-width)] border-border bg-[var(--markdown-code-background)] my-2!"
|
||||
>
|
||||
<figcaption
|
||||
data-slot="code-block-header"
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
@layer components {
|
||||
[data-slot="markdown"],
|
||||
.tm-md-root {
|
||||
--markdown-code-background-default: color-mix(
|
||||
--markdown-code-background: color-mix(
|
||||
in oklch,
|
||||
var(--muted) 72%,
|
||||
var(--background)
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
.dark [data-slot="markdown"]:not([data-code-theme="light"]),
|
||||
[data-slot="markdown"][data-code-theme="dark"],
|
||||
.dark .tm-md-root {
|
||||
--markdown-code-background-default: color-mix(
|
||||
--markdown-code-background: color-mix(
|
||||
in oklch,
|
||||
var(--muted) 76%,
|
||||
black 24%
|
||||
|
|
@ -102,10 +102,7 @@
|
|||
border-right: var(--ui-border-width) solid var(--border);
|
||||
border-left: var(--ui-border-width) solid var(--border);
|
||||
border-radius: 0;
|
||||
background: var(
|
||||
--markdown-code-background,
|
||||
var(--markdown-code-background-default)
|
||||
);
|
||||
background: var(--markdown-code-background);
|
||||
color: var(--markdown-code-foreground);
|
||||
font-family: "JetBrains Mono", ui-monospace, monospace;
|
||||
font-size: 0.82rem;
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ export type HighlightedCodeToken = {
|
|||
};
|
||||
|
||||
export const shikiPreClassName =
|
||||
"shiki m-0 w-max min-w-full bg-[var(--markdown-code-background,var(--markdown-code-background-default))]! font-mono text-[0.82rem]/[1.7] text-[var(--markdown-code-foreground)]! [tab-size:2]";
|
||||
"shiki m-0 w-max min-w-full bg-[var(--markdown-code-background)]! font-mono text-[0.82rem]/[1.7] text-[var(--markdown-code-foreground)]! [tab-size:2]";
|
||||
export const shikiLineClassNames =
|
||||
"line -mx-4 inline-block min-w-full px-4 group-data-[line-numbers]/code-block:before:inline-block group-data-[line-numbers]/code-block:before:w-10 group-data-[line-numbers]/code-block:before:pe-4 group-data-[line-numbers]/code-block:before:text-end group-data-[line-numbers]/code-block:before:text-muted-foreground group-data-[line-numbers]/code-block:before:select-none group-data-[line-numbers]/code-block:before:content-[attr(data-line)]";
|
||||
export const highlightedLineClassNames =
|
||||
|
|
|
|||
|
|
@ -140,7 +140,6 @@ export function ThemeProvider({
|
|||
customCssStorageKey = "theme_custom_css",
|
||||
parentThemeStorageKey = "theme_parent",
|
||||
designStorageKey = "theme_design",
|
||||
notCustomizedStorageKey = "theme_not_customized",
|
||||
disableTransitionOnChange = true,
|
||||
...props
|
||||
}: ThemeProviderProps) {
|
||||
|
|
@ -191,20 +190,6 @@ export function ThemeProvider({
|
|||
const [themeDesign, setThemeDesignState] = useState(() =>
|
||||
storedDesign(designStorageKey, initialDesign),
|
||||
);
|
||||
const [notCustomized, setNotCustomizedState] = useState(() => {
|
||||
const stored = storageValue(notCustomizedStorageKey);
|
||||
if (stored !== null) return stored === "true";
|
||||
return Boolean(
|
||||
initialParent &&
|
||||
themeColor === "" &&
|
||||
themePalette === null &&
|
||||
themePrimaryColor === "" &&
|
||||
themeTint === "soft" &&
|
||||
themeBorderRadius === initialBorderRadius &&
|
||||
designsEqual(themeDesign, initialDesign) &&
|
||||
themeCustomCss === initialParent.css,
|
||||
);
|
||||
});
|
||||
const [systemPolarity, setSystemPolarity] = useState<ResolvedThemePolarity>(
|
||||
() => getSystemTheme(),
|
||||
);
|
||||
|
|
@ -213,22 +198,13 @@ export function ThemeProvider({
|
|||
const resolvedPolarity =
|
||||
themePolarity === "system" ? systemPolarity : themePolarity;
|
||||
|
||||
const setNotCustomized = useCallback(
|
||||
(next: boolean) => {
|
||||
saveStoredValue(notCustomizedStorageKey, String(next));
|
||||
setNotCustomizedState(next);
|
||||
},
|
||||
[notCustomizedStorageKey],
|
||||
);
|
||||
|
||||
const setParentThemeId = useCallback(
|
||||
(id: string | null) => {
|
||||
const next = findTheme(themes, id)?.id ?? null;
|
||||
saveStoredValue(parentThemeStorageKey, next ?? "");
|
||||
setParentThemeIdState(next);
|
||||
setNotCustomized(false);
|
||||
},
|
||||
[parentThemeStorageKey, setNotCustomized, themes],
|
||||
[parentThemeStorageKey, themes],
|
||||
);
|
||||
|
||||
const setThemePolarity = useCallback(
|
||||
|
|
@ -243,34 +219,30 @@ export function ThemeProvider({
|
|||
if (!isThemeColor(next)) return;
|
||||
saveStoredValue(colorStorageKey, next);
|
||||
setThemeColorState(next);
|
||||
setNotCustomized(false);
|
||||
},
|
||||
[colorStorageKey, setNotCustomized],
|
||||
[colorStorageKey],
|
||||
);
|
||||
const setThemePalette = useCallback(
|
||||
(next: Base16Palette | null) => {
|
||||
saveStoredValue(paletteStorageKey, serializeBase16Palette(next));
|
||||
setThemePaletteState(next);
|
||||
setNotCustomized(false);
|
||||
},
|
||||
[paletteStorageKey, setNotCustomized],
|
||||
[paletteStorageKey],
|
||||
);
|
||||
const setThemePrimaryColor = useCallback(
|
||||
(next: string) => {
|
||||
if (!isThemeColor(next)) return;
|
||||
saveStoredValue(primaryColorStorageKey, next);
|
||||
setThemePrimaryColorState(next);
|
||||
setNotCustomized(false);
|
||||
},
|
||||
[primaryColorStorageKey, setNotCustomized],
|
||||
[primaryColorStorageKey],
|
||||
);
|
||||
const setThemeTint = useCallback(
|
||||
(next: ThemeTint) => {
|
||||
saveStoredValue(tintStorageKey, next);
|
||||
setThemeTintState(next);
|
||||
setNotCustomized(false);
|
||||
},
|
||||
[setNotCustomized, tintStorageKey],
|
||||
[tintStorageKey],
|
||||
);
|
||||
const setThemeBorderRadius = useCallback(
|
||||
(next: number) => {
|
||||
|
|
@ -278,28 +250,25 @@ export function ThemeProvider({
|
|||
if (radius === null) return;
|
||||
saveStoredValue(borderRadiusStorageKey, String(radius));
|
||||
setThemeBorderRadiusState(radius);
|
||||
setNotCustomized(false);
|
||||
},
|
||||
[borderRadiusStorageKey, setNotCustomized],
|
||||
[borderRadiusStorageKey],
|
||||
);
|
||||
const setThemeCustomCss = useCallback(
|
||||
(next: string) => {
|
||||
saveStoredValue(customCssStorageKey, next);
|
||||
setThemeCustomCssState(next);
|
||||
setNotCustomized(false);
|
||||
},
|
||||
[customCssStorageKey, setNotCustomized],
|
||||
[customCssStorageKey],
|
||||
);
|
||||
const setThemeDesign = useCallback(
|
||||
(next: ThemeDesign | ((current: ThemeDesign) => ThemeDesign)) => {
|
||||
setNotCustomized(false);
|
||||
setThemeDesignState((current) => {
|
||||
const value = typeof next === "function" ? next(current) : next;
|
||||
saveStoredValue(designStorageKey, JSON.stringify(value));
|
||||
return value;
|
||||
});
|
||||
},
|
||||
[designStorageKey, setNotCustomized],
|
||||
[designStorageKey],
|
||||
);
|
||||
|
||||
const applyThemePreset = useCallback(
|
||||
|
|
@ -314,7 +283,6 @@ export function ThemeProvider({
|
|||
setThemeBorderRadius(presetBorderRadius(preset, defaultBorderRadius));
|
||||
setThemeDesign(presetDesign(preset, defaultDesign));
|
||||
setThemeCustomCss(preset.css);
|
||||
setNotCustomized(true);
|
||||
},
|
||||
[
|
||||
defaultDesign,
|
||||
|
|
@ -327,7 +295,6 @@ export function ThemeProvider({
|
|||
setThemePalette,
|
||||
setThemePrimaryColor,
|
||||
setThemeTint,
|
||||
setNotCustomized,
|
||||
themes,
|
||||
],
|
||||
);
|
||||
|
|
@ -335,13 +302,6 @@ export function ThemeProvider({
|
|||
if (parentTheme) applyThemePreset(parentTheme.id);
|
||||
}, [applyThemePreset, parentTheme]);
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window === "undefined") return;
|
||||
if (storageValue(notCustomizedStorageKey) === null) {
|
||||
saveStoredValue(notCustomizedStorageKey, String(notCustomized));
|
||||
}
|
||||
}, [notCustomized, notCustomizedStorageKey]);
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window === "undefined") return;
|
||||
const mediaQuery = window.matchMedia(COLOR_SCHEME_QUERY);
|
||||
|
|
@ -350,14 +310,6 @@ export function ThemeProvider({
|
|||
return () => mediaQuery.removeEventListener("change", handleChange);
|
||||
}, []);
|
||||
|
||||
useIsomorphicLayoutEffect(() => {
|
||||
if (!notCustomized || !parentTheme || themeCustomCss === parentTheme.css) {
|
||||
return;
|
||||
}
|
||||
saveStoredValue(customCssStorageKey, parentTheme.css);
|
||||
setThemeCustomCssState(parentTheme.css);
|
||||
}, [customCssStorageKey, notCustomized, parentTheme, themeCustomCss]);
|
||||
|
||||
useIsomorphicLayoutEffect(() => {
|
||||
if (typeof document === "undefined") return;
|
||||
const root = document.documentElement;
|
||||
|
|
@ -470,9 +422,6 @@ export function ThemeProvider({
|
|||
parseDesign(stored, presetDesign(parentTheme, defaultDesign)),
|
||||
),
|
||||
);
|
||||
register(notCustomizedStorageKey, (stored) =>
|
||||
setNotCustomizedState(stored === "true"),
|
||||
);
|
||||
const handleStorageChange = (event: StorageEvent) => {
|
||||
if (event.storageArea !== localStorage) return;
|
||||
if (event.key) handlers.get(event.key)?.(event.newValue);
|
||||
|
|
@ -491,7 +440,6 @@ export function ThemeProvider({
|
|||
defaultTheme,
|
||||
defaultTint,
|
||||
designStorageKey,
|
||||
notCustomizedStorageKey,
|
||||
paletteStorageKey,
|
||||
parentThemeStorageKey,
|
||||
parentTheme,
|
||||
|
|
@ -501,7 +449,22 @@ export function ThemeProvider({
|
|||
tintStorageKey,
|
||||
]);
|
||||
|
||||
const isThemeCustomized = Boolean(parentTheme && !notCustomized);
|
||||
const parentDesign = presetDesign(parentTheme, defaultDesign);
|
||||
const parentBorderRadius = presetBorderRadius(
|
||||
parentTheme,
|
||||
defaultBorderRadius,
|
||||
);
|
||||
|
||||
const isThemeCustomized = Boolean(
|
||||
parentTheme &&
|
||||
(themeCustomCss !== parentTheme.css ||
|
||||
themeColor !== "" ||
|
||||
themePalette !== null ||
|
||||
themePrimaryColor !== "" ||
|
||||
themeTint !== "soft" ||
|
||||
themeBorderRadius !== parentBorderRadius ||
|
||||
!designsEqual(themeDesign, parentDesign)),
|
||||
);
|
||||
|
||||
const value = useMemo<ThemeProviderState>(
|
||||
() => ({
|
||||
|
|
@ -529,14 +492,12 @@ export function ThemeProvider({
|
|||
applyThemePreset,
|
||||
resetThemePreset,
|
||||
isThemeCustomized,
|
||||
notCustomized,
|
||||
themeDesign,
|
||||
setThemeDesign,
|
||||
}),
|
||||
[
|
||||
applyThemePreset,
|
||||
isThemeCustomized,
|
||||
notCustomized,
|
||||
parentTheme,
|
||||
parentThemeId,
|
||||
resetThemePreset,
|
||||
|
|
|
|||
|
|
@ -51,7 +51,6 @@ export const BUILT_IN_THEMES = defineThemes([
|
|||
--ring: oklch(0.62 0.12 185);
|
||||
--sidebar: color-mix(in oklch, var(--background) 97%, black);
|
||||
--sidebar-primary: oklch(0.58 0.12 185);
|
||||
--markdown-code-background: color-mix(in oklch, var(--muted) 72%, var(--background));
|
||||
--tensamin-outline-background: #fff;
|
||||
--tensamin-outline-hover: #0000000a;
|
||||
--tensamin-outline-pressed: #00000014;
|
||||
|
|
@ -74,7 +73,6 @@ export const BUILT_IN_THEMES = defineThemes([
|
|||
--primary: oklch(0.69 0.12 184);
|
||||
--primary-foreground: oklch(0.16 0.025 190);
|
||||
--primary-foreground-alt: oklch(0.73 0.13 183);
|
||||
--markdown-code-background: color-mix(in oklch, var(--card) 76%, black 24%);
|
||||
--tensamin-outline-background: #ffffff0f;
|
||||
--tensamin-outline-hover: #ffffff0f;
|
||||
--tensamin-outline-pressed: #ffffff1a;
|
||||
|
|
@ -249,7 +247,6 @@ export const BUILT_IN_THEMES = defineThemes([
|
|||
--chart-3: #aca1cf;
|
||||
--chart-4: #e29eca;
|
||||
--chart-5: #e5c890;
|
||||
--markdown-code-background: color-mix(in srgb, var(--muted) 78%, var(--background));
|
||||
}
|
||||
:root.dark[data-theme="og-tensamin"] {
|
||||
--background: #0f1014;
|
||||
|
|
@ -284,7 +281,6 @@ export const BUILT_IN_THEMES = defineThemes([
|
|||
--chart-3: #aca1cf;
|
||||
--chart-4: #e29eca;
|
||||
--chart-5: #e5c890;
|
||||
--markdown-code-background: color-mix(in srgb, var(--muted) 72%, black 28%);
|
||||
}
|
||||
:root[data-theme="og-tensamin"] :where([data-slot="select-content"], [data-slot="dropdown-menu-content"], [data-slot="dropdown-menu-sub-content"], [data-slot="context-menu-content"], [data-slot="context-menu-sub-content"], [data-slot="menubar-content"], [data-slot="menubar-sub-content"], [data-slot="combobox-content"], [data-slot="popover-content"], [data-slot="hover-card-content"]) {
|
||||
background-color: var(--popover);
|
||||
|
|
@ -327,7 +323,7 @@ export const BUILT_IN_THEMES = defineThemes([
|
|||
--accent: #cf8fe633;
|
||||
--accent-foreground: #642f79;
|
||||
--destructive: #b91c1c;
|
||||
--border: #b7c2cc;
|
||||
--border: #242D38;
|
||||
--input: #b7c2cc;
|
||||
--ring: #9d53bc;
|
||||
--chart-1: #8c47ad;
|
||||
|
|
@ -341,9 +337,8 @@ export const BUILT_IN_THEMES = defineThemes([
|
|||
--sidebar-primary-foreground: #ffffff;
|
||||
--sidebar-accent: #cf8fe633;
|
||||
--sidebar-accent-foreground: #642f79;
|
||||
--sidebar-border: #b7c2cc;
|
||||
--sidebar-border: #242D38;
|
||||
--sidebar-ring: #9d53bc;
|
||||
--markdown-code-background: color-mix(in srgb, var(--input) 55%, var(--background));
|
||||
}
|
||||
:root.dark[data-theme="methanium"] {
|
||||
--background: #171E26;
|
||||
|
|
@ -378,7 +373,6 @@ export const BUILT_IN_THEMES = defineThemes([
|
|||
--sidebar-accent-foreground: #d2e0f0;
|
||||
--sidebar-border: #242D38;
|
||||
--sidebar-ring: #cf8fe6;
|
||||
--markdown-code-background: color-mix(in srgb, var(--input) 55%, var(--background));
|
||||
}
|
||||
:root[data-theme="methanium"] body {
|
||||
background-color: var(--background);
|
||||
|
|
@ -441,8 +435,8 @@ export const BUILT_IN_THEMES = defineThemes([
|
|||
}
|
||||
:root[data-theme="methanium"] [data-slot="card"] {
|
||||
padding-block: calc(1rem * var(--ui-density));
|
||||
border: 1px solid var(--input);
|
||||
background-color: color-mix(in srgb, var(--input) 55%, var(--background));
|
||||
border: none;
|
||||
background-color: #242D38;
|
||||
}
|
||||
:root[data-theme="methanium"] [data-slot="button"][data-variant="default"] {
|
||||
background-color: var(--primary);
|
||||
|
|
@ -512,464 +506,175 @@ export const BUILT_IN_THEMES = defineThemes([
|
|||
},
|
||||
css: `:root[data-theme="secret"] {
|
||||
--secret-border: color-mix(in srgb, #2f1b13 22%, #fffaf2 78%);
|
||||
|
||||
--secret-purple: #d7a8c9;
|
||||
--secret-control: var(--secret-purple);
|
||||
|
||||
--secret-control: #5e244e;
|
||||
--secret-gold: color-mix(in srgb, #f9b637 75%, #2f1b13 25%);
|
||||
--secret-gold-dark: color-mix(in srgb, var(--secret-gold) 60%, #2f1b13 40%);
|
||||
--secret-gold-light: color-mix(in srgb, var(--secret-gold) 45%, #ffe8b4 55%);
|
||||
|
||||
--background: oklch(0.98 0 0);
|
||||
--foreground: #2f1b13;
|
||||
|
||||
--card: var(--background);
|
||||
--card-foreground: var(--foreground);
|
||||
|
||||
--popover: var(--secret-purple);
|
||||
--popover-foreground: #2f1b13;
|
||||
|
||||
--popover: #5e244e;
|
||||
--popover-foreground: #fffaf2;
|
||||
--primary: var(--secret-gold);
|
||||
--primary-foreground: #24120c;
|
||||
--primary-foreground-alt: #c04b00;
|
||||
|
||||
--secondary: var(--secret-purple);
|
||||
--secondary-foreground: #2f1b13;
|
||||
|
||||
--muted: #c89ab9;
|
||||
--muted-foreground: #49333f;
|
||||
|
||||
--primary-foreground-alt: #fb6c00;
|
||||
--secondary: #5e244e;
|
||||
--secondary-foreground: #fffaf2;
|
||||
--muted: #24120c;
|
||||
--muted-foreground: #6b7280;
|
||||
--accent: #fb6c00;
|
||||
--accent-foreground: #24120c;
|
||||
|
||||
--destructive: #d93618;
|
||||
--destructive-foreground: #fffaf2;
|
||||
|
||||
--destructive: #e73f1e;
|
||||
--border: var(--secret-border);
|
||||
--input: var(--secret-border);
|
||||
--ring: #4a2110;
|
||||
|
||||
--ring: #fb6c00;
|
||||
--sidebar: color-mix(in oklch, var(--background) 97%, black);
|
||||
--sidebar-foreground: #2f1b13;
|
||||
--sidebar-primary: var(--secret-gold);
|
||||
--sidebar-primary-foreground: #24120c;
|
||||
--sidebar-accent: #d7a8c9;
|
||||
--sidebar-accent-foreground: #2f1b13;
|
||||
--sidebar-accent: #aa1c41;
|
||||
--sidebar-accent-foreground: #fffaf2;
|
||||
--sidebar-border: var(--secret-border);
|
||||
|
||||
--markdown-code-background: color-mix(
|
||||
in srgb,
|
||||
var(--secret-gold) 9%,
|
||||
var(--background)
|
||||
);
|
||||
}
|
||||
|
||||
:root.dark[data-theme="secret"] {
|
||||
--secret-border: color-mix(in srgb, #ffe8b4 8%, #24120c 35%);
|
||||
|
||||
--secret-purple: #5e244e;
|
||||
--secret-control: var(--secret-purple);
|
||||
|
||||
--background: #0a0a0a;
|
||||
--secret-border: color-mix(in srgb, #ffe8b4 15%, #24120c 85%);
|
||||
--secret-control: #5e244e;
|
||||
--background: #0A0A0A;
|
||||
--foreground: #ffe8b4;
|
||||
|
||||
--card: var(--background);
|
||||
--card-foreground: var(--foreground);
|
||||
|
||||
--popover: #2f1b13;
|
||||
--popover-foreground: #ffe8b4;
|
||||
|
||||
--primary: var(--secret-gold);
|
||||
--primary-foreground: #24120c;
|
||||
--primary-foreground-alt: #fb6c00;
|
||||
|
||||
--secondary: var(--secret-purple);
|
||||
--secondary: #5e244e;
|
||||
--secondary-foreground: #fffaf2;
|
||||
|
||||
--muted: #2f1b13;
|
||||
--muted-foreground: #e68457;
|
||||
|
||||
--accent: #d93618;
|
||||
--accent: #e73f1e;
|
||||
--accent-foreground: #fffaf2;
|
||||
|
||||
--destructive: #d93618;
|
||||
--destructive-foreground: #fffaf2;
|
||||
|
||||
--destructive: #e73f1e;
|
||||
--border: var(--secret-border);
|
||||
--input: var(--secret-border);
|
||||
--ring: #f9b637;
|
||||
|
||||
--sidebar: #0f0f0f;
|
||||
--ring: #fb6c00;
|
||||
--sidebar: #0F0F0F;
|
||||
--sidebar-foreground: #ffe8b4;
|
||||
--sidebar-primary: var(--secret-gold);
|
||||
--sidebar-primary-foreground: #24120c;
|
||||
--sidebar-accent: #aa1c41;
|
||||
--sidebar-accent-foreground: #fffaf2;
|
||||
--sidebar-border: var(--secret-border);
|
||||
|
||||
--markdown-code-background: color-mix(
|
||||
in srgb,
|
||||
var(--muted) 72%,
|
||||
black 28%
|
||||
);
|
||||
}
|
||||
|
||||
:root[data-theme="secret"] :where(
|
||||
[data-slot="button"],
|
||||
[data-slot="toggle"],
|
||||
[data-slot="input"],
|
||||
[data-slot="textarea"],
|
||||
[data-slot="native-select"],
|
||||
[data-slot="select-trigger"],
|
||||
[data-slot="input-group"],
|
||||
[data-slot="checkbox"],
|
||||
[data-slot="radio-group-item"],
|
||||
[data-slot="switch"]
|
||||
) {
|
||||
background-image: linear-gradient(
|
||||
to top,
|
||||
rgb(255 255 255 / 12%),
|
||||
rgb(255 255 255 / 2%)
|
||||
);
|
||||
:root[data-theme="secret"] :where([data-slot="button"], [data-slot="toggle"], [data-slot="input"], [data-slot="textarea"], [data-slot="native-select"], [data-slot="select-trigger"], [data-slot="input-group"], [data-slot="checkbox"], [data-slot="radio-group-item"], [data-slot="switch"]) {
|
||||
background-image: linear-gradient(to top, rgb(255 255 255 / 12%), rgb(255 255 255 / 2%));
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
:root[data-theme="secret"] [data-slot="button"][data-variant="ghost"] {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
:root[data-theme="secret"] [data-slot="button"][data-variant="ghost"]:hover {
|
||||
background-image: linear-gradient(
|
||||
to top,
|
||||
rgb(255 255 255 / 12%),
|
||||
rgb(255 255 255 / 2%)
|
||||
);
|
||||
background-image: linear-gradient(to top, rgb(255 255 255 / 12%), rgb(255 255 255 / 2%));
|
||||
}
|
||||
|
||||
:root[data-theme="secret"] [data-slot="button"][data-variant="subtleDefault"] {
|
||||
background-image: linear-gradient(
|
||||
to top,
|
||||
rgb(255 232 180 / 12%),
|
||||
rgb(255 232 180 / 2%)
|
||||
);
|
||||
background-image: linear-gradient(to top, rgb(255 232 180 / 12%), rgb(255 232 180 / 2%));
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
:root:not(.dark)[data-theme="secret"]
|
||||
[data-slot="button"][data-variant="subtleDefault"] {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--primary-foreground-alt) 6%,
|
||||
transparent
|
||||
);
|
||||
background-image: linear-gradient(
|
||||
to top,
|
||||
rgb(255 232 180 / 30%),
|
||||
rgb(255 232 180 / 80%)
|
||||
);
|
||||
:root:not(.dark)[data-theme="secret"] [data-slot="button"][data-variant="subtleDefault"] {
|
||||
background-color: color-mix(in srgb, var(--primary-foreground-alt) 6%, transparent);
|
||||
background-image: linear-gradient(to top, rgb(255 232 180 / 30%), rgb(255 232 180 / 80%));
|
||||
}
|
||||
|
||||
:root[data-theme="secret"] :where(
|
||||
[data-slot="input"],
|
||||
[data-slot="textarea"],
|
||||
[data-slot="native-select"],
|
||||
[data-slot="select-trigger"],
|
||||
[data-slot="input-group"]
|
||||
) {
|
||||
:root[data-theme="secret"] :where([data-slot="input"], [data-slot="textarea"], [data-slot="native-select"], [data-slot="select-trigger"], [data-slot="input-group"]) {
|
||||
background-color: var(--secret-control);
|
||||
border-color: transparent;
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
:root:not(.dark)[data-theme="secret"] :where(
|
||||
[data-slot="input"],
|
||||
[data-slot="textarea"],
|
||||
[data-slot="native-select"],
|
||||
[data-slot="select-trigger"],
|
||||
[data-slot="input-group"]
|
||||
) {
|
||||
color: #2f1b13;
|
||||
:root:not(.dark)[data-theme="secret"] :where([data-slot="input"], [data-slot="textarea"], [data-slot="native-select"], [data-slot="select-trigger"], [data-slot="input-group"]) {
|
||||
color: #fffaf2;
|
||||
}
|
||||
|
||||
:root.dark[data-theme="secret"] :where(
|
||||
[data-slot="input"],
|
||||
[data-slot="textarea"],
|
||||
[data-slot="native-select"],
|
||||
[data-slot="select-trigger"],
|
||||
[data-slot="input-group"]
|
||||
) {
|
||||
color: #ffe8b4;
|
||||
}
|
||||
|
||||
:root:not(.dark)[data-theme="secret"] :where(
|
||||
[data-slot="input"],
|
||||
[data-slot="textarea"]
|
||||
)::placeholder {
|
||||
color: #5f4558;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
:root.dark[data-theme="secret"] :where(
|
||||
[data-slot="input"],
|
||||
[data-slot="textarea"]
|
||||
)::placeholder {
|
||||
color: #d9b99c;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
:root:not(.dark)[data-theme="secret"] :where(
|
||||
[data-slot="input"],
|
||||
[data-slot="textarea"],
|
||||
[data-slot="native-select"],
|
||||
[data-slot="select-trigger"],
|
||||
[data-slot="input-group"]
|
||||
):hover {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--secret-control) 88%,
|
||||
#622a53 12%
|
||||
);
|
||||
:root[data-theme="secret"] :where([data-slot="input"], [data-slot="textarea"], [data-slot="native-select"], [data-slot="select-trigger"], [data-slot="input-group"]):hover {
|
||||
background-color: color-mix(in srgb, var(--secret-control) 84%, #24120c 16%);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
:root.dark[data-theme="secret"] :where(
|
||||
[data-slot="input"],
|
||||
[data-slot="textarea"],
|
||||
[data-slot="native-select"],
|
||||
[data-slot="select-trigger"],
|
||||
[data-slot="input-group"]
|
||||
):hover {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--secret-control) 84%,
|
||||
#24120c 16%
|
||||
);
|
||||
:root[data-theme="secret"] :where([data-slot="input"], [data-slot="textarea"], [data-slot="native-select"], [data-slot="select-trigger"], [data-slot="input-group"]):is(:focus-visible, :focus-within) {
|
||||
background-color: color-mix(in srgb, var(--secret-control) 84%, #24120c 16%);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
:root:not(.dark)[data-theme="secret"] :where(
|
||||
[data-slot="input"],
|
||||
[data-slot="textarea"],
|
||||
[data-slot="native-select"],
|
||||
[data-slot="select-trigger"],
|
||||
[data-slot="input-group"]
|
||||
):is(:focus-visible, :focus-within) {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--secret-control) 88%,
|
||||
#622a53 12%
|
||||
);
|
||||
:root[data-theme="secret"] [data-slot="select-trigger"]:is([data-popup-open], [data-open], [aria-expanded="true"]) {
|
||||
background-color: color-mix(in srgb, var(--secret-control) 84%, #24120c 16%);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
:root.dark[data-theme="secret"] :where(
|
||||
[data-slot="input"],
|
||||
[data-slot="textarea"],
|
||||
[data-slot="native-select"],
|
||||
[data-slot="select-trigger"],
|
||||
[data-slot="input-group"]
|
||||
):is(:focus-visible, :focus-within) {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--secret-control) 84%,
|
||||
#24120c 16%
|
||||
);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
:root:not(.dark)[data-theme="secret"]
|
||||
[data-slot="select-trigger"]:is(
|
||||
[data-popup-open],
|
||||
[data-open],
|
||||
[aria-expanded="true"]
|
||||
) {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--secret-control) 88%,
|
||||
#622a53 12%
|
||||
);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
:root.dark[data-theme="secret"]
|
||||
[data-slot="select-trigger"]:is(
|
||||
[data-popup-open],
|
||||
[data-open],
|
||||
[aria-expanded="true"]
|
||||
) {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--secret-control) 84%,
|
||||
#24120c 16%
|
||||
);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
:root[data-theme="secret"] [data-slot="select-content"] {
|
||||
background-color: var(--popover);
|
||||
border-color: var(--secret-border);
|
||||
color: var(--popover-foreground);
|
||||
}
|
||||
|
||||
:root:not(.dark)[data-theme="secret"] :where(
|
||||
[data-slot="select-item"],
|
||||
[data-slot="context-menu-item"],
|
||||
[data-slot="context-menu-sub-trigger"]
|
||||
):is(
|
||||
:hover,
|
||||
:focus,
|
||||
[data-highlighted],
|
||||
[data-selected],
|
||||
[data-open]
|
||||
) {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--popover) 82%,
|
||||
#622a53 18%
|
||||
);
|
||||
color: #2f1b13;
|
||||
:root.dark[data-theme="secret"] [data-slot="select-content"] {
|
||||
border-color: var(--secret-border);
|
||||
}
|
||||
|
||||
:root.dark[data-theme="secret"] :where(
|
||||
[data-slot="select-item"],
|
||||
[data-slot="context-menu-item"],
|
||||
[data-slot="context-menu-sub-trigger"]
|
||||
):is(
|
||||
:hover,
|
||||
:focus,
|
||||
[data-highlighted],
|
||||
[data-selected],
|
||||
[data-open]
|
||||
) {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--popover) 72%,
|
||||
#0a0a0a 28%
|
||||
);
|
||||
:root[data-theme="secret"] :where([data-slot="select-item"], [data-slot="context-menu-item"], [data-slot="context-menu-sub-trigger"]):is(:hover, :focus, [data-highlighted], [data-selected], [data-open]) {
|
||||
background-color: color-mix(in srgb, var(--popover) 72%, #0a0a0a 28%);
|
||||
color: #ffe8b4;
|
||||
}
|
||||
|
||||
:root[data-theme="secret"] [data-slot="button"][data-variant="default"] {
|
||||
background-color: var(--primary);
|
||||
background-image:
|
||||
linear-gradient(
|
||||
to top,
|
||||
rgb(255 255 255 / 12%),
|
||||
rgb(255 255 255 / 2%)
|
||||
),
|
||||
linear-gradient(
|
||||
115deg,
|
||||
var(--secret-gold-dark) 0%,
|
||||
var(--secret-gold) 30%,
|
||||
var(--secret-gold-light) 47%,
|
||||
var(--secret-gold) 62%,
|
||||
var(--secret-gold-dark) 100%
|
||||
);
|
||||
background-image: linear-gradient(to top, rgb(255 255 255 / 12%), rgb(255 255 255 / 2%)), linear-gradient(115deg, var(--secret-gold-dark) 0%, var(--secret-gold) 30%, var(--secret-gold-light) 47%, var(--secret-gold) 62%, var(--secret-gold-dark) 100%);
|
||||
border-color: var(--secret-border);
|
||||
color: var(--primary-foreground);
|
||||
text-shadow: 0 1px rgb(255 255 255 / 35%);
|
||||
box-shadow:
|
||||
inset 0 1px rgb(255 255 255 / 45%),
|
||||
0 0.45rem 1.2rem rgb(36 18 12 / 28%);
|
||||
box-shadow: inset 0 1px rgb(255 255 255 / 45%), 0 0.45rem 1.2rem rgb(36 18 12 / 28%);
|
||||
}
|
||||
|
||||
:root[data-theme="secret"] :where(
|
||||
[data-slot="card"],
|
||||
[data-slot="dialog-content"],
|
||||
[data-slot="alert-dialog-content"]
|
||||
) {
|
||||
:root[data-theme="secret"] :where([data-slot="card"], [data-slot="dialog-content"], [data-slot="alert-dialog-content"]) {
|
||||
border-color: var(--secret-border);
|
||||
box-shadow:
|
||||
inset 0 1px color-mix(in oklch, white 8%, transparent),
|
||||
0 1rem 3rem rgb(97 37 82 / 12%);
|
||||
box-shadow: inset 0 1px color-mix(in oklch, white 8%, transparent), 0 1rem 3rem rgb(97 37 82 / 12%);
|
||||
}
|
||||
|
||||
:root[data-theme="secret"] [data-slot="card"] {
|
||||
background: var(--card);
|
||||
}
|
||||
|
||||
:root[data-theme="secret"] :where(
|
||||
[data-slot="button"][data-variant="outline"],
|
||||
[data-slot="button"][data-variant="link"],
|
||||
[data-slot="badge"][data-variant="outline"],
|
||||
[data-slot="toggle"][data-variant="outline"]
|
||||
) {
|
||||
:root[data-theme="secret"] :where([data-slot="button"][data-variant="outline"], [data-slot="button"][data-variant="link"], [data-slot="badge"][data-variant="outline"], [data-slot="toggle"][data-variant="outline"]) {
|
||||
background-color: var(--secondary);
|
||||
border-color: transparent;
|
||||
color: var(--secondary-foreground);
|
||||
}
|
||||
|
||||
:root[data-theme="secret"] [data-slot="button"][data-variant="link"] {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
:root[data-theme="secret"] [data-slot="button"][data-variant="link"]:hover {
|
||||
background-color: var(--secondary);
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
:root:not(.dark)[data-theme="secret"] :where(
|
||||
[data-slot="button"],
|
||||
[data-slot="badge"],
|
||||
[data-slot="toggle"]
|
||||
)[data-variant="outline"]:is(
|
||||
:hover,
|
||||
:focus-visible,
|
||||
[aria-expanded="true"],
|
||||
[data-popup-open],
|
||||
[data-open]
|
||||
) {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--secondary) 82%,
|
||||
#622a53 18%
|
||||
);
|
||||
:root[data-theme="secret"] [data-slot="button"][data-variant="outline"]:hover {
|
||||
background-color: color-mix(in srgb, #5e244e 82%, #24120c 18%);
|
||||
border-color: transparent;
|
||||
color: var(--secondary-foreground);
|
||||
}
|
||||
|
||||
:root.dark[data-theme="secret"] :where(
|
||||
[data-slot="button"],
|
||||
[data-slot="badge"],
|
||||
[data-slot="toggle"]
|
||||
)[data-variant="outline"]:is(
|
||||
:hover,
|
||||
:focus-visible,
|
||||
[aria-expanded="true"],
|
||||
[data-popup-open],
|
||||
[data-open]
|
||||
) {
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--secondary) 82%,
|
||||
#24120c 18%
|
||||
);
|
||||
:root[data-theme="secret"] :where([data-slot="badge"], [data-slot="toggle"])[data-variant="outline"]:hover {
|
||||
background-color: color-mix(in srgb, #5e244e 82%, #24120c 18%);
|
||||
border-color: transparent;
|
||||
color: var(--secondary-foreground);
|
||||
}
|
||||
|
||||
:root[data-theme="secret"] :where(
|
||||
[data-slot="card-title"],
|
||||
[data-slot="item-media"][data-variant="icon"],
|
||||
[data-slot="badge"][data-variant="outline"]
|
||||
) svg {
|
||||
:root[data-theme="secret"] :where([data-slot="button"], [data-slot="badge"], [data-slot="toggle"])[data-variant="outline"]:is(:focus-visible, [aria-expanded="true"], [data-popup-open], [data-open]) {
|
||||
background-color: color-mix(in srgb, #5e244e 82%, #24120c 18%);
|
||||
border-color: transparent;
|
||||
}
|
||||
:root:not(.dark)[data-theme="secret"] [data-slot="button"][data-variant="outline"]:hover,
|
||||
:root:not(.dark)[data-theme="secret"] :where([data-slot="badge"], [data-slot="toggle"])[data-variant="outline"]:hover,
|
||||
:root:not(.dark)[data-theme="secret"] :where([data-slot="button"], [data-slot="badge"], [data-slot="toggle"])[data-variant="outline"]:is(:focus-visible, [aria-expanded="true"], [data-popup-open], [data-open]) {
|
||||
background-color: color-mix(in srgb, var(--secondary) 82%, #fffaf2 18%);
|
||||
border-color: transparent;
|
||||
}
|
||||
:root.dark[data-theme="secret"] :where([data-slot="button"][data-variant="outline"], [data-slot="button"][data-variant="link"], [data-slot="badge"][data-variant="outline"], [data-slot="toggle"][data-variant="outline"]) {
|
||||
background-color: #5e244e;
|
||||
border-color: transparent;
|
||||
color: #ffe8b4;
|
||||
}
|
||||
:root.dark[data-theme="secret"] [data-slot="button"][data-variant="outline"]:hover {
|
||||
background-color: color-mix(in srgb, #5e244e 82%, #24120c 18%);
|
||||
}
|
||||
:root[data-theme="secret"] :where([data-slot="card-title"], [data-slot="item-media"][data-variant="icon"], [data-slot="badge"][data-variant="outline"]) svg {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
:root:not(.dark)[data-theme="secret"] :where(
|
||||
[data-slot="card-title"],
|
||||
[data-slot="item-media"][data-variant="icon"],
|
||||
[data-slot="badge"][data-variant="outline"]
|
||||
) svg {
|
||||
color: var(--secret-gold-dark);
|
||||
}
|
||||
|
||||
:root[data-theme="secret"] [data-slot="separator"] {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
color-mix(in oklch, var(--primary) 42%, var(--border)),
|
||||
transparent
|
||||
);
|
||||
background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--primary) 42%, var(--border)), transparent);
|
||||
}`,
|
||||
},
|
||||
] as const);
|
||||
|
|
|
|||
|
|
@ -74,7 +74,6 @@ export type ThemeProviderProps = {
|
|||
customCssStorageKey?: string | null;
|
||||
parentThemeStorageKey?: string | null;
|
||||
designStorageKey?: string | null;
|
||||
notCustomizedStorageKey?: string | null;
|
||||
disableTransitionOnChange?: boolean;
|
||||
};
|
||||
|
||||
|
|
@ -103,7 +102,6 @@ export type ThemeProviderState = {
|
|||
applyThemePreset: (id: string) => void;
|
||||
resetThemePreset: () => void;
|
||||
isThemeCustomized: boolean;
|
||||
notCustomized: boolean;
|
||||
themeDesign: ThemeDesign;
|
||||
setThemeDesign: (
|
||||
design: ThemeDesign | ((current: ThemeDesign) => ThemeDesign),
|
||||
|
|
|
|||
Loading…
Reference in a new issue