From eac795d1d8d4d1a92f9bc0749cee776f9265f3d8 Mon Sep 17 00:00:00 2001 From: Himanshu Pandey Date: Sat, 10 Oct 2020 10:19:27 +0530 Subject: [PATCH 1/5] added contrast in buttons --- src/parts/_forms.css | 17 ++++++++++------- src/variables-dark.css | 3 ++- src/variables-light.css | 7 ++++--- 3 files changed, 16 insertions(+), 11 deletions(-) diff --git a/src/parts/_forms.css b/src/parts/_forms.css index a8a5793..ad5742a 100644 --- a/src/parts/_forms.css +++ b/src/parts/_forms.css @@ -29,6 +29,14 @@ select { outline: none; } +button, +input[type='submit'], +input[type='button'] { + background-color: var(--background-btn); + padding-right: 30px; + padding-left: 30px; +} + input[type='color'] { min-height: 2rem; padding: 8px; @@ -94,17 +102,12 @@ select[multiple] { overflow-y: auto; } -button, -input[type='submit'], -input[type='button'] { - padding-right: 30px; - padding-left: 30px; -} - button:hover, input[type='submit']:hover, input[type='button']:hover { background: var(--button-hover); + + /* transform: scale(1.03); */ } input:focus, diff --git a/src/variables-dark.css b/src/variables-dark.css index c43ac79..6b4222a 100755 --- a/src/variables-dark.css +++ b/src/variables-dark.css @@ -1,6 +1,7 @@ :root { --background-body: #202b38; --background: #161f27; + --background-btn: #0c151c; --background-alt: #1a242f; --selection: #1c76c5; --text-main: #dbdbdb; @@ -11,7 +12,7 @@ --border: #526980; --code: #ffbe85; --animation-duration: 0.1s; - --button-hover: #324759; + --button-hover: #2f5372; --scrollbar-thumb: var(--button-hover); --scrollbar-thumb-hover: color-mod(var(--scrollbar-thumb) lightness(+8%)); --form-placeholder: #a9a9a9; diff --git a/src/variables-light.css b/src/variables-light.css index 74069c3..84cc0b3 100755 --- a/src/variables-light.css +++ b/src/variables-light.css @@ -1,6 +1,7 @@ :root { --background-body: #fff; - --background: #efefef; + --background: #e2e2e2; + --background-btn: #d0cfcf; --background-alt: #f7f7f7; --selection: #9e9e9e; --text-main: #363636; @@ -11,11 +12,11 @@ --border: #dbdbdb; --code: #000; --animation-duration: 0.1s; - --button-hover: #ddd; + --button-hover: rgb(170, 170, 170); --scrollbar-thumb: color-mod(var(--button-hover) lightness(-3%)); --scrollbar-thumb-hover: color-mod(var(--button-hover) lightness(-10%)); --form-placeholder: #949494; - --form-text: #000; + --form-text: rgb(29, 29, 29); --variable: #39a33c; --highlight: #ff0; --select-arrow: svg-load('./assets/select-arrow.svg', fill: #161f27); From 84b57fd8c449d589771ac19d585ac7e02ad838cd Mon Sep 17 00:00:00 2001 From: Himanshu Pandey Date: Mon, 12 Oct 2020 12:15:57 +0530 Subject: [PATCH 2/5] added changeset --- .changeset/rude-pots-sort.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/rude-pots-sort.md diff --git a/.changeset/rude-pots-sort.md b/.changeset/rude-pots-sort.md new file mode 100644 index 0000000..568261e --- /dev/null +++ b/.changeset/rude-pots-sort.md @@ -0,0 +1,5 @@ +--- +"water.css": patch +--- + +Added Contrast to the Buttons From 3430e4d409b86fe27a0251d19ab04a0b88a5f4d3 Mon Sep 17 00:00:00 2001 From: Himanshu Date: Tue, 20 Oct 2020 11:53:55 +0530 Subject: [PATCH 3/5] changed hover color closer to base color --- .changeset/dirty-beans-wonder.md | 5 +++++ src/variables-dark.css | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) create mode 100644 .changeset/dirty-beans-wonder.md diff --git a/.changeset/dirty-beans-wonder.md b/.changeset/dirty-beans-wonder.md new file mode 100644 index 0000000..111bae2 --- /dev/null +++ b/.changeset/dirty-beans-wonder.md @@ -0,0 +1,5 @@ +--- +"water.css": patch +--- + +changed hover color close to base color diff --git a/src/variables-dark.css b/src/variables-dark.css index c43ac79..3f1f966 100755 --- a/src/variables-dark.css +++ b/src/variables-dark.css @@ -11,7 +11,7 @@ --border: #526980; --code: #ffbe85; --animation-duration: 0.1s; - --button-hover: #324759; + --button-hover: #0a121a; --scrollbar-thumb: var(--button-hover); --scrollbar-thumb-hover: color-mod(var(--scrollbar-thumb) lightness(+8%)); --form-placeholder: #a9a9a9; From 5f66486244c086a188d41b13b014db70c75932f2 Mon Sep 17 00:00:00 2001 From: Kognise Date: Wed, 11 Aug 2021 14:39:22 -0400 Subject: [PATCH 4/5] Align better with main branch and update changesets --- .changeset/dirty-beans-wonder.md | 5 ----- .changeset/rude-pots-sort.md | 2 +- .changeset/stale-dodos-chew.md | 5 ----- src/parts/_forms.css | 27 +++++++++++++++++---------- src/variables-dark.css | 6 +++--- src/variables-light.css | 8 ++++---- 6 files changed, 25 insertions(+), 28 deletions(-) delete mode 100644 .changeset/dirty-beans-wonder.md delete mode 100644 .changeset/stale-dodos-chew.md diff --git a/.changeset/dirty-beans-wonder.md b/.changeset/dirty-beans-wonder.md deleted file mode 100644 index 111bae2..0000000 --- a/.changeset/dirty-beans-wonder.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"water.css": patch ---- - -changed hover color close to base color diff --git a/.changeset/rude-pots-sort.md b/.changeset/rude-pots-sort.md index 568261e..6ce3df0 100644 --- a/.changeset/rude-pots-sort.md +++ b/.changeset/rude-pots-sort.md @@ -2,4 +2,4 @@ "water.css": patch --- -Added Contrast to the Buttons +Update button colors for better contrast, especially in tables \ No newline at end of file diff --git a/.changeset/stale-dodos-chew.md b/.changeset/stale-dodos-chew.md deleted file mode 100644 index 4a52517..0000000 --- a/.changeset/stale-dodos-chew.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"water.css": patch ---- - -Better button color inside table. diff --git a/src/parts/_forms.css b/src/parts/_forms.css index ad5742a..868575c 100644 --- a/src/parts/_forms.css +++ b/src/parts/_forms.css @@ -1,6 +1,7 @@ button, select, input[type='submit'], +input[type='reset'], input[type='button'], input[type='checkbox'], input[type='range'], @@ -8,11 +9,16 @@ input[type='radio'] { cursor: pointer; } -input:not([type='checkbox']):not([type='radio']), +input, select { display: block; } +[type='checkbox'], +[type='radio'] { + display: initial; +} + input, button, textarea, @@ -31,12 +37,20 @@ select { button, input[type='submit'], +input[type='reset'], input[type='button'] { - background-color: var(--background-btn); + background-color: var(--button-base); padding-right: 30px; padding-left: 30px; } +button:hover, +input[type='submit']:hover, +input[type='reset']:hover, +input[type='button']:hover { + background: var(--button-hover); +} + input[type='color'] { min-height: 2rem; padding: 8px; @@ -102,14 +116,6 @@ select[multiple] { overflow-y: auto; } -button:hover, -input[type='submit']:hover, -input[type='button']:hover { - background: var(--button-hover); - - /* transform: scale(1.03); */ -} - input:focus, select:focus, button:focus, @@ -120,6 +126,7 @@ textarea:focus { input[type='checkbox']:active, input[type='radio']:active, input[type='submit']:active, +input[type='reset']:active, input[type='button']:active, input[type='range']:active, button:active { diff --git a/src/variables-dark.css b/src/variables-dark.css index a3e2925..3b1b800 100755 --- a/src/variables-dark.css +++ b/src/variables-dark.css @@ -1,7 +1,6 @@ :root { --background-body: #202b38; --background: #161f27; - --background-btn: #0c151c; --background-alt: #1a242f; --selection: #1c76c5; --text-main: #dbdbdb; @@ -12,9 +11,10 @@ --border: #526980; --code: #ffbe85; --animation-duration: 0.1s; - --button-hover: #0a121a; + --button-base: #0c151c; + --button-hover: #040a0f; --scrollbar-thumb: var(--button-hover); - --scrollbar-thumb-hover: color-mod(var(--scrollbar-thumb) lightness(+8%)); + --scrollbar-thumb-hover: color-mod(var(--scrollbar-thumb) lightness(-30%)); --form-placeholder: #a9a9a9; --form-text: #fff; --variable: #d941e2; diff --git a/src/variables-light.css b/src/variables-light.css index 84cc0b3..d0c2bad 100755 --- a/src/variables-light.css +++ b/src/variables-light.css @@ -1,7 +1,6 @@ :root { --background-body: #fff; --background: #e2e2e2; - --background-btn: #d0cfcf; --background-alt: #f7f7f7; --selection: #9e9e9e; --text-main: #363636; @@ -12,9 +11,10 @@ --border: #dbdbdb; --code: #000; --animation-duration: 0.1s; - --button-hover: rgb(170, 170, 170); - --scrollbar-thumb: color-mod(var(--button-hover) lightness(-3%)); - --scrollbar-thumb-hover: color-mod(var(--button-hover) lightness(-10%)); + --button-base: #d0cfcf; + --button-hover: #9b9b9b; + --scrollbar-thumb: color-mod(var(--button-hover) lightness(+6%)); + --scrollbar-thumb-hover: var(--button-hover); --form-placeholder: #949494; --form-text: rgb(29, 29, 29); --variable: #39a33c; From b0cf60692d8c2ff583a37fad3dbec210b3f2a9c7 Mon Sep 17 00:00:00 2001 From: Kognise Date: Wed, 11 Aug 2021 14:43:14 -0400 Subject: [PATCH 5/5] Tweak colors --- src/variables-light.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/variables-light.css b/src/variables-light.css index d0c2bad..222f26a 100755 --- a/src/variables-light.css +++ b/src/variables-light.css @@ -1,6 +1,6 @@ :root { --background-body: #fff; - --background: #e2e2e2; + --background: #efefef; --background-alt: #f7f7f7; --selection: #9e9e9e; --text-main: #363636; @@ -16,8 +16,8 @@ --scrollbar-thumb: color-mod(var(--button-hover) lightness(+6%)); --scrollbar-thumb-hover: var(--button-hover); --form-placeholder: #949494; - --form-text: rgb(29, 29, 29); + --form-text: #1d1d1d; --variable: #39a33c; --highlight: #ff0; --select-arrow: svg-load('./assets/select-arrow.svg', fill: #161f27); -} +} \ No newline at end of file