diff --git a/package.json b/package.json index 226ea69..d81ddd7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@methanium/ui", - "version": "0.0.7", + "version": "0.0.8", "type": "module", "main": "./dist/index.js", "types": "./dist/index.d.ts", diff --git a/src/index.css b/src/index.css index 9b5d5bd..15fce52 100644 --- a/src/index.css +++ b/src/index.css @@ -132,6 +132,10 @@ @apply border-border outline-ring/50; } + :where(button, [role="button"]) { + cursor: pointer; + } + :where( button, a, diff --git a/src/theme/OnboardingPage.tsx b/src/theme/OnboardingPage.tsx index 6f3701a..97c96ed 100644 --- a/src/theme/OnboardingPage.tsx +++ b/src/theme/OnboardingPage.tsx @@ -1,6 +1,8 @@ import { useState } from "react"; import { useOnboardingStep } from "../cmp/onboarding-flow"; +import { configuredDefaultThemeId, useTheme } from "./Provider"; +import { findTheme } from "./presets"; import { ThemeCustomizer } from "./pickers/StylePicker"; export function ThemeOnboardingPage({ @@ -10,8 +12,11 @@ export function ThemeOnboardingPage({ value?: string | null; onValueChange?: (id: string) => void; }) { - const [localThemeId, setLocalThemeId] = useState(null); - const chosenThemeId = value === undefined ? localThemeId : value; + const { themes } = useTheme(); + const [localThemeId, setLocalThemeId] = useState( + () => findTheme(themes, configuredDefaultThemeId())?.id ?? null, + ); + const chosenThemeId = value ?? localThemeId; useOnboardingStep({ canContinue: chosenThemeId !== null }); const choose = (id: string) => { diff --git a/src/theme/Provider.tsx b/src/theme/Provider.tsx index e048d8f..61f7faa 100644 --- a/src/theme/Provider.tsx +++ b/src/theme/Provider.tsx @@ -57,7 +57,7 @@ const DESIGN_NUMBER_FIELDS = [ const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect; -function configuredDefaultThemeId() { +export function configuredDefaultThemeId() { return typeof __METHANIUM_UI_DEFAULT_THEME_ID__ === "string" ? __METHANIUM_UI_DEFAULT_THEME_ID__ : null; diff --git a/src/theme/presets.ts b/src/theme/presets.ts index 9558f5a..18ded49 100644 --- a/src/theme/presets.ts +++ b/src/theme/presets.ts @@ -53,12 +53,20 @@ export const BUILT_IN_THEMES = defineThemes([ --sidebar-primary: oklch(0.58 0.12 185); } :root.dark[data-theme="tensamin"] { - --background: oklch(0.145 0 0); - --card: oklch(0.2 0 0); - --sidebar: color-mix(in oklch, var(--background) 97%, white); - --primary: oklch(0.68 0.12 184); + --background: oklch(0.21 0 0); + --card: oklch(0.25 0 0); + --popover: oklch(0.25 0 0); + --secondary: oklch(0.31 0 0); + --muted: oklch(0.3 0 0); + --accent: oklch(0.31 0 0); + --border: oklch(1 0 0 / 15%); + --input: oklch(1 0 0 / 20%); + --sidebar: color-mix(in oklch, var(--background) 98%, white); + --sidebar-accent: oklch(0.3 0 0); + --sidebar-border: oklch(1 0 0 / 15%); + --primary: oklch(0.69 0.12 184); --primary-foreground: oklch(0.16 0.025 190); - --primary-foreground-alt: oklch(0.72 0.13 183); + --primary-foreground-alt: oklch(0.73 0.13 183); } :root[data-theme="tensamin"] [data-slot] { --tensamin-edge: var(--border); @@ -124,6 +132,20 @@ export const BUILT_IN_THEMES = defineThemes([ :root[data-theme="tensamin"] :where([data-slot="button"], [data-slot="badge"], [data-slot="toggle"])[data-variant="outline"] { --tensamin-edge: var(--input); } +:root[data-theme="tensamin"] [data-slot][data-variant="outline"]:not([data-slot="button"]):not([data-state="on"]):not([aria-pressed="true"]):not([data-active]) { + background-color: color-mix(in oklch, var(--background) 93%, var(--foreground)); +} +:root[data-theme="tensamin"] [data-slot="button"][data-variant="outline"], +:root[data-theme="tensamin"] :where([data-slot="input"], [data-slot="textarea"], [data-slot="select-trigger"], [data-slot="native-select"], [data-slot="input-group"], [data-slot="checkbox"]:not([data-checked]), [data-slot="radio-group-item"]:not([data-checked]), [data-slot="input-otp-slot"]) { + background-color: color-mix(in oklch, var(--background) 92%, white); +} +:root[data-theme="tensamin"] [data-slot][data-variant="outline"]:not([data-slot="button"]):not([data-state="on"]):not([aria-pressed="true"]):not([data-active]):is(:hover, :focus-visible, :focus-within, [aria-expanded="true"]) { + background-color: color-mix(in oklch, var(--background) 89%, var(--foreground)); +} +:root[data-theme="tensamin"] [data-slot="button"][data-variant="outline"]:is(:hover, :focus-visible, [aria-expanded="true"]), +:root[data-theme="tensamin"] :where([data-slot="input"], [data-slot="textarea"], [data-slot="select-trigger"], [data-slot="native-select"], [data-slot="input-group"]):is(:hover, :focus-visible, :focus-within, [aria-expanded="true"]) { + background-color: color-mix(in oklch, var(--background) 88%, white); +} :root[data-theme="tensamin"] :where([data-slot="input"], [data-slot="textarea"], [data-slot="select-trigger"], [data-slot="native-select"], [data-slot="input-group"], [data-slot="badge"][data-variant="outline"], [data-slot="toggle"][data-variant="outline"]):is(:hover, :focus-visible, :focus-within) { --tensamin-edge: color-mix(in oklch, var(--input) 75%, var(--ring)); } @@ -136,6 +158,9 @@ export const BUILT_IN_THEMES = defineThemes([ } :root[data-theme="tensamin"] [data-slot][aria-invalid="true"] { --tensamin-edge: var(--destructive); +} +:root[data-theme="tensamin"] [role="tablist"].grid.grid-cols-2.bg-card.rounded-4xl > [role="tab"][aria-selected="false"] { + color: color-mix(in srgb, var(--muted-foreground) 75%, black); }`, }, { @@ -333,6 +358,9 @@ export const BUILT_IN_THEMES = defineThemes([ font-weight: 500; transition-duration: 100ms; } +:root[data-theme="methanium"] [data-slot="button"]:active { + translate: none; +} :root[data-theme="methanium"] [data-slot="button"][data-size="xs"] { height: calc(2rem * var(--ui-density)); } @@ -368,11 +396,11 @@ export const BUILT_IN_THEMES = defineThemes([ :root[data-theme="methanium"] [data-slot="button"][data-variant="default"] { background-color: var(--primary); color: var(--primary-foreground); - border-color: transparent; + border: 1px solid var(--primary); } :root[data-theme="methanium"] [data-slot="button"][data-variant="default"]:hover { - background-color: var(--primary); - border-color: color-mix(in srgb, var(--ring) 60%, transparent); + background-color: var(--primary-foreground-alt); + border: 1px solid var(--primary); } :root[data-theme="methanium"] [data-slot="button"][data-variant="secondary"] { background-color: var(--secondary); @@ -404,9 +432,13 @@ export const BUILT_IN_THEMES = defineThemes([ :root.dark[data-theme="methanium"] [data-slot="button"][data-variant="subtleDefault"]:hover { background-color: color-mix(in srgb, var(--primary-foreground-alt) 20%, transparent); } +:root[data-theme="methanium"] [data-slot][data-variant="destructive"] { + border: 1px solid var(--destructive); +} :root[data-theme="methanium"] [data-slot="button"][data-variant="destructive"]:hover { background-color: color-mix(in srgb, var(--destructive) 10%, transparent); - border-color: color-mix(in srgb, var(--ring) 60%, transparent); + border: 1px solid var(--destructive); + color: color-mix(in srgb, var(--destructive) 90%, white); } :root.dark[data-theme="methanium"] [data-slot="button"][data-variant="destructive"]:hover { background-color: color-mix(in srgb, var(--destructive) 20%, transparent);