From 0c42a2e8d58a55b74d0ea2279be3ef1b4871688b Mon Sep 17 00:00:00 2001 From: Morris Brodersen Date: Sat, 2 Dec 2023 14:55:13 +0100 Subject: [PATCH] redesign with css vars --- README.md | 8 +++++--- public/index.html | 1 + public/styles/app-button.css | 16 ++++++++-------- public/styles/app-collapsible.css | 10 +++------- public/styles/app-date-picker.css | 5 +++-- public/styles/app-footer.css | 13 ++++++------- public/styles/app-header.css | 6 +++--- public/styles/base.css | 2 ++ public/styles/todo-day.css | 12 ++++++++---- public/styles/todo-item-input.css | 3 ++- public/styles/todo-item.css | 8 ++++---- public/styles/vars.css | 26 ++++++++++++++++++++++++++ 12 files changed, 71 insertions(+), 39 deletions(-) create mode 100644 public/styles/vars.css 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); +}