From e79f1ef4b47dd89b43b78e006a79875caacc92d8 Mon Sep 17 00:00:00 2001
From: Andrew Tatomyr <andrew.tatomyr@gmail.com>
Date: Wed, 10 Dec 2025 11:53:10 +0200
Subject: [PATCH 1/2] feat(todo): improve color schema

---
 .../purity-todo/components/app-style.ts        | 18 ++++++------------
 src/examples/purity-todo/components/header.ts  |  4 ++--
 .../purity-todo/components/input-form.ts       |  3 +--
 .../purity-todo/components/modal-style.ts      |  2 +-
 .../purity-todo/components/task-list-style.ts  |  2 +-
 src/examples/purity-todo/manifest.json         |  2 +-
 src/examples/purity-todo/purity-todo.sw.ts     |  2 +-
 7 files changed, 13 insertions(+), 20 deletions(-)

diff --git a/src/examples/purity-todo/components/app-style.ts b/src/examples/purity-todo/components/app-style.ts
index adc92ba..ad54158 100644
--- a/src/examples/purity-todo/components/app-style.ts
+++ b/src/examples/purity-todo/components/app-style.ts
@@ -5,19 +5,16 @@ export const ACTION_BUTTON = "action-button"
 export const appStyle = (): string => render`
   <style id="app-style">
     :root {
-      --background-color: #f0f0f0;
       --text-color: #555;
+      --background-color: #f0f0f0;
+      --bg-color-secondary: lightgrey;
       --shadow-color: #555;
-      --border-color: lightgrey;
       --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-bg: #303030;
       --input-focus-outline: none;
       --modal-overlay-bg: #50505030;
       --task-item-hover-bg: transparent;
@@ -28,19 +25,16 @@ export const appStyle = (): string => render`
 
     @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-bg: var(--bg-color-secondary);
         --input-focus-outline: 2px solid var(--accent-color);
         --modal-overlay-bg: rgba(0, 0, 0, 0.7);
         --task-item-hover-bg: rgba(74, 144, 226, 0.1);
diff --git a/src/examples/purity-todo/components/header.ts b/src/examples/purity-todo/components/header.ts
index c540151..7b1c512 100644
--- a/src/examples/purity-todo/components/header.ts
+++ b/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%;
diff --git a/src/examples/purity-todo/components/input-form.ts b/src/examples/purity-todo/components/input-form.ts
index d9d9153..2e6c575 100644
--- a/src/examples/purity-todo/components/input-form.ts
+++ b/src/examples/purity-todo/components/input-form.ts
@@ -21,8 +21,7 @@ const inputFormStyle = () => render`
       height: 100%;
       background-color: var(--input-bg);
       color: var(--input-color);
-      border: var(--input-border);
-      border-radius: 0;
+      border: none;
     }
 
     form#task-form input:focus {
diff --git a/src/examples/purity-todo/components/modal-style.ts b/src/examples/purity-todo/components/modal-style.ts
index 66bd076..3f8fc29 100644
--- a/src/examples/purity-todo/components/modal-style.ts
+++ b/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}
diff --git a/src/examples/purity-todo/components/task-list-style.ts b/src/examples/purity-todo/components/task-list-style.ts
index f0bb066..6d1d162 100644
--- a/src/examples/purity-todo/components/task-list-style.ts
+++ b/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;
     }
diff --git a/src/examples/purity-todo/manifest.json b/src/examples/purity-todo/manifest.json
index 156d23c..c086781 100644
--- a/src/examples/purity-todo/manifest.json
+++ b/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": [
diff --git a/src/examples/purity-todo/purity-todo.sw.ts b/src/examples/purity-todo/purity-todo.sw.ts
index a490dd2..3220c54 100644
--- a/src/examples/purity-todo/purity-todo.sw.ts
+++ b/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",

From bf5e177a2024e7b2d1a90e8b1a88fb2b2d8111e5 Mon Sep 17 00:00:00 2001
From: Andrew Tatomyr <andrew.tatomyr@gmail.com>
Date: Wed, 10 Dec 2025 14:03:27 +0200
Subject: [PATCH 2/2] feat(todo): simplify colors\

---
 .../purity-todo/components/app-style.ts       | 32 +++++++------------
 .../purity-todo/components/input-form.ts      |  5 ---
 .../components/task-details-style.ts          |  2 +-
 .../purity-todo/components/task-list-style.ts | 18 +++++------
 4 files changed, 21 insertions(+), 36 deletions(-)

diff --git a/src/examples/purity-todo/components/app-style.ts b/src/examples/purity-todo/components/app-style.ts
index ad54158..5418622 100644
--- a/src/examples/purity-todo/components/app-style.ts
+++ b/src/examples/purity-todo/components/app-style.ts
@@ -5,22 +5,18 @@ export const ACTION_BUTTON = "action-button"
 export const appStyle = (): string => render`
   <style id="app-style">
     :root {
-      --text-color: #555;
-      --background-color: #f0f0f0;
-      --bg-color-secondary: lightgrey;
-      --shadow-color: #555;
+      --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;
-      --input-color: #eee;
-      --input-bg: #303030;
-      --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) {
@@ -30,17 +26,13 @@ export const appStyle = (): string => render`
         --bg-color-secondary: #3a3a55;
         --shadow-color: rgba(0, 0, 0, 0.5);
         --accent-color: #4a90e2;
-        --completed-color: #6b7280;
         --subtask-color: #9ca3af;
         --button-active-bg: var(--accent-color);
         --input-color: var(--text-color);
         --input-bg: var(--bg-color-secondary);
-        --input-focus-outline: 2px solid var(--accent-color);
         --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;
       }
     }
 
diff --git a/src/examples/purity-todo/components/input-form.ts b/src/examples/purity-todo/components/input-form.ts
index 2e6c575..77f47e2 100644
--- a/src/examples/purity-todo/components/input-form.ts
+++ b/src/examples/purity-todo/components/input-form.ts
@@ -24,11 +24,6 @@ const inputFormStyle = () => render`
       border: none;
     }
 
-    form#task-form input:focus {
-      outline: var(--input-focus-outline);
-      outline-offset: -2px;
-    }
-
   </style>
 `
 
diff --git a/src/examples/purity-todo/components/task-details-style.ts b/src/examples/purity-todo/components/task-details-style.ts
index 0dd0726..e74d503 100644
--- a/src/examples/purity-todo/components/task-details-style.ts
+++ b/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 {
diff --git a/src/examples/purity-todo/components/task-list-style.ts b/src/examples/purity-todo/components/task-list-style.ts
index 6d1d162..855eca9 100644
--- a/src/examples/purity-todo/components/task-list-style.ts
+++ b/src/examples/purity-todo/components/task-list-style.ts
@@ -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 {