xiaoxue_admin
/
Folo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: replace some legacy css color variables 

Signed-off-by: Innei <tukon479@gmail.com>
This commit is contained in:
Innei 2025-04-22 23:12:25 +08:00
parent 2433d75e2a
commit 1c588f39ac
No known key found for this signature in database
GPG Key ID: 0F62D33977F021F7
41 changed files with 126 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/desktop/src/renderer/src/components/ui/auto-completion/AutoCompletion.tsx
View File

@ -99,7 +99,7 @@ export const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(
onWheel={stopPropagation}
className={cn(
"pointer-events-auto max-h-48 grow",
"shadow-perfect border-border bg-popover text-popover-foreground overflow-auto rounded-md border",
"shadow-perfect border-border bg-material-medium text-text backdrop-blur-background overflow-auto rounded-md border",
"w-[var(--input-width)] empty:invisible",
)}
>

6
apps/desktop/src/renderer/src/components/ui/dropdown-menu/dropdown-menu.tsx
View File

@ -62,7 +62,7 @@ const DropdownMenuSubContent = React.forwardRef<
<DropdownMenuPrimitive.SubContent
ref={ref}
className={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg",
"bg-material-medium backdrop-blur-background text-text data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg",
className,
)}
{...props}
@ -80,7 +80,7 @@ const DropdownMenuContent = React.forwardRef<
ref={ref}
sideOffset={sideOffset}
className={cn(
"shadow-context-menu bg-theme-background text-theme-foreground z-50 min-w-32 overflow-hidden rounded-md border p-1",
"shadow-context-menu bg-material-medium backdrop-blur-background text-text z-50 min-w-32 overflow-hidden rounded-md border p-1",
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className,
)}
@ -164,7 +164,7 @@ const DropdownMenuSeparator = React.forwardRef<
>(({ className, ...props }, ref) => (
<DropdownMenuPrimitive.Separator
ref={ref}
className={cn("bg-muted -mx-1 my-1 h-px", className)}
className={cn("bg-material-ultra-thin -mx-1 my-1 h-px", className)}
{...props}
/>
))

7
apps/desktop/src/renderer/src/components/ui/modal/stacked/modal.tsx
View File

@ -1,4 +1,3 @@
import { Divider } from "@follow/components/ui/divider/index.js"
import { RootPortalProvider } from "@follow/components/ui/portal/provider.js"
import { EllipsisHorizontalTextWithTooltip } from "@follow/components/ui/typography/index.js"
import { ZIndexProvider } from "@follow/components/ui/z-index/index.js"
@ -213,7 +212,7 @@ export const ModalInternal = memo(
[autoFocus],
)
const measureDragConstraints = useCallback((constraints: BoundingBox) => {
const measureDragConstraints = useRef((constraints: BoundingBox) => {
if (getOS() === "Windows") {
return {
...constraints,
@ -221,7 +220,7 @@ export const ModalInternal = memo(
}
}
return constraints
}, [])
}).current
useImperativeHandle(ref, () => modalElementRef.current!)
const currentModalZIndex = MODAL_STACK_Z_INDEX + index * 2
@ -382,7 +381,7 @@ export const ModalInternal = memo(
</Dialog.DialogClose>
)}
</div>
<Divider className="my-2 shrink-0 border-slate-200 opacity-80 dark:border-neutral-800" />
<div className="my-2 h-px w-full shrink-0 bg-slate-200 dark:bg-neutral-800" />
<div className="-mx-2 min-h-0 shrink grow overflow-auto px-6 py-2">
<ModalContext modalContextProps={ModalContextProps} isTop={!!isTop}>

32
apps/desktop/src/renderer/src/modules/achievement/AchievementModalContent.tsx
View File

