Convert All Color Code to OKLCH

.gitignore

@@ -1,5 +1,8 @@
 # See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
 
+# Gemini CLI
+/.gemini
+
 # Compiled output
 /dist
 /tmp

src/app/components/clock/clock.scss

@@ -16,11 +16,11 @@
 .clock-date {
   font-size: 1.2rem;
   font-weight: 500;
-  color: #333;
+  color: oklch(0.3211 0 0); // #333
 }
 
 .clock-time {
   font-size: 2rem;
   font-weight: 600;
-  color: #000;
+  color: oklch(0 0 0); // #000
 }

src/app/components/dropdown/dropdown.scss

@@ -87,7 +87,7 @@ $dropdown_animation_duration: 0.2s;
   z-index: 1000;
   max-height: 240px;
   overflow-y: auto;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 4px 12px oklch(0 0 0 / 10%); // rgba(0, 0, 0, 0.1)
   animation: slideIn var(--dropdown-duration) $dropdown_animation_timing;
 
   // 자식 요소의 배경색이 테두리를 침범하지 못하도록 하는 사용자님의 핵심 설계 복구

src/app/features/settings/popup.scss

@@ -37,7 +37,7 @@
       display: block;
       font-weight: 500;
       font-size: 14px;
-      color: #999999;
+      color: oklch(0.6830 0 0); // #999999
     }
 
     .settings-container {

src/app/pages/clock/clock.html

@@ -6,6 +6,6 @@
   </section>
 
   <p style="text-align: center;">
-    <a routerLink="/" style="color: #666; text-decoration: none;">Go to Main</a>
+    <a routerLink="/" style="color: oklch(0.5103 0 0); /* #666 */ text-decoration: none;">Go to Main</a>
   </p>
 </div>

src/app/pages/known-issues/known-issues.scss

@@ -6,22 +6,22 @@ section {
   .status-tag {
     display: inline-block;
     padding: 4px 12px;
-    border: 2px solid rgba(0, 0, 0, 0.2);
+    border: 2px solid oklch(0 0 0 / 20%); // rgba(0, 0, 0, 0.2)
     border-radius: 4px;
     font-size: 0.8rem;
     font-weight: bold;
     text-transform: uppercase;
 
     &.reported {
-      background-color: oklch(0.786 0.1379 18.69); // FF9396
+      background-color: oklch(0.786 0.1379 18.69);
     }
 
     &.wip {
-      background-color: oklch(0.786 0.1379 64.49); // F6A550
+      background-color: oklch(0.786 0.1379 64.49);
     }
 
     &.resolved {
-      background-color: oklch(0.786 0.1379 154.52); // 68D391
+      background-color: oklch(0.786 0.1379 154.52);
     }
   }
 }

src/styles.scss

@@ -35,7 +35,7 @@ h2 {
   margin-top: 0;
   margin-bottom: 20px;
   font-size: 1.2rem;
-  color: #666;
+  color: oklch(0.5103 0 0); // #666
 }
 
 p {
@@ -64,7 +64,7 @@ p {
 section {
   margin-bottom: 40px;
   padding: 20px;
-  border: 2px solid rgba(0, 0, 0, 0.2);
+  border: 2px solid oklch(0 0 0 / 20%); // rgba(0, 0, 0, 0.2)
   border-radius: 8px;
 }