feat(todo): improve color schema

src/examples/purity-todo/components/app-style.ts

@@ -5,48 +5,34 @@ export const ACTION_BUTTON = "action-button"
 export const appStyle = (): string => render`
   <style id="app-style">
     :root {
-      --background-color: #f0f0f0;
-      --text-color: #555;
-      --shadow-color: #555;
-      --border-color: lightgrey;
+      --text-color: #3d3d3d;
+      --background-color: #faf9f7;
+      --bg-color-secondary: #e8e6e1;
+      --shadow-color: rgba(0, 0, 0, .4);
       --accent-color: #4a90e2;
-      --completed-color: lightgrey;
-      --subtask-color: lightgrey;
-      --button-active-bg: grey;
-      --header-bg: lightgrey;
-      --header-border: none;
-      --input-bg: #303030;
-      --input-color: #eee;
-      --input-border: none;
-      --input-focus-outline: none;
-      --modal-overlay-bg: #50505030;
-      --task-item-hover-bg: transparent;
-      --completed-image-opacity: 1;
-      --control-button-bg: #555;
-      --control-button-opacity: 0.75;
+      --subtask-color: #a8a8a8;
+      --button-active-bg: #d4d2ce;
+      --input-color: #e0e0e0;
+      --input-bg: #3d3d3d;
+      --modal-overlay-bg: rgba(61, 61, 61, 0.4);
+      --completed-opacity: 0.65;
+      --control-button-bg: var(--accent-color);
     }
 
     @media (prefers-color-scheme: dark) {
       :root {
-        --background-color: #1a1a2e;
         --text-color: #e0e0e0;
+        --background-color: #1a1a2e;
+        --bg-color-secondary: #3a3a55;
         --shadow-color: rgba(0, 0, 0, 0.5);
-        --border-color: #2d2d44;
         --accent-color: #4a90e2;
-        --completed-color: #6b7280;
         --subtask-color: #9ca3af;
         --button-active-bg: var(--accent-color);
-        --header-bg: #2d2d44;
-        --header-border: 1px solid var(--border-color);
-        --input-bg: var(--header-bg);
         --input-color: var(--text-color);
-        --input-border: 1px solid var(--border-color);
-        --input-focus-outline: 2px solid var(--accent-color);
+        --input-bg: var(--bg-color-secondary);
         --modal-overlay-bg: rgba(0, 0, 0, 0.7);
-        --task-item-hover-bg: rgba(74, 144, 226, 0.1);
-        --completed-image-opacity: 0.5;
+        --completed-opacity: 0.5;
         --control-button-bg: var(--accent-color);
-        --control-button-opacity: 0.9;
       }
     }
 

src/examples/purity-todo/components/header.ts

@@ -6,8 +6,8 @@ import {ACTION_BUTTON} from "./app-style.js"
 const headerStyle = (): string => render`
   <style id="header-style">
     .header {
-      background-color: var(--header-bg);
-      border-bottom: var(--header-border);
+      background-color: var(--bg-color-secondary);
+      border-bottom: none;
       height: 3rem;
       min-height: 3rem;
       max-width: 100%;

src/examples/purity-todo/components/input-form.ts

@@ -21,13 +21,7 @@ const inputFormStyle = () => render`
       height: 100%;
       background-color: var(--input-bg);
       color: var(--input-color);
-      border: var(--input-border);
-      border-radius: 0;
-    }
-
-    form#task-form input:focus {
-      outline: var(--input-focus-outline);
-      outline-offset: -2px;
+      border: none;
     }
 
   </style>

src/examples/purity-todo/components/modal-style.ts

@@ -30,7 +30,7 @@ export const modalStyle = (): string => render`
     }
 
     .modal .modal-header {
-      background-color: var(--header-bg);
+      background-color: var(--bg-color-secondary);
       font-weight: bold;
       position: relative;
       ${lineContainerCSS}

src/examples/purity-todo/components/task-details-style.ts

@@ -38,8 +38,8 @@ export const taskDetailsStyle = (): string => render`
       padding: 4px 16px;
       background: var(--control-button-bg);
       color: white;
-      opacity: var(--control-button-opacity);
       border-radius: 8px;
+      border: none;
     }
 
     .task-details--description {

src/examples/purity-todo/components/task-list-style.ts

@@ -32,7 +32,7 @@ export const taskListStyle = (): string => render`
 
     ol#task-list .task-item {
       display: flex;
-      border-bottom: 1px solid var(--border-color);
+      border-bottom: 1px solid var(--bg-color-secondary);
       align-items: center;
       padding: 0;
     }
@@ -46,10 +46,6 @@ export const taskListStyle = (): string => render`
       overflow: hidden;
     }
 
-    ol#task-list .task-item.completed .${ITEM_DESCRIPTION} {
-      color: var(--completed-color);
-    }
-
     .${ITEM_DESCRIPTION} .subtask-inline {
       color: var(--subtask-color);
     }
@@ -70,13 +66,15 @@ export const taskListStyle = (): string => render`
       z-index: -1;
     }
 
-    ol#task-list .task-item:hover {
-      background-color: var(--task-item-hover-bg);
-    }
+    ol#task-list .task-item.completed {
+      .${ITEM_DESCRIPTION} {
+        opacity: var(--completed-opacity);
+      }
 
-    ol#task-list .task-item.completed > img {
-      filter: grayscale(1);
-      opacity: var(--completed-image-opacity);
+      > img {
+        filter: grayscale(1);
+        opacity: var(--completed-opacity);
+      }
     }
 
     ol#task-list .task-item.stale {

src/examples/purity-todo/manifest.json

@@ -1,5 +1,5 @@
 {
-  "name": "Purity Todo 2.20",
+  "name": "Purity Todo 2.21",
   "short_name": "ToDo",
   "description": "Todo list written with purity.js",
   "icons": [

src/examples/purity-todo/purity-todo.sw.ts

@@ -1,6 +1,6 @@
 const appScope = (self as any).registration.scope
 
-const cacheName = `${appScope}@2.20`
+const cacheName = `${appScope}@2.21`
 const contentToCache = [
   "./",
   "./index.html",
@@ -14,7 +14,7 @@
   "manifest.json",
 ]
 
 self.addEventListener("install", (e: any) => {
   console.log(`[purity-todo.sw.js] Install`)
   e.waitUntil(
     (async () => {
@@ -25,7 +25,7 @@
   )
 })
 
 self.addEventListener("activate", (e: any) => {
   console.log(`[purity-todo.sw.js] Activate`)
   caches.keys().then(console.log)
   e.waitUntil(
@@ -44,7 +44,7 @@
   )
 })
 
 self.addEventListener("fetch", (e: any) => {
   e.respondWith(
     (async () => {
       const r = await caches.match(e.request)