From 04c7e6490a5e419bbe64735b9a57fff3f8b0abc0 Mon Sep 17 00:00:00 2001 From: ksk2kk Date: Sat, 25 Apr 2026 11:46:13 +0800 Subject: [PATCH 1/2] design about APPLE style --- src/app/index.css | 85 ++++- src/app/theme.ts | 567 +++++++++++++++++++++++++++--- src/pages/home/toolbar/Center.tsx | 9 +- src/pages/login/index.tsx | 44 +-- src/utils/const.ts | 15 +- 5 files changed, 632 insertions(+), 88 deletions(-) diff --git a/src/app/index.css b/src/app/index.css index ce79082f0a..5bc66892bd 100644 --- a/src/app/index.css +++ b/src/app/index.css @@ -1,17 +1,19 @@ ::-webkit-scrollbar { - width: 6px; - height: 6px; + width: 8px; + height: 8px; } ::-webkit-scrollbar-corner, ::-webkit-scrollbar-track { - background-color: #e2e2e2; - border-radius: 2px; + background-color: transparent; } ::-webkit-scrollbar-thumb { - border-radius: 2px; - background-color: rgba(0, 0, 0, 0.3); + border-radius: 4px; + background-color: rgba(0, 0, 0, 0.2); + border: 2px solid transparent; + background-clip: padding-box; + transition: background-color 0.2s ease; } ::-webkit-scrollbar-button:vertical { @@ -19,32 +21,91 @@ } ::-webkit-scrollbar-thumb:vertical:hover { - background-color: rgba(0, 0, 0, 0.35); + background-color: rgba(0, 0, 0, 0.3); } ::-webkit-scrollbar-thumb:vertical:active { - background-color: rgba(0, 0, 0, 0.38); + background-color: rgba(0, 0, 0, 0.4); } /* dark */ .hope-ui-dark ::-webkit-scrollbar-corner, .hope-ui-dark ::-webkit-scrollbar-track { - background-color: rgb(15, 15, 15); + background-color: transparent; } .hope-ui-dark ::-webkit-scrollbar-thumb { - background-color: #2d2d2d; + background-color: rgba(255, 255, 255, 0.2); + border: 2px solid transparent; + background-clip: padding-box; } .hope-ui-dark ::-webkit-scrollbar-thumb:vertical:hover { - background-color: rgb(58, 58, 58); + background-color: rgba(255, 255, 255, 0.3); } .hope-ui-dark ::-webkit-scrollbar-thumb:vertical:active { - background-color: rgb(58, 58, 58); + background-color: rgba(255, 255, 255, 0.4); } .hope-select__option { flex-shrink: 0; } + +/* Apple-style focus ring */ +*:focus-visible { + outline: none; + box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.3); +} + +/* Smooth transitions for interactive elements */ +button, +[role="button"], +a, +input, +select, +textarea { + transition: all 0.15s ease-in-out; +} + +/* Subtle hover effects for cards and list items */ +.card-hover:hover, +.list-item-hover:hover { + transform: translateY(-1px); + box-shadow: + rgba(0, 0, 0, 0.08) 0px 4px 12px, + rgba(0, 0, 0, 0.04) 0px 1px 2px; +} + +/* Apple-style press effect */ +button:active, +[role="button"]:active { + transform: scale(0.98); +} + +/* Smooth scroll behavior */ +html { + scroll-behavior: smooth; +} + +/* Selection color matching Apple's blue */ +::selection { + background-color: rgba(0, 122, 255, 0.2); +} + +/* Disable text selection for non-interactive elements */ +.no-select { + -webkit-user-select: none; + user-select: none; +} + +/* Subtle divider style */ +.divider { + height: 1px; + background-color: rgba(0, 0, 0, 0.1); +} + +.hope-ui-dark .divider { + background-color: rgba(255, 255, 255, 0.1); +} diff --git a/src/app/theme.ts b/src/app/theme.ts index a46121cd05..bf63d439e5 100644 --- a/src/app/theme.ts +++ b/src/app/theme.ts @@ -5,154 +5,585 @@ const theme: HopeThemeConfig = { initialColorMode: "system", lightTheme: { colors: { - // background: "$neutral2", - background: "#f7f8fa", + background: "#FFFFFF", + loContrast: "#F5F5F7", + primary1: "#F2F8FF", + primary2: "#E5F1FF", + primary3: "#D4E5FF", + primary4: "#C1D8FF", + primary5: "#A9C8FF", + primary6: "#8BB4FF", + primary7: "#6699FF", + primary8: "#3D7AFF", + primary9: "#007AFF", + primary10: "#0066CC", + primary11: "#0052A3", + primary12: "#003D7A", + success1: "#F2FFF5", + success2: "#E5FFEB", + success3: "#D4FFDE", + success4: "#C1FFD1", + success5: "#A9FFC1", + success6: "#8BFFAA", + success7: "#66FF8F", + success8: "#3DFF72", + success9: "#34C759", + success10: "#2DB04E", + success11: "#269943", + success12: "#1F8238", + warning1: "#FFF8F2", + warning2: "#FFEFE5", + warning3: "#FFE5D4", + warning4: "#FFD9C1", + warning5: "#FFCBA9", + warning6: "#FFBA8B", + warning7: "#FFA566", + warning8: "#FF8C3D", + warning9: "#FF9500", + warning10: "#E08200", + warning11: "#C77200", + warning12: "#A86000", + danger1: "#FFF2F2", + danger2: "#FFE5E5", + danger3: "#FFD4D4", + danger4: "#FFC1C1", + danger5: "#FFA9A9", + danger6: "#FF8B8B", + danger7: "#FF6666", + danger8: "#FF3D3D", + danger9: "#FF3B30", + danger10: "#E03329", + danger11: "#C72C24", + danger12: "#A8241E", + info1: "#F2F8FF", + info2: "#E5F1FF", + info3: "#D4E5FF", + info4: "#C1D8FF", + info5: "#A9C8FF", + info6: "#8BB4FF", + info7: "#6699FF", + info8: "#3D7AFF", + info9: "#007AFF", + info10: "#0066CC", + info11: "#0052A3", + info12: "#003D7A", + }, + }, + darkTheme: { + colors: { + background: "#000000", + loContrast: "#1C1C1E", + primary1: "#001A33", + primary2: "#00264D", + primary3: "#003366", + primary4: "#004080", + primary5: "#004D99", + primary6: "#005AB3", + primary7: "#0066CC", + primary8: "#0073E6", + primary9: "#0A84FF", + primary10: "#3399FF", + primary11: "#66B3FF", + primary12: "#99CCFF", + success1: "#00330D", + success2: "#004D14", + success3: "#00661A", + success4: "#008021", + success5: "#009927", + success6: "#00B32E", + success7: "#00CC34", + success8: "#00E63B", + success9: "#30D158", + success10: "#5DD97A", + success11: "#8AE19C", + success12: "#B7E9BE", + warning1: "#331F00", + warning2: "#4D2E00", + warning3: "#663D00", + warning4: "#804D00", + warning5: "#995C00", + warning6: "#B36B00", + warning7: "#CC7A00", + warning8: "#E68A00", + warning9: "#FF9F0A", + warning10: "#FFB33D", + warning11: "#FFC766", + warning12: "#FFDB99", + danger1: "#330A08", + danger2: "#4D0F0C", + danger3: "#661410", + danger4: "#801914", + danger5: "#991E18", + danger6: "#B3231C", + danger7: "#CC2820", + danger8: "#E62D24", + danger9: "#FF453A", + danger10: "#FF6961", + danger11: "#FF8D88", + danger12: "#FFB1AE", + info1: "#001A33", + info2: "#00264D", + info3: "#003366", + info4: "#004080", + info5: "#004D99", + info6: "#005AB3", + info7: "#0066CC", + info8: "#0073E6", + info9: "#0A84FF", + info10: "#3399FF", + info11: "#66B3FF", + info12: "#99CCFF", }, }, components: { Button: { baseStyle: { root: { - rounded: "$lg", + rounded: "12px", + fontWeight: 600, _active: { - transform: "scale(.95)", - transition: "0.2s", + transform: "scale(0.97)", + transition: "transform 0.15s ease-in-out", }, _focus: { - boxShadow: "unset", + boxShadow: "0 0 0 4px rgba(0, 122, 255, 0.2)", + }, + _disabled: { + opacity: 0.5, + cursor: "not-allowed", }, }, }, defaultProps: { root: { - colorScheme: "info", - variant: "subtle", + colorScheme: "primary", + variant: "solid", + }, + }, + variants: { + solid: { + root: { + bgColor: "$primary9", + color: "white", + _hover: { + bgColor: "$primary10", + }, + _active: { + bgColor: "$primary11", + }, + }, + }, + subtle: { + root: { + bgColor: "transparent", + color: "$primary9", + _hover: { + bgColor: "$primary2", + }, + _active: { + bgColor: "$primary3", + }, + }, + }, + outline: { + root: { + bgColor: "transparent", + color: "$primary9", + border: "1.5px solid", + borderColor: "$primary6", + _hover: { + bgColor: "$primary1", + borderColor: "$primary7", + }, + _active: { + bgColor: "$primary2", + }, + }, + }, + ghost: { + root: { + bgColor: "transparent", + color: "$neutral12", + _hover: { + bgColor: "$neutral4", + }, + _active: { + bgColor: "$neutral5", + }, + }, }, }, }, IconButton: { + baseStyle: { + root: { + rounded: "12px", + _active: { + transform: "scale(0.97)", + transition: "transform 0.15s ease-in-out", + }, + _focus: { + boxShadow: "0 0 0 4px rgba(0, 122, 255, 0.2)", + }, + }, + }, defaultProps: { - colorScheme: "info", - variant: "subtle", + colorScheme: "primary", + variant: "ghost", }, }, Input: { baseStyle: { input: { - rounded: "$lg", + rounded: "12px", + border: "1.5px solid", + borderColor: "$neutral6", + bgColor: "$background", _focus: { - boxShadow: "unset", - borderColor: "$info8", + boxShadow: "0 0 0 4px rgba(0, 122, 255, 0.2)", + borderColor: "$primary9", + }, + _hover: { + borderColor: "$neutral7", }, + _disabled: { + opacity: 0.5, + cursor: "not-allowed", + }, + py: "$2_5", + fontSize: "$md", }, }, defaultProps: { input: { - variant: "filled", + variant: "outline", }, }, }, Textarea: { baseStyle: { - rounded: "$lg", + rounded: "12px", + border: "1.5px solid", + borderColor: "$neutral6", + bgColor: "$background", _focus: { - boxShadow: "unset", - borderColor: "$info8", + boxShadow: "0 0 0 4px rgba(0, 122, 255, 0.2)", + borderColor: "$primary9", + }, + _hover: { + borderColor: "$neutral7", }, resize: "vertical", wordBreak: "break-all", + py: "$2_5", + fontSize: "$md", }, defaultProps: { - variant: "filled", + variant: "outline", }, }, Select: { baseStyle: { trigger: { - rounded: "$lg", + rounded: "12px", + border: "1.5px solid", + borderColor: "$neutral6", + bgColor: "$background", _focus: { - boxShadow: "unset", - borderColor: "$info8", + boxShadow: "0 0 0 4px rgba(0, 122, 255, 0.2)", + borderColor: "$primary9", }, + _hover: { + borderColor: "$neutral7", + }, + py: "$2_5", + fontSize: "$md", }, content: { border: "none", - rounded: "$lg", + rounded: "12px", + shadow: + "rgba(0, 0, 0, 0.1) 0px 4px 20px, rgba(0, 0, 0, 0.06) 0px 0px 1px", + bgColor: "$background", + }, + option: { + rounded: "8px", + mx: "$1", + py: "$2", + px: "$3", + _hover: { + bgColor: "$neutral4", + }, + _selected: { + bgColor: "$primary2", + color: "$primary10", + }, }, optionIndicator: { - color: "$info10", + color: "$primary10", }, }, defaultProps: { root: { - variant: "filled", + variant: "outline", }, }, }, Checkbox: { + baseStyle: { + root: { + _hover: { + "& .hope-checkbox__control": { + borderColor: "$primary7", + }, + }, + }, + control: { + rounded: "6px", + borderWidth: "2px", + borderColor: "$neutral6", + _checked: { + bgColor: "$primary9", + borderColor: "$primary9", + }, + _indeterminate: { + bgColor: "$primary9", + borderColor: "$primary9", + }, + }, + }, defaultProps: { root: { - colorScheme: "info", + colorScheme: "primary", variant: "filled", }, }, }, Switch: { + baseStyle: { + track: { + rounded: "full", + bgColor: "$neutral5", + _checked: { + bgColor: "$primary9", + }, + }, + thumb: { + rounded: "full", + bgColor: "white", + shadow: "rgba(0, 0, 0, 0.15) 0px 1px 3px", + }, + }, defaultProps: { root: { - colorScheme: "info", + colorScheme: "primary", }, }, }, Menu: { baseStyle: { content: { - rounded: "$md", + rounded: "12px", minW: "unset", - border: "unset", - // py: "0", + border: "none", + shadow: + "rgba(0, 0, 0, 0.1) 0px 4px 20px, rgba(0, 0, 0, 0.06) 0px 0px 1px", + bgColor: "$background", + p: "$1", }, item: { - rounded: "$md", + rounded: "8px", + py: "$2", + px: "$3", + mx: "$1", + _hover: { + bgColor: "$neutral4", + }, + }, + groupTitle: { + px: "$3", py: "$1", - // mx: "0", + fontSize: "$xs", + fontWeight: 600, + textTransform: "uppercase", + letterSpacing: "0.05em", + color: "$neutral10", }, }, }, Notification: { baseStyle: { root: { - rounded: "$lg", - border: "unset", + rounded: "12px", + border: "none", + shadow: + "rgba(0, 0, 0, 0.1) 0px 4px 20px, rgba(0, 0, 0, 0.06) 0px 0px 1px", }, }, }, Alert: { baseStyle: { root: { - rounded: "$lg", + rounded: "12px", + border: "none", }, }, }, Anchor: { baseStyle: { - rounded: "$lg", + rounded: "8px", px: "$1_5", py: "$1", + color: "$primary9", _hover: { bgColor: hoverColor(), textDecoration: "none", }, _focus: { - boxShadow: "unset", + boxShadow: "0 0 0 4px rgba(0, 122, 255, 0.2)", + }, + _active: { + transform: "scale(0.98)", + transition: "transform 0.15s ease-in-out", }, - _active: { transform: "scale(.95)", transition: "0.1s" }, }, }, Modal: { baseStyle: { + overlay: { + bgColor: "rgba(0, 0, 0, 0.5)", + backdropFilter: "blur(4px)", + }, content: { - rounded: "$lg", + rounded: "16px", + border: "none", + shadow: + "rgba(0, 0, 0, 0.2) 0px 20px 40px, rgba(0, 0, 0, 0.1) 0px 0px 1px", + bgColor: "$background", + }, + header: { + fontSize: "$lg", + fontWeight: 600, + pb: "$2", + }, + body: { + py: "$2", + }, + footer: { + pt: "$2", + }, + }, + }, + Drawer: { + baseStyle: { + overlay: { + bgColor: "rgba(0, 0, 0, 0.5)", + backdropFilter: "blur(4px)", + }, + content: { + border: "none", + shadow: + "rgba(0, 0, 0, 0.2) 0px 20px 40px, rgba(0, 0, 0, 0.1) 0px 0px 1px", + bgColor: "$background", + }, + header: { + fontSize: "$lg", + fontWeight: 600, + }, + }, + }, + Popover: { + baseStyle: { + content: { + rounded: "12px", + border: "none", + shadow: + "rgba(0, 0, 0, 0.1) 0px 4px 20px, rgba(0, 0, 0, 0.06) 0px 0px 1px", + bgColor: "$background", + }, + }, + }, + Tooltip: { + baseStyle: { + content: { + rounded: "8px", + bgColor: "$neutral12", + color: "white", + fontSize: "$sm", + py: "$1_5", + px: "$2", + }, + }, + }, + Badge: { + baseStyle: { + root: { + rounded: "full", + fontSize: "$xs", + fontWeight: 600, + textTransform: "none", + }, + }, + }, + Tag: { + baseStyle: { + root: { + rounded: "8px", + fontSize: "$sm", + }, + }, + }, + Card: { + baseStyle: { + root: { + rounded: "16px", + border: "none", + shadow: + "rgba(0, 0, 0, 0.04) 0px 1px 3px, rgba(0, 0, 0, 0.06) 0px 1px 2px", + bgColor: "$background", + }, + header: { + pb: "$3", + }, + body: { + py: "$3", + }, + footer: { + pt: "$3", + }, + }, + }, + Table: { + baseStyle: { + table: { + borderCollapse: "collapse", + w: "$full", + }, + thead: { + th: { + fontWeight: 600, + fontSize: "$sm", + color: "$neutral11", + textTransform: "none", + letterSpacing: "normal", + borderBottom: "1px solid", + borderColor: "$neutral5", + }, + }, + tbody: { + tr: { + borderBottom: "1px solid", + borderColor: "$neutral4", + _last: { + borderBottom: "none", + }, + _hover: { + bgColor: "$neutral3", + }, + }, + td: { + py: "$3", + }, }, }, }, @@ -163,14 +594,44 @@ export const globalStyles = globalCss({ "*": { margin: 0, padding: 0, + boxSizing: "border-box", + }, + "*, *::before, *::after": { + boxSizing: "border-box", }, html: { - fontFamily: `-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol" !important`, + fontFamily: `-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important`, + fontSize: "16px", + lineHeight: 1.5, + WebkitFontSmoothing: "antialiased", + MozOsxFontSmoothing: "grayscale", + textRendering: "optimizeLegibility", + }, + body: { + fontFamily: `inherit`, + lineHeight: 1.5, + color: "$neutral12", + bgColor: "$background", }, "#root": { display: "flex", flexDirection: "column", alignItems: "center", + minHeight: "100vh", + }, + "::selection": { + bgColor: "$primary4", + color: "$primary12", + }, + 'button, [role="button"]': { + cursor: "pointer", + }, + a: { + color: "$primary9", + textDecoration: "none", + _hover: { + textDecoration: "underline", + }, }, ".hope-breadcrumb__list": { flexWrap: "wrap", @@ -185,9 +646,9 @@ export const globalStyles = globalCss({ }, }, ".viselect-selection-area": { - background: "rgba(46, 115, 252, 0.11)", - border: "2px solid rgba(98, 155, 255, 0.81)", - borderRadius: "0.1em", + background: "rgba(0, 122, 255, 0.15)", + border: "2px solid rgba(0, 122, 255, 0.8)", + borderRadius: "4px", }, ".viselect-container": { userSelect: "none", @@ -198,6 +659,28 @@ export const globalStyles = globalCss({ }, }, }, + "h1, h2, h3, h4, h5, h6": { + fontWeight: 600, + lineHeight: 1.3, + }, + h1: { + fontSize: "$4xl", + }, + h2: { + fontSize: "$3xl", + }, + h3: { + fontSize: "$2xl", + }, + h4: { + fontSize: "$xl", + }, + h5: { + fontSize: "$lg", + }, + h6: { + fontSize: "$md", + }, }) export { theme } diff --git a/src/pages/home/toolbar/Center.tsx b/src/pages/home/toolbar/Center.tsx index 853690e56d..591a0a8cd5 100644 --- a/src/pages/home/toolbar/Center.tsx +++ b/src/pages/home/toolbar/Center.tsx @@ -154,12 +154,15 @@ export const Center = () => { > diff --git a/src/pages/login/index.tsx b/src/pages/login/index.tsx index 6bb662daa0..56ddaceff7 100644 --- a/src/pages/login/index.tsx +++ b/src/pages/login/index.tsx @@ -28,6 +28,7 @@ import { handleResp, hashPwd, joinBase, + separatorColor, } from "~/utils" import { PResp, Resp } from "~/types" import LoginBg from "./LoginBg" @@ -429,9 +430,9 @@ const Login = () => { cursor="pointer" _hover={{ textDecoration: "underline", - color: "#2B5CD9", + color: "$primary10", }} - color="#3573FF" + color="$primary9" > {t("login.go_login")} @@ -489,15 +490,7 @@ const Login = () => { {/* 注册切换 */} - @@ -536,13 +529,13 @@ const Login = () => { spacing="$4" > - + {isRegisterMode() ? t("login.register") : t("login.password_login")} - + { w="$full" loading={loading() || registerLoading()} onClick={Login} - bgColor="#3573FF" - color="white" - _hover={{ - backgroundColor: "#2B5CD9", - }} - _active={{ - backgroundColor: "#1E40AF", - }} h="45px" - fontSize="16px" - fontWeight="bold" - borderRadius="12px" + fontSize="$md" + fontWeight={600} mt="$2" > {isRegisterMode() ? t("login.register") : t("login.login")} @@ -692,13 +676,13 @@ const Login = () => { > {isRegisterMode() @@ -717,12 +701,12 @@ const Login = () => { true, ) }} - color="#3573FF" - fontSize="14px" + color="$primary9" + fontSize="$sm" cursor="pointer" _hover={{ textDecoration: "underline", - color: "#2B5CD9", + color: "$primary10", }} > {t("login.use_guest")} diff --git a/src/utils/const.ts b/src/utils/const.ts index 7b3a02d7dc..c178082cc5 100644 --- a/src/utils/const.ts +++ b/src/utils/const.ts @@ -1,6 +1,19 @@ import { useColorModeValue } from "@hope-ui/solid" -export const hoverColor = () => "rgba(132,133,141,0.18)" +export const hoverColor = () => { + return useColorModeValue("rgba(0, 0, 0, 0.04)", "rgba(255, 255, 255, 0.08)")() +} + +export const selectedColor = () => { + return useColorModeValue( + "rgba(0, 122, 255, 0.12)", + "rgba(10, 132, 255, 0.20)", + )() +} + +export const separatorColor = () => { + return useColorModeValue("rgba(0, 0, 0, 0.12)", "rgba(255, 255, 255, 0.15)")() +} export const alphaColor = (level: number, reverse = false) => { if (reverse) { From 33ac46b88eb241fd7fc7a0f01c661d57e8a196b4 Mon Sep 17 00:00:00 2001 From: ksk2kk Date: Sat, 25 Apr 2026 12:26:30 +0800 Subject: [PATCH 2/2] Trae-session3 --- src/app/theme.ts | 149 --------------------------------------------- src/utils/const.ts | 15 +---- 2 files changed, 3 insertions(+), 161 deletions(-) diff --git a/src/app/theme.ts b/src/app/theme.ts index bf63d439e5..b5a7117e2c 100644 --- a/src/app/theme.ts +++ b/src/app/theme.ts @@ -160,59 +160,6 @@ const theme: HopeThemeConfig = { variant: "solid", }, }, - variants: { - solid: { - root: { - bgColor: "$primary9", - color: "white", - _hover: { - bgColor: "$primary10", - }, - _active: { - bgColor: "$primary11", - }, - }, - }, - subtle: { - root: { - bgColor: "transparent", - color: "$primary9", - _hover: { - bgColor: "$primary2", - }, - _active: { - bgColor: "$primary3", - }, - }, - }, - outline: { - root: { - bgColor: "transparent", - color: "$primary9", - border: "1.5px solid", - borderColor: "$primary6", - _hover: { - bgColor: "$primary1", - borderColor: "$primary7", - }, - _active: { - bgColor: "$primary2", - }, - }, - }, - ghost: { - root: { - bgColor: "transparent", - color: "$neutral12", - _hover: { - bgColor: "$neutral4", - }, - _active: { - bgColor: "$neutral5", - }, - }, - }, - }, }, IconButton: { baseStyle: { @@ -359,27 +306,6 @@ const theme: HopeThemeConfig = { }, }, }, - Switch: { - baseStyle: { - track: { - rounded: "full", - bgColor: "$neutral5", - _checked: { - bgColor: "$primary9", - }, - }, - thumb: { - rounded: "full", - bgColor: "white", - shadow: "rgba(0, 0, 0, 0.15) 0px 1px 3px", - }, - }, - defaultProps: { - root: { - colorScheme: "primary", - }, - }, - }, Menu: { baseStyle: { content: { @@ -400,15 +326,6 @@ const theme: HopeThemeConfig = { bgColor: "$neutral4", }, }, - groupTitle: { - px: "$3", - py: "$1", - fontSize: "$xs", - fontWeight: 600, - textTransform: "uppercase", - letterSpacing: "0.05em", - color: "$neutral10", - }, }, }, Notification: { @@ -503,18 +420,6 @@ const theme: HopeThemeConfig = { }, }, }, - Tooltip: { - baseStyle: { - content: { - rounded: "8px", - bgColor: "$neutral12", - color: "white", - fontSize: "$sm", - py: "$1_5", - px: "$2", - }, - }, - }, Badge: { baseStyle: { root: { @@ -533,60 +438,6 @@ const theme: HopeThemeConfig = { }, }, }, - Card: { - baseStyle: { - root: { - rounded: "16px", - border: "none", - shadow: - "rgba(0, 0, 0, 0.04) 0px 1px 3px, rgba(0, 0, 0, 0.06) 0px 1px 2px", - bgColor: "$background", - }, - header: { - pb: "$3", - }, - body: { - py: "$3", - }, - footer: { - pt: "$3", - }, - }, - }, - Table: { - baseStyle: { - table: { - borderCollapse: "collapse", - w: "$full", - }, - thead: { - th: { - fontWeight: 600, - fontSize: "$sm", - color: "$neutral11", - textTransform: "none", - letterSpacing: "normal", - borderBottom: "1px solid", - borderColor: "$neutral5", - }, - }, - tbody: { - tr: { - borderBottom: "1px solid", - borderColor: "$neutral4", - _last: { - borderBottom: "none", - }, - _hover: { - bgColor: "$neutral3", - }, - }, - td: { - py: "$3", - }, - }, - }, - }, }, } diff --git a/src/utils/const.ts b/src/utils/const.ts index c178082cc5..dfd93ad9c2 100644 --- a/src/utils/const.ts +++ b/src/utils/const.ts @@ -1,19 +1,10 @@ import { useColorModeValue } from "@hope-ui/solid" -export const hoverColor = () => { - return useColorModeValue("rgba(0, 0, 0, 0.04)", "rgba(255, 255, 255, 0.08)")() -} +export const hoverColor = () => "rgba(132, 133, 141, 0.18)" -export const selectedColor = () => { - return useColorModeValue( - "rgba(0, 122, 255, 0.12)", - "rgba(10, 132, 255, 0.20)", - )() -} +export const selectedColor = () => "rgba(0, 122, 255, 0.15)" -export const separatorColor = () => { - return useColorModeValue("rgba(0, 0, 0, 0.12)", "rgba(255, 255, 255, 0.15)")() -} +export const separatorColor = () => "rgba(0, 0, 0, 0.1)" export const alphaColor = (level: number, reverse = false) => { if (reverse) {