Merge pull request #229 from HimanshuPandey2002/himanshu

added contrast in buttons

.changeset/rude-pots-sort.md

@@ -0,0 +1,5 @@
+---
+"water.css": patch
+---
+
+Update button colors for better contrast, especially in tables

.changeset/stale-dodos-chew.md

@@ -1,5 +0,0 @@
----
-"water.css": patch
----
-
-Better button color inside table.

src/parts/_forms.css

@@ -35,6 +35,22 @@ select {
   outline: none;
 }
 
+button,
+input[type='submit'],
+input[type='reset'],
+input[type='button'] {
+  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;
@@ -100,21 +116,6 @@ select[multiple] {
   overflow-y: auto;
 }
 
-button,
-input[type='submit'],
-input[type='reset'],
-input[type='button'] {
-  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:focus,
 select:focus,
 button:focus,

src/variables-dark.css

@@ -11,9 +11,10 @@
   --border: #526980;
   --code: #ffbe85;
   --animation-duration: 0.1s;
-  --button-hover: #324759;
+  --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;

src/variables-light.css

@@ -11,12 +11,13 @@
   --border: #dbdbdb;
   --code: #000;
   --animation-duration: 0.1s;
-  --button-hover: #ddd;
-  --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: #000;
+  --form-text: #1d1d1d;
   --variable: #39a33c;
   --highlight: #ff0;
   --select-arrow: svg-load('./assets/select-arrow.svg', fill: #161f27);
-}
+}