2025-OSDC · hyesngy · Oct 26, 2025 · Oct 26, 2025 · Oct 26, 2025 · Oct 26, 2025
@@ -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"

@@ -115,14 +115,19 @@ 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 });
 
                     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({

@@ -4,15 +4,12 @@ import { TThemeKey, VisionMode } from '../types.js';
 export type SimulationMode = Exclude<VisionMode, 'none'>;
 
 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<TLanguage, Record<VisionMode, string>> = {
         tritanopia: 'tritanopia',
     },
     Korean: {
-        none: '꺼짐',
+        none: '기본',
         protanopia: '적색맹',
         deuteranopia: '녹색맹',
         tritanopia: '청색맹',
@@ -46,6 +43,11 @@ export const THEME_LABEL: Record<TLanguage, Record<TThemeKey, string>> = {
     },
 };
 
+export const SIMULATE_LABEL: Record<TLanguage, string> = {
+    English: 'Simulate',
+    Korean: '시뮬레이션',
+};
+
 export function isVisionMode(value: string | null): value is VisionMode {
     return (value ?? '') !== '' && VISION_MODES.includes(value as VisionMode);
 }
@@ -28,6 +28,6 @@ export const SWITCHER_MENU_POSITION: Record<TPosition, string> = {
 export const TOOLBAR_POSITION: Record<TPosition, string> = {
     '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]',
 };
@@ -4,37 +4,37 @@ const SvgLogo = (props: SVGProps<SVGSVGElement>) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     fill="none"
-    viewBox="0 0 39 40"
+    viewBox="0 0 91 91"
     {...props}
   >
-    <path fill="#CE78A9" d="m.5 17.805 1.516-3.514 16.812-7.924-1.309 3.308z" />
+    <path fill="#CE78A9" d="m0 40.298 3.56-8.254 39.49-18.612-3.075 7.768z" />
     <path
       fill="#D55D00"
-      d="M3.187 24.212 1.05 19.32l14.056-7.097-1.378 3.376-9.233 4.685 2.48 5.72z"
+      d="M6.314 55.35 1.297 43.86l33.016-16.67-3.237 7.93L9.389 46.125l5.826 13.433z"
     />
     <path
       fill="#E59F01"
-      d="m22.276.741 3.496 1.556 7.732 16.901-3.292-1.347z"
+      d="m51.144.22 8.213 3.654 18.161 39.699-7.733-3.163z"
     />
     <path
-      fill="#000"
-      d="m15.837 3.355 4.916-2.08L27.69 15.41l-3.36-1.417-4.58-9.285-5.747 2.415z"
+      fill="#fff"
+      d="m36.02 6.362 11.548-4.886L63.86 34.68l-7.893-3.327L45.21 9.543l-13.498 5.672z"
     />
     <path
       fill="#0072B1"
-      d="m17.036 39.246-3.493-1.562-7.699-16.917 3.29 1.354z"
+      d="m38.84 90.671-8.206-3.67-18.083-39.735 7.727 3.179z"
     />
     <path
       fill="#F0E442"
-      d="m23.477 36.645-4.92 2.07-6.908-14.149 3.357 1.423 4.562 9.295 5.751-2.404z"
+      d="m53.975 84.56-11.557 4.864-16.227-33.236 7.886 3.343 10.715 21.832 13.51-5.647z"
     />
     <path
       fill="#009F73"
-      d="m38.889 22.215-1.482 3.529-16.734 8.087 1.277-3.32z"
+      d="m90.17 50.665-3.48 8.288-39.306 18.995 2.999-7.798z"
     />
     <path
       fill="#56B4E8"
-      d="m36.14 15.833 2.184 4.871-13.987 7.233 1.345-3.389 9.187-4.775-2.536-5.694z"
+      d="m83.71 35.677 5.128 11.441-32.852 16.99 3.16-7.961L80.723 44.93l-5.957-13.375z"
     />
   </svg>
 );

@@ -8,13 +8,13 @@ const SvgX = (props: SVGProps<SVGSVGElement>) => (
     {...props}
   >
     <path
-      fill="#000"
+      fill="#fff"
       fillRule="evenodd"
       d="M25.977 4.023a.94.94 0 0 1 0 1.328L5.352 25.976a.939.939 0 0 1-1.327-1.328L24.65 4.023a.94.94 0 0 1 1.327 0"
       clipRule="evenodd"
     />
     <path
-      fill="#000"
+      fill="#fff"
       fillRule="evenodd"
       d="M4.023 4.023a.94.94 0 0 0 0 1.328L24.65 25.976a.939.939 0 0 0 1.327-1.328L5.351 4.023a.94.94 0 0 0-1.328 0"
       clipRule="evenodd"

@@ -6,6 +6,7 @@ import {
 } from '../core/constants/simulation.js';
 import {
     MODE_LABELS,
+    SIMULATE_LABEL,
     SIMULATION_MODES,
     isVisionMode,
 } from '../core/constants/modes.js';
@@ -167,21 +168,29 @@ export default function SimulationFilter(props?: SimulationFilterProps) {
             </svg>
 
             <div
-                className={`cb-vision-toolbar h-[36px] fixed z-[100] inline-flex items-center gap-[6px] rounded-[10px] bg-[rgba(17,17,17,0.85)] p-[6px_8px] text-[12px] text-white opacity-90 shadow-[0_6px_18px_rgba(0,0,0,0.25)] backdrop-blur-[6px] ${toolBarClass}`}
+                className={`cb-vision-toolbar h-[34px] fixed z-[100] inline-flex items-center gap-[6px] rounded-[8px] bg-[#555555] px-[18px] py-2 text-[14px] text-white font-medium opacity-90 shadow-[0_6px_18px_rgba(0,0,0,0.25)] backdrop-blur-[6px] ${toolBarClass}`}
             >
+                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+                    <path d="M18 9C18 9 14.625 2.8125 9 2.8125C3.375 2.8125 0 9 0 9C0 9 3.375 15.1875 9 15.1875C14.625 15.1875 18 9 18 9ZM1.31929 9C1.38333 8.90236 1.45636 8.79387 1.53818 8.67647C1.91493 8.13592 2.47085 7.41702 3.18612 6.70175C4.63616 5.2517 6.6157 3.9375 9 3.9375C11.3843 3.9375 13.3638 5.2517 14.8139 6.70175C15.5292 7.41702 16.0851 8.13592 16.4618 8.67647C16.5436 8.79387 16.6167 8.90236 16.6807 9C16.6167 9.09764 16.5436 9.20613 16.4618 9.32353C16.0851 9.86408 15.5292 10.583 14.8139 11.2983C13.3638 12.7483 11.3843 14.0625 9 14.0625C6.6157 14.0625 4.63616 12.7483 3.18612 11.2983C2.47085 10.583 1.91493 9.86408 1.53818 9.32353C1.45636 9.20613 1.38333 9.09764 1.31929 9Z" fill="white"/>
+                    <path d="M9 6.1875C7.4467 6.1875 6.1875 7.4467 6.1875 9C6.1875 10.5533 7.4467 11.8125 9 11.8125C10.5533 11.8125 11.8125 10.5533 11.8125 9C11.8125 7.4467 10.5533 6.1875 9 6.1875ZM5.0625 9C5.0625 6.82538 6.82538 5.0625 9 5.0625C11.1746 5.0625 12.9375 6.82538 12.9375 9C12.9375 11.1746 11.1746 12.9375 9 12.9375C6.82538 12.9375 5.0625 11.1746 5.0625 9Z" fill="white"/>
+                </svg>
                 <span
-                    className="font-medium hover:cursor-pointer"
+                    className="font-medium hover:cursor-pointer ml-[11px]"
                     onClick={() => setOpen(!open)}
                 >
-                    Vision
+                    {SIMULATE_LABEL[language]}
                 </span>
 
+                {open && (
+                    <div className="w-0 h-5 mx-3 outline outline-[0.40px] outline-offset-[-0.20px] outline-[#909090]" />
+                )}
+
                 {open &&
                     MODES.map((value) => (
                         <button
                             key={value}
                             type="button"
-                            className={`rounded-[6px] px-[6px] py-[3px] ${
+                            className={`rounded-[8px] px-2 py-1 text-[12px] font-normal ${
                                 simulationFilter === value
                                     ? 'bg-white text-black'
                                     : 'hover:bg-[rgba(255,255,255,0.2)]'