Add spacing around scrollbar (#277)

* Add spacing around scrollbar

* Fix scrollbar in auto theme and remove color-mod

* Add changesets

Co-authored-by: Felix Mattick <felix.mattick@gmail.com>

.changeset/green-humans-bathe.md

@@ -0,0 +1,5 @@
+---
+"water.css": patch
+---
+
+Added space around scrollbar so it is not against the window edge and is easier to click.

.changeset/metal-mails-help.md

@@ -0,0 +1,5 @@
+---
+"water.css": patch
+---
+
+Update the scrollbar styles to be better on Firefox

.changeset/quiet-wombats-press.md

@@ -0,0 +1,5 @@
+---
+"water.css": patch
+---
+
+Remove reliance on color-mod function

gulpfile.js

@@ -17,10 +17,6 @@ const sizereport = require('gulp-sizereport')
 const postcssCssVariables = require('postcss-css-variables')
 const postcssImport = require('postcss-import')
 const postcssInlineSvg = require('postcss-inline-svg')
-const postcssColorModFunction = require('postcss-color-mod-function').bind(null, {
-  /* Use `.toRGBLegacy()` as other methods can result in lots of decimals */
-  stringifier: (color) => color.toRGBLegacy()
-})
 
 const paths = {
   docs: { src: 'docs/**', dest: 'out/docs' },
@@ -58,7 +54,7 @@ const style = () => {
   return (
     gulp
       .src(paths.styles.src)
-      .pipe(postcss([postcssImport(), postcssColorModFunction(), postcssInlineSvg()]))
+      .pipe(postcss([postcssImport(), postcssInlineSvg()]))
 
       .pipe(startDiff())
       .pipe(postcss([postcssCssVariables({ preserve: true })]))

package.json

@@ -62,7 +62,6 @@
     "htmlnano": "^0.2.3",
     "husky": "^4.2.5",
     "pa11y": "^5.3.0",
-    "postcss-color-mod-function": "^3.0.3",
     "postcss-css-variables": "^0.12.0",
     "postcss-import": "^12.0.1",
     "postcss-inline-svg": "^4.1.0",

src/parts/_base.css

@@ -1,8 +1,3 @@
-html {
-  scrollbar-color: var(--scrollbar-thumb) var(--background-body);
-  scrollbar-width: thin;
-}
-
 body {
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
   line-height: 1.4;

src/parts/_misc.css

@@ -48,23 +48,28 @@ tbody tr:nth-child(even) button:hover {
   background-color: var(--background-body);
 }
 
+html {
+  scrollbar-color: var(--scrollbar-thumb-pressed) var(--background);
+}
+
 ::-webkit-scrollbar {
-  height: 10px;
-  width: 10px;
+  height: 16px;
+  width: 16px;
 }
 
 ::-webkit-scrollbar-track {
   background: var(--background);
-  border-radius: 6px;
 }
 
 ::-webkit-scrollbar-thumb {
   background: var(--scrollbar-thumb);
-  border-radius: 6px;
+  background-clip: content-box;
+  border: 4px solid var(--background);
+  border-radius: 8px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: var(--scrollbar-thumb-hover);
+  background-color: var(--scrollbar-thumb-hover);
 }
 
 ::selection {

src/variables-dark.css

@@ -14,7 +14,7 @@
   --button-base: #0c151c;
   --button-hover: #040a0f;
   --scrollbar-thumb: var(--button-hover);
-  --scrollbar-thumb-hover: color-mod(var(--scrollbar-thumb) lightness(-30%));
+  --scrollbar-thumb-hover: #3b4d5c;
   --form-placeholder: #a9a9a9;
   --form-text: #fff;
   --variable: #d941e2;

src/variables-light.css

@@ -13,7 +13,7 @@
   --animation-duration: 0.1s;
   --button-base: #d0cfcf;
   --button-hover: #9b9b9b;
-  --scrollbar-thumb: color-mod(var(--button-hover) lightness(+6%));
+  --scrollbar-thumb: #aaa;
   --scrollbar-thumb-hover: var(--button-hover);
   --form-placeholder: #949494;
   --form-text: #1d1d1d;

yarn.lock

@@ -968,11 +968,6 @@
     human-id "^1.0.2"
     prettier "^1.18.2"
 
-"@csstools/convert-colors@^1.4.0":
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"
-  integrity sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==
-
 "@gulp-sourcemaps/identity-map@1.X":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@gulp-sourcemaps/identity-map/-/identity-map-1.0.2.tgz#1e6fe5d8027b1f285dc0d31762f566bccd73d5a9"
@@ -3668,11 +3663,6 @@ flatted@^2.0.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138"
   integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==
 
-flatten@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.3.tgz#c1283ac9f27b368abc1e36d1ff7b04501a30356b"
-  integrity sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==
-
 flush-write-stream@^1.0.2:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.1.1.tgz#8dd7d873a1babc207d94ead0c2e0e44276ebf2e8"
@@ -6509,15 +6499,6 @@ postcss-calc@^7.0.1:
     postcss-selector-parser "^6.0.2"
     postcss-value-parser "^4.0.2"
 
-postcss-color-mod-function@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-color-mod-function/-/postcss-color-mod-function-3.0.3.tgz#816ba145ac11cc3cb6baa905a75a49f903e4d31d"
-  integrity sha512-YP4VG+xufxaVtzV6ZmhEtc+/aTXH3d0JLpnYfxqTvwZPbJhWqp8bSY3nfNzNRFLgB4XSaBA82OE4VjOOKpCdVQ==
-  dependencies:
-    "@csstools/convert-colors" "^1.4.0"
-    postcss "^7.0.2"
-    postcss-values-parser "^2.0.0"
-
 postcss-colormin@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-4.0.3.tgz#ae060bce93ed794ac71264f08132d550956bd381"
@@ -6883,15 +6864,6 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2, postcss-value-parser@^
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
   integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
 
-postcss-values-parser@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-2.0.1.tgz#da8b472d901da1e205b47bdc98637b9e9e550e5f"
-  integrity sha512-2tLuBsA6P4rYTNKCXYG/71C7j1pU6pK503suYOmn4xYrQIzW+opD+7FAFNuGSdZC/3Qfy334QbeMu7MEb8gOxg==
-  dependencies:
-    flatten "^1.0.2"
-    indexes-of "^1.0.1"
-    uniq "^1.0.1"
-
 postcss@^6.0.8:
   version "6.0.23"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"