diff --git a/.changeset/fluffy-dingos-beam.md b/.changeset/fluffy-dingos-beam.md deleted file mode 100644 index eddfb0d..0000000 --- a/.changeset/fluffy-dingos-beam.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"water.css": patch ---- - -Add style for color input field diff --git a/.changeset/friendly-meals-cheat.md b/.changeset/friendly-meals-cheat.md new file mode 100644 index 0000000..6fc2591 --- /dev/null +++ b/.changeset/friendly-meals-cheat.md @@ -0,0 +1,5 @@ +--- +"water.css": minor +--- + +Add monospace system font stack diff --git a/.changeset/fuzzy-zoos-wash.md b/.changeset/fuzzy-zoos-wash.md new file mode 100644 index 0000000..26b1d70 --- /dev/null +++ b/.changeset/fuzzy-zoos-wash.md @@ -0,0 +1,5 @@ +--- +"water.css": patch +--- + +Save theme in bookmarklet, and use prefers-color-scheme value as default diff --git a/.changeset/green-humans-bathe.md b/.changeset/green-humans-bathe.md new file mode 100644 index 0000000..d674ad4 --- /dev/null +++ b/.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. diff --git a/.changeset/hungry-eagles-shout.md b/.changeset/hungry-eagles-shout.md new file mode 100644 index 0000000..f33a35b --- /dev/null +++ b/.changeset/hungry-eagles-shout.md @@ -0,0 +1,5 @@ +--- +"water.css": patch +--- + +Prevent submitting the demo form diff --git a/.changeset/metal-mails-help.md b/.changeset/metal-mails-help.md new file mode 100644 index 0000000..f14593b --- /dev/null +++ b/.changeset/metal-mails-help.md @@ -0,0 +1,5 @@ +--- +"water.css": patch +--- + +Update the scrollbar styles to be better on Firefox diff --git a/.changeset/nine-scissors-live.md b/.changeset/nine-scissors-live.md deleted file mode 100644 index 5f97b87..0000000 --- a/.changeset/nine-scissors-live.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"water.css": patch ---- - -Added styling for Input type Reset diff --git a/.changeset/quiet-wombats-press.md b/.changeset/quiet-wombats-press.md new file mode 100644 index 0000000..f957377 --- /dev/null +++ b/.changeset/quiet-wombats-press.md @@ -0,0 +1,5 @@ +--- +"water.css": patch +--- + +Remove reliance on color-mod function diff --git a/.changeset/real-bananas-beam.md b/.changeset/real-bananas-beam.md deleted file mode 100644 index d85d424..0000000 --- a/.changeset/real-bananas-beam.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"water.css": minor ---- - -Add styles for element diff --git a/.changeset/six-owls-punch.md b/.changeset/six-owls-punch.md new file mode 100644 index 0000000..292800d --- /dev/null +++ b/.changeset/six-owls-punch.md @@ -0,0 +1,5 @@ +--- +"water.css": patch +--- + +Added a theme toggle button to the bookmarklet 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/.changeset/ten-berries-explode.md b/.changeset/ten-berries-explode.md new file mode 100644 index 0000000..cf659cd --- /dev/null +++ b/.changeset/ten-berries-explode.md @@ -0,0 +1,5 @@ +--- +"water.css": patch +--- + +Unprefix `-webkit-appearance` diff --git a/.changeset/thirty-buckets-invent.md b/.changeset/thirty-buckets-invent.md deleted file mode 100644 index bc87c70..0000000 --- a/.changeset/thirty-buckets-invent.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"water.css": patch ---- - -Update main package entrypoint diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index 8985ceb..f0b7490 100755 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -130,10 +130,12 @@ If you're not sure what kind of change you're making, pick "patch". ### Submit a Pull Request -Once your changes have been committed and you've created a changelog, you'll want to [submit a pull request](https://github.com/kognise/water.css/compare). +Once your changes have been committed and you've created a changelog, you'll want to [submit a pull request](https://github.com/kognise/water.css/compare/development..development). Be sure to provide a clear description of what your pull request includes. If your pull request will close an existing issue, make sure to write `Closes #[id]` in the pull request description, where `[id]` is replaced by the issue your pull request will close. +Make sure that you create your pull request with the base set to the `development` branch. This is where all the changes for the next update go. + After submitting a pull request, it will need to be reviewed by a maintainer of the project before being merged. You may be asked to make some changes to your pull request. After your change has been reviewed and merged, you can celebrate as the newest contributor to the Water.css project! 🎉 @@ -167,3 +169,10 @@ After your change has been reviewed and merged, you can celebrate as the newest - **`src/builds`** contains entry files for the different versions water.css comes in: auto, dark and light - **`src/parts`** contains the water.css source code organized in separate files by its kind, like "forms" or "typography" + + +### Branches + +The `master` branch contains the code that is currently published, for example on NPM. + +In contrast, the `development` branch contains all the changes that will come in the next official release. When updating Water.css, software called Changesets will automatically figure out what version increase has to be made. \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index 1cee348..752659c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,13 +1,31 @@ # Water.css +## 2.1.0 + +### Minor Changes + +- 567d2ec: Add styles for element + +### Patch Changes + +- ebb4e23: Add style for color input field +- 21e1e5d: Remove sourcemap references from built files +- c23d65c: Reduce input selector specificity for display property to prevent overriding user's css. Fixes #78 and #82 +- 1f1168c: Added styling for Input type Reset +- 84b57fd: Update button colors for better contrast, especially in tables +- 2fff00c: Update main package entrypoint +- 881022a: Fix color of `` and `` tags inside links + ## 2.0.0 + ### Major Changes - Published to npm - - If you're using an old version of Water.css, you **must** see the README or you won't get new changes + + If you're using an old version of Water.css, you **must** see the README or you won't get new changes - Added sourcemaps, autoprefixing, and minification + - Cleaned up the structure of sourcemap files - Compatible with all major browsers including IE @@ -16,14 +34,13 @@ - Internet Explorer does not support this so the automatic version will always show up as light mode in IE - If you want to force a color scheme, use `light.css`, or `dark.css` - -- Added CSS variables to allow for changing theme colors at runtime instead of build time +* Added CSS variables to allow for changing theme colors at runtime instead of build time IE does not support this either, but nothing should break because we provide fixed fallback colors. It is possible to compile your own theme if you must have custom colors in IE. -- Added [Code of Conduct](.github/CODE_OF_CONDUCT.md) and [Contribution Guide](.github/CONTRIBUTING.md) -- Restructured `.scss` file locations and variable names -- Added `height: auto` to `img` elements to keep aspect ratio +* Added [Code of Conduct](.github/CODE_OF_CONDUCT.md) and [Contribution Guide](.github/CONTRIBUTING.md) +* Restructured `.scss` file locations and variable names +* Added `height: auto` to `img` elements to keep aspect ratio ### Minor Changes diff --git a/bookmarklet/original.js b/bookmarklet/original.js index 99a5f0f..2589eea 100644 --- a/bookmarklet/original.js +++ b/bookmarklet/original.js @@ -10,14 +10,64 @@ $$('link[rel="stylesheet"],style').forEach((el) => el.remove()) // Remove all inline styles $$('*').forEach((el) => (el.style = '')) +const linkElm = createElement('link', { + rel: 'stylesheet', + href: 'https://cdn.jsdelivr.net/npm/water.css@2/out/light.min.css' +}) + // Add water.css and responsive viewport (if necessary) document.head.append( - createElement('link', { - rel: 'stylesheet', - href: 'https://cdn.jsdelivr.net/npm/water.css@2/out/water.css' - }), + linkElm, !$$('meta[name="viewport"]').length && createElement('meta', { name: 'viewport', content: 'width=device-width,initial-scale=1.0' }) ) + +// Theme switching icons +const moonSVG = '' +const sunSVG = '' + +// Theme toggling logic +const toggleBtn = createElement('button', { + innerHTML: sunSVG, + ariaLabel: 'Switch theme', + style: ` + position: fixed; + top: 50px; + right: 50px; + margin: 0; + padding: 10px; + line-height: 1; + ` +}) + +let theme = 'light' +const updateTheme = () => { + if (theme === 'dark') { + toggleBtn.innerHTML = moonSVG + linkElm.href = 'https://cdn.jsdelivr.net/npm/water.css@2/out/dark.min.css' + } else { + toggleBtn.innerHTML = sunSVG + linkElm.href = 'https://cdn.jsdelivr.net/npm/water.css@2/out/light.min.css' + } +} + +toggleBtn.addEventListener('click', () => { + theme = theme === 'dark' ? 'light' : 'dark' + localStorage.setItem('water.css-theme', theme) + updateTheme() +}) +document.body.append(toggleBtn) + +const saved = localStorage.getItem('water.css-theme') +if (saved) { + theme = saved + updateTheme() +} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) { + theme = 'dark' + updateTheme() +} else if (window.matchMedia('(prefers-color-scheme: light)').matches) { + theme = 'light' + updateTheme() +} diff --git a/docs/index.html b/docs/index.html index d6ffd9d..8c9d4e2 100644 --- a/docs/index.html +++ b/docs/index.html @@ -189,7 +189,7 @@ The Waterize bookmarklet can be used to make ugly websites more readable by replacing the styles with Water.css. Just drag this link to your bookmarks bar:

- + Waterize @@ -198,7 +198,7 @@

This is supposed to be a demo page so we need more elements!

Form elements

-
+ @@ -358,7 +358,6 @@ - diff --git a/gulpfile.js b/gulpfile.js index 569b8c7..c612818 100644 --- a/gulpfile.js +++ b/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,8 +54,7 @@ const style = () => { return ( gulp .src(paths.styles.src) - .pipe(sourcemaps.init()) - .pipe(postcss([postcssImport(), postcssColorModFunction(), postcssInlineSvg()])) + .pipe(postcss([postcssImport(), postcssInlineSvg()])) .pipe(startDiff()) .pipe(postcss([postcssCssVariables({ preserve: true })])) @@ -69,12 +64,9 @@ const style = () => { .pipe(postcss([autoprefixer()])) .pipe(endDiff('autoprefixer')) - .pipe(sourcemaps.write('.')) .pipe(flatten()) // Put files in out/*, not out/builds/* .pipe(gulp.dest(paths.styles.dest)) - .pipe(filter('**/*.css')) // Remove sourcemaps from the pipeline - // .pipe(startDiff()) .pipe(postcss([cssnano({ preset: ['default', { svgo: { floatPrecision: 0 } }] })])) @@ -82,11 +74,9 @@ const style = () => { .pipe(rename({ suffix: '.min' })) // - .pipe(sourcemaps.write('.')) .pipe(gulp.dest(paths.styles.dest)) .pipe(gulp.dest(paths.docs.dest + '/water.css')) - .pipe(filter('**/*.css')) // Remove sourcemaps from the pipeline .pipe(sizereport({ gzip: true, total: false, title: 'SIZE REPORT' })) .pipe(browserSync.stream()) ) diff --git a/package.json b/package.json index 3c883e8..6c6018b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "water.css", - "version": "2.0.0", + "version": "2.1.1", "description": "A drop-in collection of CSS styles to make simple websites just a little nicer", "main": "out/water.css", "scripts": { @@ -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", diff --git a/src/parts/_base.css b/src/parts/_base.css index 336e749..1abfc5f 100644 --- a/src/parts/_base.css +++ b/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, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif; line-height: 1.4; diff --git a/src/parts/_code.css b/src/parts/_code.css index 20ebd62..4a3470b 100644 --- a/src/parts/_code.css +++ b/src/parts/_code.css @@ -8,9 +8,10 @@ time { font-size: 1em; } +pre, code, samp, -pre, +kbd, var { font-family: ui-monospace, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace; } diff --git a/src/parts/_forms.css b/src/parts/_forms.css index 00584ac..be71b3d 100644 --- a/src/parts/_forms.css +++ b/src/parts/_forms.css @@ -9,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, @@ -30,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; @@ -61,7 +82,7 @@ input[type='range'], select, button, textarea { - -webkit-appearance: none; + appearance: none; } textarea { @@ -95,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/parts/_misc.css b/src/parts/_misc.css index 04d9a02..25e09b8 100644 --- a/src/parts/_misc.css +++ b/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 { diff --git a/src/parts/_range.css b/src/parts/_range.css index 9a903fa..6dc0e27 100644 --- a/src/parts/_range.css +++ b/src/parts/_range.css @@ -22,7 +22,7 @@ input[type='range']::-webkit-slider-thumb { width: 20px; border-radius: 50%; background: var(--border); - -webkit-appearance: none; + appearance: none; margin-top: -7px; } diff --git a/src/parts/_typography.css b/src/parts/_typography.css index a4a16d4..2d275b7 100644 --- a/src/parts/_typography.css +++ b/src/parts/_typography.css @@ -82,3 +82,8 @@ mark { padding: 0 2px 0 2px; color: #000; } + +a > code, +a > strong { + color: inherit; +} diff --git a/src/variables-dark.css b/src/variables-dark.css index c43ac79..4f82b6d 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: #3b4d5c; --form-placeholder: #a9a9a9; --form-text: #fff; --variable: #d941e2; diff --git a/src/variables-light.css b/src/variables-light.css index 74069c3..3c8a122 100755 --- a/src/variables-light.css +++ b/src/variables-light.css @@ -11,11 +11,12 @@ --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: #aaa; + --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); diff --git a/yarn.lock b/yarn.lock index 18e1c7f..e845b5c 100644 --- a/yarn.lock +++ b/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"