@ -242,7 +242,7 @@ export const AchievementModalContent: FC = () => {
</MotionButtonBase>
)}
</div>
<div className="text-muted-foreground flex items-center text-sm">
<div className="text-text-secondary flex items-center text-sm">
{t(copy.description)}
</div>
</div>
@ -261,16 +261,30 @@ export const AchievementModalContent: FC = () => {
<IncompleteButton achievement={achievement} refetch={refetch} />
)}
{achievement.type === "received" && (
<div
<button
type="button"
onClick={() => {
if (copy.video) {
presentBadgeVideo(achievement.actionId)
}
}}
className={styledButtonVariant({
variant: "outline",
className:
className: [
"dark:text-foreground relative gap-1 border-green-200 !bg-green-100/50 text-green-800 dark:border-green-200/20 dark:!bg-green-100/5",
copy.video ? "cursor-button" : "cursor-default",
],
})}
>
<i className="i-mgc-check-filled" />
{t("achievement.all_done")}
</div>
{copy.video && achievement.type === "received" ? (
<>View Badge</>
) : (
<>
<i className="i-mgc-check-filled" />
{t("achievement.all_done")}
</>
)}
</button>
)}
{achievement.type === "audit" && (
@ -300,9 +314,7 @@ export const AchievementModalContent: FC = () => {
</ul>
</ScrollArea>
<p className="text-muted-foreground mt-4 pb-2 text-xs">
* {t("achievement.nft_coming_soon")}
</p>
<p className="text-text-tertiary mt-4 pb-4 text-xs">* {t("achievement.nft_coming_soon")}</p>
</div>
)
}
@ -428,7 +440,7 @@ const IncompleteButton: FC<{
</div>
<div className="duration-200 group-hover:opacity-30">
<span className="center relative ml-2 inline-flex w-24 -translate-y-1 flex-col *:!m-0">
<small className="text-muted-foreground shrink-0 text-xs leading-tight">
<small className="text-text shrink-0 text-xs leading-tight">
{achievement.progress} / {achievement.progressMax}
</small>
<span className="bg-accent/10 relative h-1 w-full overflow-hidden rounded-full">

14
apps/desktop/src/renderer/src/modules/app-layout/feed-column/components/PodcastButton.tsx
View File

@ -39,7 +39,7 @@ export const PodcastButton = ({ feed }: { feed: FeedModel }) => {
>
{entry.entries.title}
</Marquee>
<div className="text-muted-foreground mt-0.5 overflow-hidden truncate text-xs">
<div className="text-text mt-0.5 overflow-hidden truncate text-xs">
<span>{feed.title}</span>
<span> · </span>
<span>
@ -92,11 +92,7 @@ export const PodcastButton = ({ feed }: { feed: FeedModel }) => {
}
const ActionIcon = ({ className, onClick }: { className?: string; onClick?: () => void }) => (
<button
type="button"
className="center text-muted-foreground size-10 rounded-full"
onClick={onClick}
>
<button type="button" className="center text-text size-10 rounded-full" onClick={onClick}>
<i className={className} />
</button>
)
@ -113,10 +109,8 @@ const PlaybackRateButton = () => {
}
return (
<button onClick={handleClick}>
<span className="text-muted-foreground block font-mono text-xs">
{rates[currentIndex]!.toFixed(2)}x
</span>
<button onClick={handleClick} type="button">
<span className="text-text block font-mono text-xs">{rates[currentIndex]!.toFixed(2)}x</span>
</button>
)
}

4
apps/desktop/src/renderer/src/modules/auth/LoginModalContent.tsx
View File

@ -57,7 +57,7 @@ export const LoginModalContent = (props: LoginModalContentProps) => {
<div className="my-3 w-full space-y-2">
<div className="flex items-center justify-center">
<Divider className="flex-1" />
<p className="text-muted-foreground px-4 text-center text-sm">{t("login.or")}</p>
<p className="text-text-tertiary px-4 text-center text-sm">{t("login.or")}</p>
<Divider className="flex-1" />
</div>
</div>
@ -73,7 +73,7 @@ export const LoginModalContent = (props: LoginModalContentProps) => {
>
<div
className={clsx(
"center hover:bg-muted inline-flex rounded-full border p-2.5 duration-200 [&_svg]:size-6",
"center hover:bg-material-medium inline-flex rounded-full border p-2.5 duration-200 [&_svg]:size-6",
overrideAuthProvidersClassName[key],
)}
dangerouslySetInnerHTML={{

6
apps/desktop/src/renderer/src/modules/discover/recommendations-card.tsx
View File

@ -87,7 +87,7 @@ export const RecommendationCard: FC<RecommendationCardProps> = memo(
>
<button
type="button"
className="before:bg-accent group-hover:bg-muted relative rounded p-0.5 px-1 text-left duration-200 before:absolute before:inset-y-0 before:-left-2 before:mb-auto before:mt-2 before:size-1.5 before:rounded-full before:content-['']"
className="before:bg-accent group-hover:bg-material-medium relative rounded p-0.5 px-1 text-left duration-200 before:absolute before:inset-y-0 before:-left-2 before:mb-auto before:mt-2 before:size-1.5 before:rounded-full before:content-['']"
onClick={() => {
present({
id: `recommendation-content-${route}`,
@ -111,7 +111,7 @@ export const RecommendationCard: FC<RecommendationCardProps> = memo(
})}
</ul>
<div className="text-muted-foreground mt-4 flex flex-col gap-2">
<div className="text-text-secondary mt-4 flex flex-col gap-2">
<div className="flex flex-1 items-center text-sm">
<i className="i-mingcute-hammer-line mr-1 shrink-0 translate-y-0.5 self-start" />
@ -141,7 +141,7 @@ export const RecommendationCard: FC<RecommendationCardProps> = memo(
key={c}
type="button"
className={clsx(
"bg-muted/50 hover:bg-muted cursor-pointer rounded px-1.5 duration-200",
"bg-material-medium hover:bg-material-medium cursor-pointer rounded px-1.5 duration-200",
!RSSHubCategories.includes(c) && "pointer-events-none opacity-50",
)}
>

4
apps/desktop/src/renderer/src/modules/entry-column/Items/picture-item.tsx
View File

@ -48,7 +48,7 @@ export function PictureItem({ entryId, entryPreview, translation }: UniversalIte
}}
/>
) : (
<div className="center bg-muted text-muted-foreground aspect-square w-full flex-col gap-1 rounded-md text-xs">
<div className="center bg-material-medium text-text-secondary aspect-square w-full flex-col gap-1 rounded-md text-xs">
<i className="i-mgc-sad-cute-re size-6" />
{t("entry_content.no_content")}
</div>
@ -127,7 +127,7 @@ export const PictureWaterFallItem = memo(function PictureWaterFallItem({
</div>
</MasonryItemFixedDimensionWrapper>
) : (
<div className="center bg-muted text-muted-foreground aspect-video flex-col gap-1 rounded-md text-xs">
<div className="center bg-material-medium text-text-secondary aspect-video flex-col gap-1 rounded-md text-xs">
<i className="i-mgc-sad-cute-re size-6" />
No media available
</div>

2
apps/desktop/src/renderer/src/modules/entry-column/Items/video-item.tsx
View File

@ -133,7 +133,7 @@ export function VideoItem({ entryId, entryPreview, translation }: UniversalItemP
showFallback={true}
/>
) : (
<div className="center bg-muted text-muted-foreground aspect-video w-full flex-col gap-1 rounded-md text-xs">
<div className="center bg-material-medium text-text-secondary aspect-video w-full flex-col gap-1 rounded-md text-xs">
<i className="i-mgc-sad-cute-re size-6" />
No media available
</div>

4
apps/desktop/src/renderer/src/modules/entry-content/components/EntryReadHistory.electron.tsx
View File

@ -54,9 +54,9 @@ export const EntryReadHistory: Component<{ entryId: string }> = ({ entryId }) =>
marginLeft: `-${LIMIT * 8}px`,
zIndex: LIMIT + 1,
}}
className="no-drag-region border-border bg-muted ring-background relative flex size-7 items-center justify-center rounded-full border ring-2"
className="no-drag-region border-border bg-material-medium ring-background relative flex size-7 items-center justify-center rounded-full border ring-2"
>
<span className="text-muted-foreground text-[10px] font-medium tabular-nums">
<span className="text-text-secondary text-[10px] font-medium tabular-nums">
+{Math.min(totalCount - LIMIT, 99)}
</span>
</button>

4
apps/desktop/src/renderer/src/modules/entry-content/components/EntryReadHistory.mobile.tsx
View File

@ -56,9 +56,9 @@ export const EntryReadHistory: Component<{ entryId: string }> = ({ entryId }) =>
marginLeft: `-${LIMIT * 8}px`,
zIndex: LIMIT + 1,
}}
className="no-drag-region border-border bg-muted ring-background relative flex size-7 items-center justify-center rounded-full border ring-2"
className="no-drag-region border-border bg-material-medium ring-background relative flex size-7 items-center justify-center rounded-full border ring-2"
>
<span className="text-muted-foreground text-[10px] font-medium tabular-nums">
<span className="text-text-secondary text-[10px] font-medium tabular-nums">
+{Math.min(totalCount - LIMIT, 99)}
</span>
</button>

2
apps/desktop/src/renderer/src/modules/entry-content/components/EntryReadHistory.shared.tsx
View File

@ -48,7 +48,7 @@ export const EntryUserRow: Component<{ userId: string }> = memo(({ userId }) =>
}}
role="button"
tabIndex={0}
className="cursor-button hover:bg-muted relative flex min-w-0 max-w-[50ch] shrink-0 items-center gap-2 truncate rounded-md p-1 px-2"
className="cursor-button hover:bg-material-medium relative flex min-w-0 max-w-[50ch] shrink-0 items-center gap-2 truncate rounded-md p-1 px-2"
>
<Avatar className="border-border ring-background block aspect-square size-7 overflow-hidden rounded-full border ring-1">
<AvatarImage src={replaceImgUrlIfNeed(user?.image || undefined)} />

2
apps/desktop/src/renderer/src/modules/player/corner-player.tsx
View File

@ -220,7 +220,7 @@ const CornerPlayerImpl = ({ hideControls, rounded }: ControlButtonProps) => {
</Marquee>
<div
className={cn(
"text-muted-foreground mt-0.5 overflow-hidden truncate text-xs",
"text-text-secondary mt-0.5 overflow-hidden truncate text-xs",
!isMobile && "group-hover:opacity-0",
)}
>

2
apps/desktop/src/renderer/src/modules/profile/email-management.tsx
View File

@ -59,7 +59,7 @@ export function EmailManagement() {
{user?.emailVerified ? t("profile.email.verified") : t("profile.email.unverified")}
</span>
</div>
<p className="text-muted-foreground group flex gap-2 text-sm">
<p className="text-text-secondary group flex gap-2 text-sm">
{user?.email}
<AnimatedCommandButton

2
apps/desktop/src/renderer/src/modules/profile/update-password-form.tsx
View File

@ -159,7 +159,7 @@ export const UpdatePasswordForm = () => {
export const NoPasswordHint = ({ i18nKey }: { i18nKey: string }) => {
return (
<p className="text-muted-foreground text-sm">
<p className="text-text-secondary text-sm">
<Trans
ns="settings"
i18nKey={i18nKey as any}

14
apps/desktop/src/renderer/src/modules/rsshub/set-modal-content.tsx
View File

@ -72,7 +72,7 @@ export function SetModalContent({
<table className="w-full">
<tbody className="divide-y-8 divide-transparent">
<tr>
<td className="text-muted-foreground w-24 text-sm">{t("rsshub.table.owner")}</td>
<td className="text-text-secondary w-24 text-sm">{t("rsshub.table.owner")}</td>
<td>
<UserAvatar
userId={instance.ownerUserId}
@ -82,21 +82,21 @@ export function SetModalContent({
</td>
</tr>
<tr>
<td className="text-muted-foreground text-sm">{t("rsshub.table.description")}</td>
<td className="text-text-secondary text-sm">{t("rsshub.table.description")}</td>
<td className="line-clamp-2">{instance.description}</td>
</tr>
<tr>
<td className="text-muted-foreground text-sm">{t("rsshub.table.price")}</td>
<td className="text-text-secondary text-sm">{t("rsshub.table.price")}</td>
<td className="flex items-center gap-1">
{instance.price} <i className="i-mgc-power text-accent" />
</td>
</tr>
<tr>
<td className="text-muted-foreground text-sm">{t("rsshub.table.userCount")}</td>
<td className="text-text-secondary text-sm">{t("rsshub.table.userCount")}</td>
<td>{instance.userCount}</td>
</tr>
<tr>
<td className="text-muted-foreground text-sm">{t("rsshub.table.userLimit")}</td>
<td className="text-text-secondary text-sm">{t("rsshub.table.userLimit")}</td>
<td>{instance.userLimit || t("rsshub.table.unlimited")}</td>
</tr>
</tbody>
@ -105,7 +105,7 @@ export function SetModalContent({
</Card>
{details.data?.purchase && (
<div>
<div className="text-muted-foreground text-sm">
<div className="text-text-secondary text-sm">
{t("rsshub.useModal.purchase_expires_at")}
</div>
<div className="line-clamp-2">
@ -134,7 +134,7 @@ export function SetModalContent({
min={hasPurchase ? 0 : 1}
{...field}
/>
<span className="text-muted-foreground text-sm">
<span className="text-text-secondary text-sm">
{t("rsshub.useModal.month")}
</span>
</div>

6
apps/desktop/src/renderer/src/modules/settings/tabs/about.tsx
View File

@ -35,10 +35,12 @@ export const SettingAbout = () => {
</div>
<div className="flex flex-wrap items-center gap-2">
{appVersion && (
<span className="bg-muted rounded px-2 py-1 text-xs">app: {appVersion}</span>
<span className="bg-material-medium rounded px-2 py-1 text-xs">
app: {appVersion}
</span>
)}
{rendererVersion && (
<span className="bg-muted rounded px-2 py-1 text-xs">
<span className="bg-material-medium rounded px-2 py-1 text-xs">
renderer: {rendererVersion}
</span>
)}

2
apps/desktop/src/renderer/src/pages/(main)/(layer)/(subview)/rsshub/index.tsx
View File

@ -54,7 +54,7 @@ export function Component() {
<span>{t("rsshub.add_new_instance")}</span>
</div>
</Button>
<div className="text-muted-foreground text-sm">{t("rsshub.public_instances")}</div>
<div className="text-text-secondary text-sm">{t("rsshub.public_instances")}</div>
<List data={list?.data} />
</div>
)

8
apps/desktop/src/renderer/src/styles/scrollbar.css
View File

@ -4,7 +4,7 @@ body::-webkit-scrollbar {
html:not([data-viewport="mobile"]) {
/* for firefox */
scrollbar-color: theme(colors.gray.300);
scrollbar-color: theme(colors.fill);
scrollbar-width: thin;
}
@ -24,7 +24,7 @@ html:not([data-viewport="mobile"])[data-theme="dark"] {
html:not([data-viewport="mobile"]) *::-webkit-scrollbar-thumb {
background-color: transparent;
border: 6px solid theme(colors.gray.300);
border: 6px solid theme(colors.fill);
@apply rounded-xl;
}
@ -39,11 +39,11 @@ html:not([data-viewport="mobile"]) *::-webkit-scrollbar {
}
html:not([data-viewport="mobile"]) *::-webkit-scrollbar-thumb {
background: theme(colors.muted.DEFAULT);
background: theme(colors.material-medium);
}
html:not([data-viewport="mobile"]) *::-webkit-scrollbar-thumb:hover {
background: theme(colors.muted.DEFAULT/80);
background: theme(colors.material-thin);
}
html:not([data-viewport="mobile"]) *::-webkit-scrollbar-corner {

2
apps/mobile/package.json
View File

@ -117,7 +117,7 @@
"react-native-sheet-transitions": "0.1.2",
"react-native-svg": "15.11.2",
"react-native-track-player": "4.1.1",
"react-native-uikit-colors": "0.3.10",
"react-native-uikit-colors": "0.5.0",
"react-native-video": "6.13.0",
"react-native-volume-manager": "2.0.8",
"react-native-web": "0.20.0",

2
apps/ssr/client/components/items/grid.tsx
View File

@ -43,7 +43,7 @@ const Wrapper: FC<{
rel="noopener noreferrer"
target="_blank"
className={cn(
"hover:bg-muted overflow-hidden rounded-md p-1.5 duration-200",
"hover:bg-material-medium overflow-hidden rounded-md p-1.5 duration-200",
wrapperClassName,
)}
>

4
apps/ssr/client/modules/login/index.tsx
View File

@ -169,7 +169,7 @@ export function Login() {
<div className="mt-2 w-full space-y-2">
<div className="flex items-center justify-center">
<Divider className="flex-1" />
<p className="text-muted-foreground px-4 text-center text-sm">{t("login.or")}</p>
<p className="text-text-secondary px-4 text-center text-sm">{t("login.or")}</p>
<Divider className="flex-1" />
</div>
</div>
@ -184,7 +184,7 @@ export function Login() {
}}
>
<div
className="center hover:bg-muted inline-flex rounded-full border p-2.5 duration-200 [&_svg]:size-6"
className="center hover:bg-material-medium inline-flex rounded-full border p-2.5 duration-200 [&_svg]:size-6"
dangerouslySetInnerHTML={{
__html: provider.icon,
}}

2
apps/ssr/client/pages/(login)/register.tsx
View File

@ -129,7 +129,7 @@ function RegisterForm() {
<h1 className="center flex text-2xl font-bold">
{t("register.label", { app_name: APP_NAME })}
</h1>
<div className="text-muted-foreground mt-2 text-center">
<div className="text-text-secondary mt-2 text-center">
<Trans
i18nKey="register.note"
components={{

25
configs/tailwind.base.config.ts
View File

@ -1,3 +1,4 @@
/* @moduleResolution bundler */
import "./tw-css-plugin"
import path, { resolve } from "node:path"
@ -6,8 +7,9 @@ import { getIconCollections, iconsPlugin } from "@egoist/tailwindcss-icons"
import { cleanupSVG, importDirectorySync, isEmptyColor, parseColors, runSVGO } from "@iconify/tools"
import { compareColors, stringToColor } from "@iconify/utils/lib/colors"
import type { Config } from "tailwindcss"
import { withUIKit } from "tailwindcss-uikit-colors/src/macos/tailwind"
export const baseTwConfig = {
export const baseTwConfig = withUIKit({
darkMode: ["class", '[data-theme="dark"]'],
content: [],
prefix: "",
@ -31,24 +33,8 @@ export const baseTwConfig = {
background: "hsl(var(--background) / <alpha-value>)",
foreground: "hsl(var(--foreground) / <alpha-value>)",
destructive: {
DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
foreground: "hsl(var(--destructive-foreground) / <alpha-value>)",
},
muted: {
DEFAULT: "hsl(var(--muted) / <alpha-value>)",
foreground: "hsl(var(--muted-foreground) / <alpha-value>)",
},
accent: "hsl(var(--fo-a) / <alpha-value>)",
popover: {
DEFAULT: "hsl(var(--popover) / <alpha-value>)",
foreground: "hsl(var(--popover-foreground) / <alpha-value>)",
},
card: {
DEFAULT: "hsl(var(--card) / <alpha-value>)",
foreground: "hsl(var(--card-foreground) / <alpha-value>)",
},
native: {
DEFAULT: "hsl(var(--fo-native) / <alpha-value>)",
active: "hsl(var(--fo-native-active) / <alpha-value>)",
@ -106,6 +92,9 @@ export const baseTwConfig = {
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
backdropBlur: {
background: "80px",
},
typography: (theme: any) => ({
zinc: {
@ -133,7 +122,7 @@ export const baseTwConfig = {
require(resolve(__dirname, "./tailwind-extend.css")),
],
} satisfies Config
} satisfies Config)
function getCollections(dir: string) {
// Import icons

2
locales/app/en.json
View File

@ -215,7 +215,7 @@
"login.continueWith": "Continue with {{provider}}",
"login.email": "Email",
"login.forget_password.note": "Forgot your password?",
"login.or": "Or",
"login.or": "OR",
"login.password": "Password",
"login.signUp": "Sign up with email",
"login.submit": "Submit",

1
package.json
View File

@ -71,6 +71,7 @@
"tailwindcss-animate": "1.0.7",
"tailwindcss-motion": "1.1.0",
"tailwindcss-safe-area": "0.6.0",
"tailwindcss-uikit-colors": "0.5.0",
"tar": "7.4.3",
"tsx": "4.19.3",
"turbo": "2.5.0",

18
packages/components/assets/colors-media.css
View File

@ -26,16 +26,7 @@
--background: 0 0% 100%;
--foreground: 20 14.3% 4.1%;
--card: 0 0% 100%;
--card-foreground: 20 14.3% 4.1%;
--popover: 0 0% 100%;
--popover-foreground: 20 14.3% 4.1%;
--muted: 60 4.8% 95.9%;
--muted-foreground: 25 5.3% 44.7%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 60 9.1% 97.8%;
--border: 20 5.9% 90%;
--radius: 0.5rem;
}
@ -68,16 +59,7 @@
--background: 0 0% 7.1%;
--foreground: 60 9.1% 97.8%;
--card: 20 14.3% 4.1%;
--card-foreground: 60 9.1% 97.8%;
--popover: 20 14.3% 4.1%;
--popover-foreground: 60 9.1% 97.8%;
--muted: 12 6.5% 15.1%;
--muted-foreground: 24 5.4% 63.9%;
--destructive: 0 72.2% 50.6%;
--destructive-foreground: 60 9.1% 97.8%;
--border: 0 0% 22.1%;
}
}

1
packages/components/assets/index.css
View File

@ -1,3 +1,4 @@
@import "./colors.css";
@import "./tailwind.css";
@import "./font.css";
@import "tailwindcss-uikit-colors/macos/selector.css";

18
packages/components/assets/tailwind.css
View File

@ -13,16 +13,7 @@
[data-theme="light"] {
--background: 0 0% 100%;
--foreground: 20 14.3% 4.1%;
--card: 0 0% 100%;
--card-foreground: 20 14.3% 4.1%;
--popover: 0 0% 100%;
--popover-foreground: 20 14.3% 4.1%;
--muted: 60 4.8% 95.9%;
--muted-foreground: 25 5.3% 44.7%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 60 9.1% 97.8%;
--border: 20 5.9% 90%;
--radius: 0.5rem;
}
@ -30,16 +21,7 @@
[data-theme="dark"] {
--background: 0 0% 7.1%;
--foreground: 60 9.1% 97.8%;
--card: 20 14.3% 4.1%;
--card-foreground: 60 9.1% 97.8%;
--popover: 20 14.3% 4.1%;
--popover-foreground: 60 9.1% 97.8%;
--muted: 12 6.5% 15.1%;
--muted-foreground: 24 5.4% 63.9%;
--destructive: 0 72.2% 50.6%;
--destructive-foreground: 60 9.1% 97.8%;
--border: 0 0% 22.1%;
}
}

1
packages/components/package.json
View File

@ -72,6 +72,7 @@
"remark-gh-alerts": "0.0.3",
"remark-rehype": "11.1.2",
"sonner": "2.0.3",
"tailwindcss-uikit-colors": "0.5.0",
"unified": "11.0.5",
"unist-util-visit": "5.0.0",
"unist-util-visit-parents": "5.1.3",

2
packages/components/src/ui/avatar/index.tsx
View File

@ -35,7 +35,7 @@ export const AvatarFallback = React.forwardRef<
<AvatarPrimitive.Fallback
ref={ref}
className={cn(
"bg-muted flex size-full items-center justify-center rounded-full text-xs",
"bg-material-medium flex size-full items-center justify-center rounded-full text-xs",
className,
)}
{...props}

4
packages/components/src/ui/card/index.tsx
View File

@ -5,7 +5,7 @@ const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElemen
({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("bg-card text-card-foreground rounded-lg border", className)}
className={cn("text-text rounded-lg border bg-white dark:bg-zinc-950/80", className)}
{...props}
/>
),
@ -34,7 +34,7 @@ const CardDescription = React.forwardRef<
HTMLParagraphElement,
React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
<p ref={ref} className={cn("text-muted-foreground text-sm", className)} {...props} />
<p ref={ref} className={cn("text-text-secondary text-sm", className)} {...props} />
))
CardDescription.displayName = "CardDescription"

9
packages/components/src/ui/divider/Divider.tsx
View File

@ -7,7 +7,11 @@ export const Divider: FC<DetailedHTMLProps<HTMLAttributes<HTMLHRElement>, HTMLHR
const { className, ...rest } = props
return (
<hr
className={cn("my-4 h-[0.5px] border-0 bg-black/30 dark:bg-white/30", className)}
className={cn(
"my-4 h-[0.5px] border-0",
"bg-[#282828] !opacity-[0.36] dark:bg-[#F6F6F6]",
className,
)}
{...rest}
/>
)
@ -20,7 +24,8 @@ export const DividerVertical: FC<
return (
<span
className={cn(
"mx-3 inline-block h-full w-[0.5px] select-none bg-black text-transparent !opacity-20 dark:bg-white",
"mx-3 inline-block h-full w-[0.5px] select-none text-transparent",
"bg-[#282828] opacity-[0.36] dark:bg-[#F6F6F6]",
className,
)}
{...rest}

6
packages/components/src/ui/form/index.tsx
View File

@ -80,7 +80,7 @@ const FormLabel = React.forwardRef<
return (
<Label
ref={ref}
className={cn(error && "text-destructive", "font-semibold", className)}
className={cn(error && "text-red", "font-semibold", className)}
htmlFor={formItemId}
{...props}
/>
@ -116,7 +116,7 @@ const FormDescription = React.forwardRef<
<p
ref={ref}
id={formDescriptionId}
className={cn("text-muted-foreground text-xs", className)}
className={cn("text-text-secondary text-xs", className)}
{...props}
/>
)
@ -138,7 +138,7 @@ const FormMessage = React.forwardRef<
<p
ref={ref}
id={formMessageId}
className={cn("text-destructive text-sm font-medium", className)}
className={cn("text-red text-sm font-medium", className)}
{...props}
>
{body}

2
packages/components/src/ui/navigation-menu/index.tsx
View File

@ -72,7 +72,7 @@ const NavigationMenuViewport = React.forwardRef<
<div className={cn("absolute left-0 top-full flex justify-center")}>
<NavigationMenuPrimitive.Viewport
className={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow-lg md:w-[var(--radix-navigation-menu-viewport-width)]",
"bg-material-medium backdrop-blur-background text-text data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow-lg md:w-[var(--radix-navigation-menu-viewport-width)]",
className,
)}
ref={ref}

2
packages/components/src/ui/segment/index.tsx
View File

@ -33,7 +33,7 @@ export const SegmentGroup = (props: ComponentType<SegmentGroupProps>) => {
<div
role="tablist"
className={cn(
"bg-muted text-muted-foreground inline-flex h-9 items-center justify-center rounded-lg p-1 outline-none",
"bg-material-medium text-text-secondary inline-flex h-9 items-center justify-center rounded-lg p-1 outline-none",
className,
)}
tabIndex={0}

10
packages/components/src/ui/select/index.tsx
View File

@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
<SelectPrimitive.Trigger
ref={ref}
className={cn(
"placeholder:text-muted-foreground flex w-full items-center justify-between whitespace-nowrap rounded-md bg-transparent disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
"placeholder:text-text-secondary flex w-full items-center justify-between whitespace-nowrap rounded-md bg-transparent disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
"ring-accent/20 focus:border-accent/80 duration-200 focus:outline-none focus:ring-2",
"border-border border",
size === "sm" ? "h-7 p-2 text-sm" : "h-9 px-3 py-2 text-sm",
@ -72,11 +72,7 @@ const SelectContent = React.forwardRef<
<SelectPrimitive.Content
ref={ref}
className={cn(
"shadow-perfect bg-popover text-popover-foreground relative max-h-96 min-w-32 overflow-hidden rounded-md border",
position === "popper" && [
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
],
"shadow-perfect bg-material-medium backdrop-blur-background relative max-h-96 min-w-32 overflow-hidden rounded-md border",
className,
)}
position={position}
@ -138,7 +134,7 @@ const SelectSeparator = React.forwardRef<
>(({ className, ...props }, ref) => (
<SelectPrimitive.Separator
ref={ref}
className={cn("bg-muted -mx-1 my-1 h-px", className)}
className={cn("bg-material-medium -mx-1 my-1 h-px", className)}
{...props}
/>
))

2
packages/components/src/ui/select/responsive.tsx
View File

@ -59,7 +59,7 @@ export const ResponsiveSelect = ({
type="button"
onClick={() => realSelectRef?.click()}
className={cn(
"placeholder:text-muted-foreground flex w-full items-center justify-between whitespace-nowrap rounded-md bg-transparent disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
"placeholder:text-text-secondary flex w-full items-center justify-between whitespace-nowrap rounded-md bg-transparent disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
"ring-accent/20 focus:border-accent/80 duration-200 focus:outline-none focus:ring-2",
"border-border border",
size === "sm" ? "h-7 p-2 text-sm" : "h-9 px-3 py-2 text-sm",

8
packages/components/src/ui/table/index.tsx
View File

@ -34,7 +34,7 @@ const TableFooter = React.forwardRef<
>(({ className, ...props }, ref) => (
<tfoot
ref={ref}
className={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
className={cn("bg-material-thin border-t font-medium [&>tr]:last:border-b-0", className)}
{...props}
/>
))
@ -44,7 +44,7 @@ const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTML
({ className, ...props }, ref) => (
<tr
ref={ref}
className={cn("data-[state=selected]:bg-muted transition-colors", className)}
className={cn("data-[state=selected]:bg-material-medium transition-colors", className)}
{...props}
/>
),
@ -60,7 +60,7 @@ const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(
<th
ref={ref}
className={cn(
"text-muted-foreground text-left align-middle font-medium [&:has([role=checkbox])]:pr-0",
"text-text-secondary text-left align-middle font-medium [&:has([role=checkbox])]:pr-0",
tableHeadVariants({ size, className }),
)}
{...props}
@ -91,7 +91,7 @@ const TableCaption = React.forwardRef<
HTMLTableCaptionElement,
React.HTMLAttributes<HTMLTableCaptionElement>
>(({ className, ...props }, ref) => (
<caption ref={ref} className={cn("text-muted-foreground mt-4 text-sm", className)} {...props} />
<caption ref={ref} className={cn("text-text-secondary mt-4 text-sm", className)} {...props} />
))
TableCaption.displayName = "TableCaption"

4
packages/components/src/ui/tabs/index.tsx
View File

@ -57,7 +57,7 @@ const TabsList = React.forwardRef<React.ElementRef<typeof TabsPrimitive.List>, T
<TabsPrimitive.List
ref={ref}
className={cn(
"text-muted-foreground relative inline-flex items-center justify-center",
"text-text-secondary relative inline-flex items-center justify-center",
className,
)}
>
@ -67,7 +67,7 @@ const TabsList = React.forwardRef<React.ElementRef<typeof TabsPrimitive.List>, T
className={cn(
"absolute left-0 duration-200 will-change-[transform,width]",
variant === "rounded"
? "bg-muted group-hover:bg-theme-item-hover inset-0 z-0 h-full rounded-lg"
? "bg-material-medium group-hover:bg-theme-item-hover inset-0 z-0 h-full rounded-lg"
: "bg-accent bottom-0 h-0.5 rounded",
)}
style={{

34
pnpm-lock.yaml
View File

@ -181,6 +181,9 @@ importers:
tailwindcss-safe-area:
specifier: 0.6.0
version: 0.6.0(tailwindcss@3.4.17(ts-node@10.9.2(@types/node@22.14.1)(typescript@5.8.3)))
tailwindcss-uikit-colors:
specifier: 0.5.0
version: 0.5.0
tar:
specifier: 7.4.3
version: 7.4.3
@ -1061,8 +1064,8 @@ importers:
specifier: 4.1.1
version: 4.1.1(patch_hash=24a9527477cf307020abf337d3f5db78cdc015636e7ab47d085a1eb5792a5ff0)(react-native@0.77.2(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.12)(bufferutil@4.0.9)(react@18.3.1))(react@18.3.1)
react-native-uikit-colors:
specifier: 0.3.10
version: 0.3.10(27f1c20b5429d566f2f56a15bc4a2371)
specifier: 0.5.0
version: 0.5.0(27f1c20b5429d566f2f56a15bc4a2371)
react-native-video:
specifier: 6.13.0
version: 6.13.0(react-native@0.77.2(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.12)(bufferutil@4.0.9)(react@18.3.1))(react@18.3.1)
@ -1472,6 +1475,9 @@ importers:
sonner:
specifier: 2.0.3
version: 2.0.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
tailwindcss-uikit-colors:
specifier: 0.5.0
version: 0.5.0
unified:
specifier: 11.0.5
version: 11.0.5
@ -6532,8 +6538,8 @@ packages:
os: [darwin]
hasBin: true
apple-uikit-colors@0.3.10:
resolution: {integrity: sha512-X0JDuFSHCdTxmrspiIq2jb1u5xgh4w2Bi4C9hlBPFrlJMU2qcEdNjXDzBVg9gJAdc+UwRoOwuIikR3l0kkNJTQ==}
apple-uikit-colors@0.5.0:
resolution: {integrity: sha512-4xucVg1ulEh3F48PzbZ9wa7qJ0CwUaOgxuF+rtqTJYSYuus26HaH9xc5QnKpgd2scs9qg4AOP7oo2ACrk+pRZw==}
archiver-utils@2.1.0:
resolution: {integrity: sha512-bEL/yUb/fNNiNTuUz979Z0Yg5L+LzLxGJz8x79lYmR54fmTIb6ob/hNQgkQnIUDWIFjZVQwl9Xs356I6BAMHfw==}
@ -12881,8 +12887,8 @@ packages:
shaka-player:
optional: true
react-native-uikit-colors@0.3.10:
resolution: {integrity: sha512-7YgdTZw7vJWg2l7lEAkn0Prs9hLBYPRbDOxzpqLqZLKo2KSbpvf8OCPxlzFoXhZ2fLCbRWHxZZ7YjmHAZhhvgQ==}
react-native-uikit-colors@0.5.0:
resolution: {integrity: sha512-CVZXlKXhTLJDL+M5mWzPfnM7RwIjGze0J85fMHOFm9nWxt4tEd/iFtgWOACQ3xplZJ3UBz2ZFry8iZcUu/jeGA==}
peerDependencies:
nativewind: '>=4.1.0'
react: 18.3.1
@ -14007,8 +14013,8 @@ packages:
peerDependencies:
tailwindcss: ^2.0.0 || >=3.0.0
tailwindcss-uikit-colors@0.3.10:
resolution: {integrity: sha512-++vPFEcbIM+13XSl/mFcF43PY4y7qMatnN0SuxvuaMRLPVQB9PHJ/QX1ZmaeiGK9idym8RQP4tIQv4NjkkrSVw==}
tailwindcss-uikit-colors@0.5.0:
resolution: {integrity: sha512-Puvb9js7VJ9fTcAuf9xKcHnRSzGoQTEnxAOlwPP8d55fvldECqW1tXevze6OGM7gT8Fl7B3wp2FgJPCDC7DrCg==}
tailwindcss@3.4.17:
resolution: {integrity: sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==}
@ -21678,7 +21684,7 @@ snapshots:
repeat-string: 1.6.1
optional: true
apple-uikit-colors@0.3.10: {}
apple-uikit-colors@0.5.0: {}
archiver-utils@2.1.0:
dependencies:
@ -29359,14 +29365,14 @@ snapshots:
react: 18.3.1
react-native: 0.77.2(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.12)(bufferutil@4.0.9)(react@18.3.1)
react-native-uikit-colors@0.3.10(27f1c20b5429d566f2f56a15bc4a2371):
react-native-uikit-colors@0.5.0(27f1c20b5429d566f2f56a15bc4a2371):
dependencies:
apple-uikit-colors: 0.3.10
apple-uikit-colors: 0.5.0
nativewind: 4.1.23(react-native-reanimated@3.17.4(@babel/core@7.26.10)(react-native@0.77.2(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.12)(bufferutil@4.0.9)(react@18.3.1))(react@18.3.1))(react-native-safe-area-context@5.4.0(react-native@0.77.2(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.12)(bufferutil@4.0.9)(react@18.3.1))(react@18.3.1))(react-native-svg@15.11.2(react-native@0.77.2(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.12)(bufferutil@4.0.9)(react@18.3.1))(react@18.3.1))(react-native@0.77.2(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.12)(bufferutil@4.0.9)(react@18.3.1))(react@18.3.1)(tailwindcss@3.4.17(ts-node@10.9.2(@types/node@22.14.1)(typescript@5.8.3)))
react: 18.3.1
react-native: 0.77.2(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.12)(bufferutil@4.0.9)(react@18.3.1)
tailwindcss: 3.4.17(ts-node@10.9.2(@types/node@22.14.1)(typescript@5.8.3))
tailwindcss-uikit-colors: 0.3.10
tailwindcss-uikit-colors: 0.5.0
react-native-video@6.13.0(react-native@0.77.2(@babel/core@7.26.10)(@babel/preset-env@7.26.9(@babel/core@7.26.10))(@types/react@18.3.12)(bufferutil@4.0.9)(react@18.3.1))(react@18.3.1):
dependencies:
@ -30801,9 +30807,9 @@ snapshots:
dependencies:
tailwindcss: 3.4.17(ts-node@10.9.2(@types/node@22.14.1)(typescript@5.8.3))
tailwindcss-uikit-colors@0.3.10:
tailwindcss-uikit-colors@0.5.0:
dependencies:
apple-uikit-colors: 0.3.10
apple-uikit-colors: 0.5.0
tailwindcss@3.4.17(ts-node@10.9.2(@types/node@22.14.1)(typescript@5.8.3)):
dependencies: