diff --git a/.changeset/rude-pots-sort.md b/.changeset/rude-pots-sort.md new file mode 100644 index 0000000..6ce3df0 --- /dev/null +++ b/.changeset/rude-pots-sort.md @@ -0,0 +1,5 @@ +--- +"water.css": patch +--- + +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 2663efc..868575c 100644 --- a/src/parts/_forms.css +++ b/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, diff --git a/src/variables-dark.css b/src/variables-dark.css index c43ac79..3b1b800 100755 --- a/src/variables-dark.css +++ b/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; diff --git a/src/variables-light.css b/src/variables-light.css index 74069c3..222f26a 100755 --- a/src/variables-light.css +++ b/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); -} +} \ No newline at end of file