diff --git a/package.json b/package.json index 319c05b..b5e9589 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "colbrush", "version": "1.11.0", "description": "A React theme switching library that makes it easy to apply color-blind accessible UI themes", - "homepage": "https://colbrush.vercel.app", + "homepage": "https://colbrush.site", "repository": { "type": "git", "url": "https://github.com/2025-OSDC/colbrush.git" diff --git a/src/assets/X.svg b/src/assets/X.svg index 66fc819..f3aa827 100644 --- a/src/assets/X.svg +++ b/src/assets/X.svg @@ -1,4 +1,4 @@ - - + + diff --git a/src/assets/logo.svg b/src/assets/logo.svg index 1cbdf24..65dd5c8 100644 --- a/src/assets/logo.svg +++ b/src/assets/logo.svg @@ -1,10 +1,10 @@ - - - - - - - - - + + + + + + + + + diff --git a/src/cli/runThemeApply.ts b/src/cli/runThemeApply.ts index 21a6d5c..59b8de5 100644 --- a/src/cli/runThemeApply.ts +++ b/src/cli/runThemeApply.ts @@ -115,7 +115,11 @@ export async function runThemeApply( progress?.startSection(label); try { + progress?.update(0, 'Starting...'); + await new Promise(resolve => setTimeout(resolve, 150)); + progress?.update(50, 'Processing...'); + await new Promise(resolve => setTimeout(resolve, 200)); const themeData = buildThemeForVision(colorKeys, baseColorsArray, vision); await applyThemes(themeData, cssPath, { silent: hideIndividualThemeLog }); @@ -123,6 +127,7 @@ export async function runThemeApply( const executionTime = (Date.now() - visionStartTime) / 1000; progress?.update(100, 'Theme generated successfully'); + await new Promise(resolve => setTimeout(resolve, 150)); progress?.finishSection('✅ Complete'); result.themes.push({ diff --git a/src/core/constants/modes.ts b/src/core/constants/modes.ts index 3a649b7..02df8a0 100644 --- a/src/core/constants/modes.ts +++ b/src/core/constants/modes.ts @@ -4,15 +4,12 @@ import { TThemeKey, VisionMode } from '../types.js'; export type SimulationMode = Exclude; export const SIMULATION_MODES: SimulationMode[] = [ - 'deuteranopia', 'protanopia', + 'deuteranopia', 'tritanopia', ]; -export const THEME_MODES: TThemeKey[] = [ - 'default', - ...SIMULATION_MODES, -]; +export const THEME_MODES: TThemeKey[] = ['default', ...SIMULATION_MODES]; export const VISION_MODES: VisionMode[] = ['none', ...SIMULATION_MODES]; @@ -24,7 +21,7 @@ export const MODE_LABELS: Record> = { tritanopia: 'tritanopia', }, Korean: { - none: '꺼짐', + none: '기본', protanopia: '적색맹', deuteranopia: '녹색맹', tritanopia: '청색맹', @@ -46,6 +43,11 @@ export const THEME_LABEL: Record> = { }, }; +export const SIMULATE_LABEL: Record = { + English: 'Simulate', + Korean: '시뮬레이션', +}; + export function isVisionMode(value: string | null): value is VisionMode { return (value ?? '') !== '' && VISION_MODES.includes(value as VisionMode); } diff --git a/src/core/constants/position.ts b/src/core/constants/position.ts index cbec751..766fca1 100644 --- a/src/core/constants/position.ts +++ b/src/core/constants/position.ts @@ -28,6 +28,6 @@ export const SWITCHER_MENU_POSITION: Record = { export const TOOLBAR_POSITION: Record = { 'left-bottom': 'left-[16px] bottom-[16px]', 'right-bottom': 'right-[16px] bottom-[16px]', - 'left-top': 'left-[16px] top-[16px]', - 'right-top': 'right-[16px] top-[16px]', + 'left-top': 'left-[16px] top-[100px]', + 'right-top': 'right-[16px] top-[100px]', }; diff --git a/src/icons/Logo.tsx b/src/icons/Logo.tsx index 8702e2d..d325c19 100644 --- a/src/icons/Logo.tsx +++ b/src/icons/Logo.tsx @@ -4,37 +4,37 @@ const SvgLogo = (props: SVGProps) => ( - + ); diff --git a/src/icons/X.tsx b/src/icons/X.tsx index 016967a..36dc54f 100644 --- a/src/icons/X.tsx +++ b/src/icons/X.tsx @@ -8,13 +8,13 @@ const SvgX = (props: SVGProps) => ( {...props} >
+ + + + setOpen(!open)} > - Vision + {SIMULATE_LABEL[language]} + {open && ( +
+ )} + {open && MODES.map((value) => ( @@ -88,7 +113,7 @@ export function ThemeSwitcher({ options, position }: TThemeSwitcherProps) { role="menu" aria-label="Select theme" className={` - fixed flex-col bg-[#ffffff] rounded-[18px] w-[220px] gap-[11px] filter drop-shadow-[0_0_1.3px_rgba(0,0,0,0.25)] + fixed flex-col bg-[#252525] px-[10px] py-[14px] border-[1px] border-[#8144FF] rounded-[18px] w-[220px] gap-[11px] filter drop-shadow-[0_0_1.3px_rgba(0,0,0,0.25)] ${switcherMenuClass} `} > @@ -113,9 +138,9 @@ export function ThemeSwitcher({ options, position }: TThemeSwitcherProps) { setHovered(null) } className={[ - 'hover:cursor-pointer group text-[18px] text-[#3D4852] py-1 w-full h-[50px] text-center gap-[8px] flex items-center justify-center rounded-[18px] hover:bg-[#3D4852]', + 'hover:cursor-pointer group text-[18px] px-[15px] text-[#909090] py-1 w-full h-[50px] text-start gap-[8px] flex items-center rounded-[9px] hover:bg-[#884DFF]', theme === opt.key - ? 'bg-[#3D4852] text-[#ffffff]' + ? 'bg-[#884DFF] text-[#ffffff]' : '', ].join(' ')} > @@ -126,39 +151,36 @@ export function ThemeSwitcher({ options, position }: TThemeSwitcherProps) { theme === opt.key || hovered === opt.key ? 'text-white' - : 'text-[#3D4852]' + : 'text-[#909090]' }`} /> {opt.label} - {opt.key !== 'tritanopia' && ( -
- )}
); })}
-
+
-
+
{language === 'English' ? (
updateLanguage('Korean')} > - + English
) : (
updateLanguage('English')} > - - Korean + + 한국어
)}
diff --git a/src/styles.css b/src/styles.css index b80468a..6ba3306 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1 +1 @@ -@source "./src/**/*.{js,ts,jsx,tsx}"; +@source "./src/**/*.{js,ts,jsx,tsx}"; \ No newline at end of file