bourdon/simple-react-app-kit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(workspace): consume revised color tokens

Browse Source
This commit is contained in:
Maofeng
2026-09-29 17:08:16 +08:00
parent 91e010cff7
commit ffe180f482
27 changed files with 302 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/pages/login-page.tsx
+1 -1
View File
@@ -183,7 +183,7 @@ function Field({
Component: FieldInputComponent
}) {
return (
<fieldset className="relative flex h-12 items-center rounded-lg border-2 border-border p-0 focus-within:border-primary focus-within:[&_label]:opacity-100">
<fieldset className="relative flex h-12 items-center rounded-lg border-2 border-border p-0 focus-within:border-accent focus-within:[&_label]:opacity-100">
<legend className="ml-2 flex h-0 px-0">
<label
className="h-fit -translate-y-1/2 px-1 text-sm opacity-50"
docs/src/index.css
+11 -8
View File
@@ -33,8 +33,8 @@
--card-foreground: var(--docs-foreground-light, var(--color-slate-950));
--popover: var(--docs-background-light, var(--color-white));
--popover-foreground: var(--docs-foreground-light, var(--color-slate-950));
--primary: var(--color-indigo-600);
--primary-foreground: var(--color-white);
--accent: var(--color-indigo-600);
--accent-foreground: var(--color-white);
--secondary: var(--docs-surface-light, var(--color-slate-100));
--secondary-foreground: var(
--docs-foreground-light,
@@ -42,8 +42,11 @@
);
--muted: var(--docs-surface-light, var(--color-slate-100));
--muted-foreground: var(--docs-muted-light, var(--color-slate-600));
--accent: var(--docs-surface-light, var(--color-slate-100));
--accent-foreground: var(--docs-foreground-light, var(--color-slate-950));
--highlight: var(--docs-surface-light, var(--color-slate-100));
--highlight-foreground: var(
--docs-foreground-light,
var(--color-slate-950)
);
--border: var(--color-slate-200);
--input: var(--color-slate-200);
--ring: var(--color-indigo-500);
@@ -59,14 +62,14 @@
--card-foreground: var(--docs-foreground-dark, var(--color-slate-100));
--popover: var(--docs-surface-dark, var(--color-slate-900));
--popover-foreground: var(--docs-foreground-dark, var(--color-slate-100));
--primary: var(--color-indigo-400);
--primary-foreground: var(--color-slate-950);
--accent: var(--color-indigo-400);
--accent-foreground: var(--color-slate-950);
--secondary: var(--color-slate-800);
--secondary-foreground: var(--docs-foreground-dark, var(--color-slate-100));
--muted: var(--color-slate-800);
--muted-foreground: var(--docs-muted-dark, var(--color-slate-400));
--accent: var(--color-slate-800);
--accent-foreground: var(--docs-foreground-dark, var(--color-slate-100));
--highlight: var(--color-slate-800);
--highlight-foreground: var(--docs-foreground-dark, var(--color-slate-100));
--border: var(--color-slate-800);
--input: var(--color-slate-700);
--ring: var(--color-indigo-400);
packages/blocks/src/blocks/appearance/theme-color-picker.tsx
+4 -4
View File
@@ -33,12 +33,12 @@ function createSwatches<T extends ThemeColor>(
return {
name,
light: {
background: theme.cssVars.light.primary,
foreground: theme.cssVars.light["primary-foreground"],
background: theme.cssVars.light.accent,
foreground: theme.cssVars.light["accent-foreground"],
},
dark: {
background: theme.cssVars.dark.primary,
foreground: theme.cssVars.dark["primary-foreground"],
background: theme.cssVars.dark.accent,
foreground: theme.cssVars.dark["accent-foreground"],
},
}
})
packages/blocks/src/blocks/appearance/theme-preview.tsx
+5 -5
View File
@@ -24,7 +24,7 @@ export function ThemePreview({
...Object.fromEntries(
Object.entries(themeVariables).map(([key, value]) => [`--${key}`, value])
),
"--preview-base": baseTheme.cssVars[scheme].primary,
"--preview-base": baseTheme.cssVars[scheme].accent,
} as CSSProperties
return (
@@ -39,7 +39,7 @@ export function ThemePreview({
<div className="flex gap-3">
<div className="flex w-16 flex-col gap-1 py-5 [&>div]:bg-foreground/10">
<div className="h-2.5 w-full rounded-r-full" />
<div className="h-2.5 w-full rounded-r-full bg-primary!" />
<div className="h-2.5 w-full rounded-r-full bg-accent!" />
<div className="h-2.5 w-full rounded-r-full" />
<div className="h-2.5 w-full rounded-r-full" />
<div className="mt-auto h-2.5 w-full rounded-r-full" />
@@ -50,7 +50,7 @@ export function ThemePreview({
<div className="h-2.5 w-3 rounded-sm" />
<div className="ml-auto size-2.5 rounded-sm" />
<div className="h-2.5 w-3.75 rounded-sm" />
<div className="h-2.5 w-5 rounded-sm bg-primary!" />
<div className="h-2.5 w-5 rounded-sm bg-accent!" />
</div>
<div className="grid grid-cols-3 gap-2 [&>div]:rounded-sm [&>div]:bg-foreground/10">
<div className="flex h-18 items-end gap-2 p-2 compacted:gap-1">
@@ -85,8 +85,8 @@ export function ThemePreview({
<div className="h-1 w-6 rounded-xs bg-(--preview-base)/55 compacted:hidden" />
</div>
<div className="flex items-center gap-1">
<div className="h-2 w-6 rounded-sm bg-primary" />
<div className="h-2 w-6 rounded-sm bg-primary/75" />
<div className="h-2 w-6 rounded-sm bg-accent" />
<div className="h-2 w-6 rounded-sm bg-accent/75" />
</div>
</div>
<div className="h-18" />
packages/blocks/src/blocks/appearance/theme.test.ts
+4 -2
View File
@@ -27,7 +27,8 @@ describe("appearance themes", () => {
expect(variables.background).toBe(
getTheme("stone")?.cssVars.light.background
)
expect(variables.primary).toBe(getTheme("rose")?.cssVars.light.primary)
expect(variables.highlight).toBe(getTheme("stone")?.cssVars.light.highlight)
expect(variables.accent).toBe(getTheme("rose")?.cssVars.light.accent)
})
it("builds explicit and system color-scheme rules", () => {
@@ -40,6 +41,7 @@ describe("appearance themes", () => {
expect(styleSheet).toContain(".ui\\:dark{")
expect(styleSheet).toContain("@media (prefers-color-scheme:dark)")
expect(styleSheet).toContain("--background:")
expect(styleSheet).toContain("--primary:")
expect(styleSheet).toContain("--accent:")
expect(styleSheet).toContain("--highlight:")
})
})
packages/blocks/src/blocks/appearance/themes.ts
+241 -241
View File
File diff suppressed because it is too large Load Diff
packages/blocks/src/blocks/chats/chat-conversation-list.tsx
+5 -5
View File
@@ -70,7 +70,7 @@ export function ChatConversationList({
className={cn(
"group grid w-full grid-cols-[auto_minmax(0,1fr)] items-center gap-x-3.5 rounded-xl px-3 py-3 text-start transition-colors outline-none hover:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50",
active &&
"bg-primary text-primary-foreground hover:bg-primary/90"
"bg-accent text-accent-foreground hover:bg-accent/90"
)}
>
<ConversationAvatar conversation={conversation} />
@@ -82,7 +82,7 @@ export function ChatConversationList({
<span
className={cn(
"shrink-0 text-xs text-muted-foreground",
active && "text-primary-foreground/70"
active && "text-accent-foreground/70"
)}
>
{conversation.lastActivityLabel}
@@ -91,7 +91,7 @@ export function ChatConversationList({
<span
className={cn(
"min-w-0 truncate text-sm text-muted-foreground",
active && "text-primary-foreground/75"
active && "text-accent-foreground/75"
)}
>
{conversation.lastMessage ?? conversation.description}
@@ -99,8 +99,8 @@ export function ChatConversationList({
{conversation.unreadCount && conversation.unreadCount > 0 ? (
<span
className={cn(
"grid size-5 shrink-0 place-items-center self-end justify-self-end rounded-full bg-primary text-xs font-medium text-primary-foreground",
active && "bg-primary-foreground text-primary"
"grid size-5 shrink-0 place-items-center self-end justify-self-end rounded-full bg-accent text-xs font-medium text-accent-foreground",
active && "bg-accent-foreground text-accent"
)}
>
{conversation.unreadCount > 99
packages/blocks/src/blocks/layout/app-breadcrumb.tsx
+3 -3
View File
@@ -210,7 +210,7 @@ function BreadcrumbNavigationMenuItem({
<DropdownMenuSub>
<DropdownMenuSubTrigger
aria-current={isCurrent ? "page" : undefined}
className="aria-[current=page]:bg-primary/10 aria-[current=page]:text-primary"
className="aria-[current=page]:bg-accent/10 aria-[current=page]:text-accent"
>
<BreadcrumbEntryContent entry={entry} />
</DropdownMenuSubTrigger>
@@ -241,7 +241,7 @@ function BreadcrumbNavigationMenuItem({
return (
<DropdownMenuItem
aria-current={isCurrent ? "page" : undefined}
className="aria-[current=page]:bg-primary/10 aria-[current=page]:text-primary"
className="aria-[current=page]:bg-accent/10 aria-[current=page]:text-accent"
render={
entry.to === "/" ? (
<Link to="/" />
@@ -406,7 +406,7 @@ export function AppBreadcrumb() {
{item.kind === "menu" ? (
<BreadcrumbMenu entries={item.entries} />
) : isCurrent ? (
<BreadcrumbPage className="inline-flex min-w-0 items-center gap-1.5 text-primary">
<BreadcrumbPage className="inline-flex min-w-0 items-center gap-1.5 text-accent">
{item.entry.icon && (
<Icon
name={item.entry.icon}
packages/blocks/src/blocks/layout/app-query-indicator.tsx
+1 -1
View File
@@ -22,7 +22,7 @@ export function AppQueryIndicator({ className }: { className?: string }) {
className
)}
>
<span className="size-4.5 animate-spin rounded-full border-2 border-foreground/10 border-t-primary" />
<span className="size-4.5 animate-spin rounded-full border-2 border-foreground/10 border-t-accent" />
</span>
)
}
packages/blocks/src/blocks/layout/header-action-button.tsx
+1 -1
View File
@@ -27,7 +27,7 @@ export function HeaderActionButton({
{showIndicator && (
<span
aria-hidden="true"
className="absolute top-1 right-1 inline-flex size-2 animate-pulse rounded-md bg-primary"
className="absolute top-1 right-1 inline-flex size-2 animate-pulse rounded-md bg-accent"
/>
)}
</Button>
packages/blocks/src/blocks/navigation/flyout-navigation.tsx
+2 -2
View File
@@ -33,7 +33,7 @@ export function SidebarFlyoutMenuItems({
<DropdownMenuSubTrigger
aria-current={routeState.isCurrent ? "page" : undefined}
data-route-active={routeState.isActive ? "" : undefined}
className="h-9 gap-3 px-3 py-1 data-route-active:bg-primary/10 data-route-active:text-primary! data-route-active:**:text-primary!"
className="h-9 gap-3 px-3 py-1 data-route-active:bg-accent/10 data-route-active:text-accent! data-route-active:**:text-accent!"
>
{iconElement}
<span className="min-w-0 flex-1 truncate">
@@ -56,7 +56,7 @@ export function SidebarFlyoutMenuItems({
key={item.id}
aria-current={routeState.isCurrent ? "page" : undefined}
data-route-active={routeState.isActive ? "" : undefined}
className="h-9 gap-3 px-3 py-1 data-route-active:bg-primary/10 data-route-active:text-primary! data-route-active:**:text-primary!"
className="h-9 gap-3 px-3 py-1 data-route-active:bg-accent/10 data-route-active:text-accent! data-route-active:**:text-accent!"
render={item.to ? <NavigationLink to={item.to} /> : undefined}
>
{iconElement}
packages/blocks/src/blocks/navigation/navigation-button.tsx
+1 -1
View File
@@ -61,7 +61,7 @@ export function NavigationButton({
const baseButtonProps: useRender.ElementProps<"button"> = {
className: cn(
"group/button relative items-center rounded-md [&>span]:inline-flex [&>span]:items-center",
"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground data-route-active:bg-primary/10 data-route-active:text-primary dark:hover:bg-muted/50 dark:aria-expanded:bg-muted/50 dark:data-route-active:bg-muted/50",
"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground data-route-active:bg-accent/10 data-route-active:text-accent dark:hover:bg-muted/50 dark:aria-expanded:bg-muted/50 dark:data-route-active:bg-muted/50",
layout === "stacked"
? [
"grid grid-cols-[minmax(0,1fr)_auto_auto_minmax(0,1fr)]",
packages/blocks/src/blocks/notifications/notification-item.tsx
+3 -3
View File
@@ -156,7 +156,7 @@ export function NotificationItem({
role="listitem"
data-read={notification.isRead}
className={cn(
"relative rounded-none px-4 py-3.5 hover:bg-muted data-[read=false]:bg-primary/[0.035]",
"relative rounded-none px-4 py-3.5 hover:bg-muted data-[read=false]:bg-accent/[0.035]",
className
)}
{...props}
@@ -167,7 +167,7 @@ export function NotificationItem({
</ItemMedia>
)}
<ItemContent>
<ItemTitle className="line-clamp-2 [&_a:hover]:text-primary">
<ItemTitle className="line-clamp-2 [&_a:hover]:text-accent">
{notification.to ? (
<NotificationRouteLink to={notification.to}>
{notification.title}
@@ -204,7 +204,7 @@ export function NotificationItem({
{!notification.isRead && (
<span
aria-hidden="true"
className="mt-2 size-2 shrink-0 self-start rounded-full bg-primary"
className="mt-2 size-2 shrink-0 self-start rounded-full bg-accent"
/>
)}
{notification.actions && notification.actions.length > 0 && (
packages/lexical/src/actions/color-picker.tsx
+1 -1
View File
@@ -187,7 +187,7 @@ function ColorPickerControl({
})}
</div>
<div className="flex h-9 items-center gap-2 rounded-lg border px-2 focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/50 hover:bg-muted">
<label className="relative grid size-6 shrink-0 cursor-pointer place-items-center rounded-md hover:bg-accent">
<label className="relative grid size-6 shrink-0 cursor-pointer place-items-center rounded-md hover:bg-highlight">
<Pipette className="size-4 text-muted-foreground" />
<input
type="color"
packages/lexical/src/actions/date.tsx
+1 -1
View File
@@ -66,7 +66,7 @@ function DateControl({
return (
<DropdownMenuItem
disabled={disabled}
className={cn(active && "bg-accent text-accent-foreground")}
className={cn(active && "bg-highlight text-highlight-foreground")}
onMouseDown={(event) => event.preventDefault()}
onClick={() => {
runWithEditorFocus(context.editor, () => {
packages/lexical/src/components/image-resizer.tsx
+2 -2
View File
@@ -224,14 +224,14 @@ export function ImageResizer({
<>
<span
aria-hidden="true"
className="pointer-events-none absolute inset-0 rounded-[inherit] border-2 border-primary"
className="pointer-events-none absolute inset-0 rounded-[inherit] border-2 border-accent"
/>
{RESIZE_HANDLES.map((handle) => (
<button
key={handle.direction}
type="button"
aria-label={resizeLabels[handle.direction]}
className={`absolute z-10 size-2.5 rounded-[2px] border border-primary bg-background shadow-xs ${handle.className}`}
className={`absolute z-10 size-2.5 rounded-[2px] border border-accent bg-background shadow-xs ${handle.className}`}
data-lexical-image-resize-handle={handle.direction}
style={{ cursor: handle.cursor }}
onPointerDown={(event) => startResize(event, handle.direction)}
packages/lexical/src/embed.tsx
+1 -1
View File
@@ -271,7 +271,7 @@ function LexicalEmbed({
data-lexical-embed-type={embedType}
className={cn(
"my-3 rounded-xl",
isSelected && "ring-2 ring-primary ring-offset-2 ring-offset-background"
isSelected && "ring-2 ring-accent ring-offset-2 ring-offset-background"
)}
onClick={(event) => {
if (!event.shiftKey) clearSelection()
packages/lexical/src/nodes/media-node.tsx
+1 -1
View File
@@ -359,7 +359,7 @@ function LexicalMedia({
payload.alignment === "end" && "items-end",
payload.kind === "video" &&
isSelected &&
"ring-2 ring-primary ring-offset-2 ring-offset-background"
"ring-2 ring-accent ring-offset-2 ring-offset-background"
)}
>
{payload.kind === "image" ? (
packages/lexical/src/plugins/draggable-block-plugin.tsx
+1 -1
View File
@@ -101,7 +101,7 @@ export function LexicalDraggableBlockPlugin() {
ref={targetLineRef}
aria-hidden="true"
data-slot="lexical-drop-indicator"
className="pointer-events-none absolute top-0 left-0 z-20 h-1 rounded-full bg-primary opacity-0"
className="pointer-events-none absolute top-0 left-0 z-20 h-1 rounded-full bg-accent opacity-0"
/>
}
/>
packages/lexical/src/plugins/link-popover-plugin.tsx
+1 -1
View File
@@ -331,7 +331,7 @@ export function LexicalLinkPopoverPlugin() {
href={activeLink.url}
target="_blank"
rel="noreferrer"
className="block max-h-24 overflow-y-auto px-1 break-all text-primary underline underline-offset-3"
className="block max-h-24 overflow-y-auto px-1 break-all text-accent underline underline-offset-3"
>
{activeLink.url}
</a>
packages/lexical/src/styles/globals.css
+3 -3
View File
@@ -40,8 +40,8 @@
}
.lexical-checklist-item-checked::before {
border-color: var(--color-primary);
background: var(--color-primary);
border-color: var(--color-accent);
background: var(--color-accent);
}
.lexical-checklist-item-checked::after {
@@ -51,7 +51,7 @@
width: 0.3rem;
height: 0.55rem;
content: "";
border: solid var(--color-primary-foreground);
border: solid var(--color-accent-foreground);
border-width: 0 0.125rem 0.125rem 0;
transform: rotate(45deg);
}
packages/lexical/src/theme.ts
+1 -1
View File
@@ -5,7 +5,7 @@ export const lexicalTheme = {
h3: "mt-3 mb-2 text-lg font-semibold",
},
hr: "my-4 border-t",
link: "text-primary underline underline-offset-2",
link: "text-accent underline underline-offset-2",
list: {
checklist: "lexical-checklist",
listitem: "my-1",
packages/media/src/media-grid.tsx
+2 -2
View File
@@ -46,7 +46,7 @@ export function MediaGrid({
onDoubleClick={() => onDetails(asset)}
className={cn(
"group relative mb-3 block w-full break-inside-avoid overflow-hidden rounded-lg bg-muted text-left ring-offset-2 ring-offset-background transition-shadow outline-none focus-visible:ring-3 focus-visible:ring-ring",
(active || selected) && "ring-2 ring-primary"
(active || selected) && "ring-2 ring-accent"
)}
>
{asset.kind === "image" ? (
@@ -90,7 +90,7 @@ export function MediaGrid({
</span>
{selected && (
<span className="absolute top-2 right-2 grid size-6 place-items-center rounded-full bg-primary text-primary-foreground shadow">
<span className="absolute top-2 right-2 grid size-6 place-items-center rounded-full bg-accent text-accent-foreground shadow">
<CheckIcon className="size-4" strokeWidth={3} />
</span>
)}
packages/media/src/sidebar.tsx
+2 -2
View File
@@ -199,7 +199,7 @@ export function MediaFilterTabs({
className={cn(
"flex h-8 shrink-0 items-center gap-1.5 rounded-lg px-3 text-xs",
folder === undefined && filter === value
? "bg-primary text-primary-foreground"
? "bg-accent text-accent-foreground"
: "bg-muted"
)}
>
@@ -259,7 +259,7 @@ function SidebarButton({
onClick={onClick}
className={cn(
"flex h-9 w-full items-center gap-2 rounded-lg px-3 text-start text-sm transition-colors outline-none hover:bg-muted focus-visible:ring-3 focus-visible:ring-ring/30",
active && "bg-primary text-primary-foreground hover:bg-primary"
active && "bg-accent text-accent-foreground hover:bg-accent"
)}
>
<Icon className="size-4" />
packages/page/src/tabs.tsx
+1 -1
View File
@@ -143,7 +143,7 @@ export function PageTabsTrigger({ className, ...props }: PageTabsTriggerProps) {
variant === "card" &&
getCardPageTabsClassName(
side,
"bg-muted/20 not-data-active:hover:bg-muted data-active:border-transparent data-active:bg-transparent data-active:text-primary"
"bg-muted/20 not-data-active:hover:bg-muted data-active:border-transparent data-active:bg-transparent data-active:text-accent"
),
variant === "default" && "rounded-lg px-3 data-active:text-foreground",
className
packages/search/src/dialog.tsx
+1 -1
View File
@@ -119,7 +119,7 @@ export function SearchDialog({
<label className="flex h-full min-w-0 flex-1 items-center gap-2">
<span className="inline-flex size-8 shrink-0 items-center justify-center">
{search.isLoading || search.isLoadingMore ? (
<LoaderCircleIcon className="animate-spin text-primary" />
<LoaderCircleIcon className="animate-spin text-accent" />
) : (
<SearchIcon className="opacity-50" />
)}
packages/search/src/results.tsx
+2 -2
View File
@@ -133,7 +133,7 @@ function SearchResultRow({
</span>
))}
</span>
<CornerDownLeftIcon className="shrink-0 text-primary opacity-0 transition-opacity group-hover/search-result:opacity-100 group-data-selected/search-result:opacity-100" />
<CornerDownLeftIcon className="shrink-0 text-accent opacity-0 transition-opacity group-hover/search-result:opacity-100 group-data-selected/search-result:opacity-100" />
</Command.Item>
)
}
@@ -165,7 +165,7 @@ function HighlightedText({ text, query }: { text: string; query: string }) {
offset += segment.text.length
return segment.highlighted ? (
<mark key={key} className="rounded-sm bg-primary/15 px-0.5 text-primary">
<mark key={key} className="rounded-sm bg-accent/15 px-0.5 text-accent">
{segment.text}
</mark>
) : (