diff --git a/README.md b/README.md
index f8e47b4..1fab6f1 100644
--- a/README.md
+++ b/README.md
@@ -169,7 +169,8 @@ 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)).
@@ -177,8 +178,8 @@ Additionally, the global CSS namespace problem is unaddressed
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
index e439134..560c01d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -30,6 +30,7 @@
+
diff --git a/public/styles/app-button.css b/public/styles/app-button.css
index 16acaa4..e1cb055 100644
--- 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
index b6c70c2..9abf09f 100644
--- 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
index 204781d..f592bf3 100644
--- 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
index ccc584c..972121e 100644
--- 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
index 7078c00..9541c62 100644
--- 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
index ad15356..fe7c5cc 100644
--- 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
index e446c62..369afb3 100644
--- 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
index d0da866..09de138 100644
--- 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
index a6d61a7..4c3350d 100644
--- 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
new file mode 100644
index 0000000..209d7f9
--- /dev/null
+++ 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);
+}