redesign with css vars

morris · Dec 2, 2023 · 0c42a2e · 0c42a2e
1 parent 5bc7940
commit 0c42a2e
Show file tree

Hide file tree

Showing 12 changed files with 71 additions and 39 deletions.
diff --git a/README.md b/README.md
@@ -169,16 +169,17 @@ plain HTML, CSS and JS files. The HTML and CSS mostly follows
 which yields an intuitive, component-oriented structure.
 
 The stylesheets are slightly verbose.
-I missed [SCSS](https://sass-lang.com/) here
+[CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
+did help but I missed [SCSS](https://sass-lang.com/) here
 and I think one of these is a must-have for bigger projects.
 Additionally, the global CSS namespace problem is unaddressed
 (see e.g. [CSS Modules](https://github.com/css-modules/css-modules)).
 
 All JavaScript files are ES modules (`import`/`export`).
 
 Note that I've opted out of web components completely.
-I can't clearly articulate what I dislike about them
-but I never missed them throughout this study.
+I can't clearly articulate what I find problematic about them
+but I never missed them throughout the study.
 
 ---
 
@@ -921,6 +922,7 @@ Thanks!
 
 ### 12/2023
 
+- Redesign with CSS variables
 - Added GitHub action for running checks and deployment
 - Edited closing section
 - Updated numbers

diff --git a/public/index.html b/public/index.html
@@ -30,6 +30,7 @@
     <link rel="modulepreload" href="scripts/util.js" />
     <link rel="modulepreload" href="scripts/uuid.js" />
 
+    <link rel="stylesheet" href="styles/vars.css" />
     <link rel="stylesheet" href="styles/base.css" />
     <link rel="stylesheet" href="styles/app-button.css" />
     <link rel="stylesheet" href="styles/app-collapsible.css" />

diff --git a/public/styles/app-button.css b/public/styles/app-button.css
@@ -11,21 +11,21 @@
   vertical-align: middle;
   border-radius: 4px;
   transition: all 0.1s ease-out;
-  color: #999;
+  color: var(--button-text);
 }
 
 .app-button:hover {
-  color: #000;
+  color: var(--button-active-text);
 }
 
 .app-button:active {
   transform: translate(0, 1px);
-  color: #000;
-  background: #f3f3f3;
+  color: var(--button-active-text);
+  background: var(--button-active-bg);
 }
 
 .app-button:focus {
-  color: #000;
+  color: var(--button-active-text);
 }
 
 .app-button.-circle {
@@ -39,12 +39,12 @@
 }
 
 .app-button.-highlight {
-  background: #111;
-  color: #fff;
+  color: var(--button-highlight-text);
+  font-weight: bold;
 }
 
 .app-button.-highlight:hover {
-  color: #eee;
+  color: var(--button-active-text);
 }
 
 @media (width >= 600px) {

diff --git a/public/styles/app-collapsible.css b/public/styles/app-collapsible.css
@@ -1,13 +1,9 @@
 .app-collapsible > .bar {
-  height: 40px;
-  line-height: 37px;
+  height: 32px;
+  line-height: 29px;
   margin: 0;
   padding: 0 0.75em;
-  background: #eee;
-}
-
-.app-collapsible > .bar > .toggle:active {
-  background: #fff;
+  background: var(--button-active-bg);
 }
 
 .app-collapsible.-animated > .body {

diff --git a/public/styles/app-date-picker.css b/public/styles/app-date-picker.css
@@ -1,6 +1,6 @@
 .app-date-picker {
   width: 260px;
-  background: #fff;
+  background: var(--main-bg);
   border-radius: 4px;
   box-shadow: rgb(0 0 0 / 10%) 0 4px 12px;
   padding: 8px;
@@ -33,7 +33,8 @@
 /* stylelint-disable-next-line rscss/class-format */
 .app-date-picker > .dates > thead > tr > th {
   font-weight: normal;
-  padding: 0;
+  text-transform: uppercase;
+  padding-bottom: 0.4em;
 }
 
 /* stylelint-disable-next-line rscss/class-format */

diff --git a/public/styles/app-footer.css b/public/styles/app-footer.css
@@ -1,15 +1,14 @@
 .app-footer {
-  border-top: solid 1px #ccc;
   padding: 2em;
   font-size: 0.8em;
-  color: #999;
-}
-
-/* stylelint-disable-next-line rscss/no-descendant-combinator */
-.app-footer a {
-  color: #999;
+  color: var(--aside-text);
 }
 
 .app-footer > p {
   margin: 0;
 }
+
+/* stylelint-disable-next-line rscss/no-descendant-combinator */
+.app-footer a {
+  color: var(--aside-text);
+}
diff --git a/public/styles/app-header.css b/public/styles/app-header.css
@@ -1,10 +1,10 @@
 .app-header {
-  background: #001f3f;
+  background: var(--header-bg);
   padding: 10px 20px;
 }
 
 .app-header > .title {
-  color: #fff;
+  color: var(--header-text);
   font-size: 1em;
   margin: 0;
 }
@@ -16,5 +16,5 @@
   margin: 0;
   font-size: 0.8em;
   line-height: 1.5em;
-  color: #fff;
+  color: var(--header-text);
 }
diff --git a/public/styles/base.css b/public/styles/base.css
@@ -13,6 +13,8 @@ body {
   margin: 0;
   padding: 0;
   height: 100%;
+  background: var(--main-bg);
+  color: var(--main-text);
 }
 
 body {

diff --git a/public/styles/todo-day.css b/public/styles/todo-day.css
@@ -18,17 +18,21 @@
   font-weight: normal;
   margin: 0.25em 0 0;
   font-size: 0.8em;
-  color: #aaa;
+  color: var(--aside-text);
 }
 
 .todo-day.-past {
-  color: #ccc;
+  color: var(--disabled-text);
+}
+
+.todo-day.-past > .header > .date {
+  color: var(--disabled-text);
 }
 
 .todo-day.-today > .header > .dayofweek {
-  color: #85144b;
+  color: var(--highlight-text);
 }
 
 .todo-day.-today > .header > .date {
-  color: #000;
+  color: var(--highlight-text);
 }
diff --git a/public/styles/todo-item-input.css b/public/styles/todo-item-input.css
@@ -2,7 +2,7 @@
   position: relative;
   margin: 0 0 0 30px;
   padding: 0 30px 0 0;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid var(--main-border-light);
   font-size: 0.8em;
   line-height: 1.5em;
   transition: transform 0.2s ease-out;
@@ -17,6 +17,7 @@
   font-family: inherit;
   font-size: inherit;
   line-height: 1.5em;
+  background: transparent;
 }
 
 .todo-item-input > .save {

diff --git a/public/styles/todo-item.css b/public/styles/todo-item.css
@@ -4,7 +4,7 @@
   line-height: 1.5em;
   margin: 0;
   padding: 0.25em 0;
-  background: #fff;
+  background: var(--main-bg);
   transition:
     transform 0.2s ease-out,
     opacity 0.2s ease-out;
@@ -34,7 +34,7 @@
 .todo-item > .label {
   margin: 0 0 0 30px;
   padding-bottom: 0.25em;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid var(--main-border-light);
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -43,7 +43,7 @@
   display: none;
   margin: 0 0 0 30px;
   padding-right: 24px;
-  border-bottom: 1px solid #999;
+  border-bottom: 1px solid var(--main-border);
 }
 
 .todo-item > .form > .input {
@@ -65,7 +65,7 @@
 }
 
 .todo-item.-done > .label {
-  color: #ccc;
+  color: var(--disabled-text);
   text-decoration: line-through;
 }
 

diff --git a/public/styles/vars.css b/public/styles/vars.css
@@ -0,0 +1,26 @@
+:root {
+  /* Named color scheme */
+  --white: #fefefe;
+  --black: #0a0a0b;
+  --grey1: #545e75;
+  --grey2: #b0b0b8;
+  --grey3: #d2d2d6;
+  --grey4: #e4ecf0;
+  --red: #ce2d4f;
+
+  /* UI color mapping */
+  --main-text: var(--black);
+  --main-bg: var(--white);
+  --main-border: var(--grey2);
+  --main-border-light: var(--grey3);
+  --header-text: var(--grey1);
+  --header-bg: var(--white);
+  --highlight-text: var(--red);
+  --disabled-text: var(--grey3);
+  --aside-text: var(--grey1);
+  --button-text: var(--grey1);
+  --button-bg: transparent;
+  --button-active-text: var(--black);
+  --button-active-bg: var(--grey4);
+  --button-highlight-text: var(--red);
+}