From eac795d1d8d4d1a92f9bc0749cee776f9265f3d8 Mon Sep 17 00:00:00 2001 From: Himanshu Pandey Date: Sat, 10 Oct 2020 10:19:27 +0530 Subject: [PATCH 01/28] 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 02/28] 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 03/28] 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 6193a5a2f0b7d3b50beff555a65f6364da174650 Mon Sep 17 00:00:00 2001 From: Thai Pangsakulyanont Date: Sun, 20 Dec 2020 11:48:54 +0000 Subject: [PATCH 04/28] Fix color of code and strong tags inside links --- src/parts/_typography.css | 5 +++++ 1 file changed, 5 insertions(+) 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; +} From 881022a5a7a6f66f895322dd2f1053b6014428ac Mon Sep 17 00:00:00 2001 From: Thai Pangsakulyanont Date: Sun, 20 Dec 2020 18:57:17 +0700 Subject: [PATCH 05/28] Add a changeset for #238 --- .changeset/tiny-ravens-decide.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/tiny-ravens-decide.md diff --git a/.changeset/tiny-ravens-decide.md b/.changeset/tiny-ravens-decide.md new file mode 100644 index 0000000..8ac1069 --- /dev/null +++ b/.changeset/tiny-ravens-decide.md @@ -0,0 +1,5 @@ +--- +"water.css": patch +--- + +Fix color of `` and `` tags inside links From aa70f707d9f4dabb2cd74f43307b611b9d5c05fd Mon Sep 17 00:00:00 2001 From: Svante Richter Date: Sun, 28 Mar 2021 17:13:32 +0200 Subject: [PATCH 06/28] Remove sourcemap references from built files --- gulpfile.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index 569b8c7..34ee92e 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -58,7 +58,6 @@ const style = () => { return ( gulp .src(paths.styles.src) - .pipe(sourcemaps.init()) .pipe(postcss([postcssImport(), postcssColorModFunction(), postcssInlineSvg()])) .pipe(startDiff()) @@ -69,12 +68,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 +78,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()) ) From 42cc5ba32d4a6993eb3b888dcc08590d9a9a2c47 Mon Sep 17 00:00:00 2001 From: Eyal Azulay Date: Mon, 14 Jun 2021 12:11:53 +0100 Subject: [PATCH 07/28] Reduce input selector specificity for display property to prevent overriding user's css. Fixes #78 and #82 --- src/parts/_forms.css | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/parts/_forms.css b/src/parts/_forms.css index 00584ac..2663efc 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, From c23d65c22236ba86a77ed1d1328e4b823c7453b6 Mon Sep 17 00:00:00 2001 From: Eyal Azulay Date: Sat, 19 Jun 2021 18:02:40 +0100 Subject: [PATCH 08/28] Add files via upload --- .changeset/large-days-judge.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/large-days-judge.md diff --git a/.changeset/large-days-judge.md b/.changeset/large-days-judge.md new file mode 100644 index 0000000..a32e066 --- /dev/null +++ b/.changeset/large-days-judge.md @@ -0,0 +1,5 @@ +--- +"water.css": patch +--- + +Reduce input selector specificity for display property to prevent overriding user's css. Fixes #78 and #82 From 21e1e5d95e7bed12bbe28c68f8d5c18c54ffa0df Mon Sep 17 00:00:00 2001 From: Kognise Date: Wed, 11 Aug 2021 13:11:01 -0400 Subject: [PATCH 09/28] Create itchy-hairs-beg.md --- .changeset/itchy-hairs-beg.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/itchy-hairs-beg.md diff --git a/.changeset/itchy-hairs-beg.md b/.changeset/itchy-hairs-beg.md new file mode 100644 index 0000000..3f96d6f --- /dev/null +++ b/.changeset/itchy-hairs-beg.md @@ -0,0 +1,5 @@ +--- +"water.css": patch +--- + +Remove sourcemap references from built files From 5f66486244c086a188d41b13b014db70c75932f2 Mon Sep 17 00:00:00 2001 From: Kognise Date: Wed, 11 Aug 2021 14:39:22 -0400 Subject: [PATCH 10/28] 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 11/28] 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 From 9d11a0ad6d70b7a1d79a8ec7bf48551a081ccfff Mon Sep 17 00:00:00 2001 From: Kognise Date: Wed, 11 Aug 2021 14:58:29 -0400 Subject: [PATCH 12/28] 2.1.0 --- .changeset/fluffy-dingos-beam.md | 5 ----- .changeset/itchy-hairs-beg.md | 5 ----- .changeset/large-days-judge.md | 5 ----- .changeset/nine-scissors-live.md | 5 ----- .changeset/real-bananas-beam.md | 5 ----- .changeset/rude-pots-sort.md | 5 ----- .changeset/thirty-buckets-invent.md | 5 ----- .changeset/tiny-ravens-decide.md | 5 ----- CHANGELOG.md | 31 ++++++++++++++++++++++------- package.json | 2 +- 10 files changed, 25 insertions(+), 48 deletions(-) delete mode 100644 .changeset/fluffy-dingos-beam.md delete mode 100644 .changeset/itchy-hairs-beg.md delete mode 100644 .changeset/large-days-judge.md delete mode 100644 .changeset/nine-scissors-live.md delete mode 100644 .changeset/real-bananas-beam.md delete mode 100644 .changeset/rude-pots-sort.md delete mode 100644 .changeset/thirty-buckets-invent.md delete mode 100644 .changeset/tiny-ravens-decide.md 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/itchy-hairs-beg.md b/.changeset/itchy-hairs-beg.md deleted file mode 100644 index 3f96d6f..0000000 --- a/.changeset/itchy-hairs-beg.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"water.css": patch ---- - -Remove sourcemap references from built files diff --git a/.changeset/large-days-judge.md b/.changeset/large-days-judge.md deleted file mode 100644 index a32e066..0000000 --- a/.changeset/large-days-judge.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"water.css": patch ---- - -Reduce input selector specificity for display property to prevent overriding user's css. Fixes #78 and #82 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/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/rude-pots-sort.md b/.changeset/rude-pots-sort.md deleted file mode 100644 index 6ce3df0..0000000 --- a/.changeset/rude-pots-sort.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"water.css": patch ---- - -Update button colors for better contrast, especially in tables \ No newline at end of file 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/.changeset/tiny-ravens-decide.md b/.changeset/tiny-ravens-decide.md deleted file mode 100644 index 8ac1069..0000000 --- a/.changeset/tiny-ravens-decide.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"water.css": patch ---- - -Fix color of `` and `` tags inside links 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/package.json b/package.json index 3c883e8..4c4e5b0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "water.css", - "version": "2.0.0", + "version": "2.1.0", "description": "A drop-in collection of CSS styles to make simple websites just a little nicer", "main": "out/water.css", "scripts": { From 6b3e33d1560bc37910bdee491606e286aa6cb4ec Mon Sep 17 00:00:00 2001 From: Kognise Date: Wed, 11 Aug 2021 15:01:26 -0400 Subject: [PATCH 13/28] v2.1.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 4c4e5b0..7704812 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "water.css", - "version": "2.1.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": { From 10d49f02fb2267b43f97788a4e74934a7b2b2aff Mon Sep 17 00:00:00 2001 From: HarshitJoshi9152 Date: Fri, 20 Aug 2021 19:53:23 +0530 Subject: [PATCH 14/28] added basic functionality for theme switch button --- bookmarklet/original.js | 78 +++++++++++++++++++++++++++++++++++++++++ docs/index.html | 3 +- src/variables-light.css | 2 +- 3 files changed, 80 insertions(+), 3 deletions(-) diff --git a/bookmarklet/original.js b/bookmarklet/original.js index 99a5f0f..741bdd8 100644 --- a/bookmarklet/original.js +++ b/bookmarklet/original.js @@ -21,3 +21,81 @@ document.head.append( content: 'width=device-width,initial-scale=1.0' }) ) + +const toggleTheme = () => { + const rootElm = document.querySelector(':root') + // var rs = getComputedStyle(rootElm); + const theme = rootElm.getAttribute('theme') + + if (theme === 'dark') { + rootElm.setAttribute('theme', 'light') + } else { + rootElm.setAttribute('theme', 'dark') + } +} + +// css required to support theme switching ! +const themeCSS = `/* * light theme colors */ +:root[theme="light"] { +--background-body: #fff; +--background: #efefef; +--background-alt: #f7f7f7; +--selection: #9e9e9e; +--text-main: #363636; +--text-bright: #000; +--text-muted: #70777f; +--links: #0076d1; +--focus: rgba(0, 150, 191, 0.67); +--border: #dbdbdb; +--code: #000; +--animation-duration: 0.1s; +--button-hover: #ddd; +--scrollbar-thumb: #d5d5d5; +--scrollbar-thumb-hover: #c4c4c4; +--form-placeholder: #949494; +--form-text: #000; +--variable: #39a33c; +--highlight: #ff0; +--select-arrow: url( + data:image/svg + xml;charset=utf-8, + %3Csvgxmlns="http://www.w3.org/2000/svg"height="63"width="117"fill="%23161f27"%3E%3Cpathd="M115 2c-1-2-4-2-5 0L59 53 7 2a4 4 0 00-5 5l54 54 2 2 3-2 54-54c2-1 2-4 0-5z"/%3E%3C/svg%3E +); +} + +/* * dark theme colors! */ +:root[theme="dark"] { +--background-body: #202b38; +--background: #161f27; +--background-alt: #1a242f; +--selection: #1c76c5; +--text-main: #dbdbdb; +--text-bright: #fff; +--text-muted: #a9b1ba; +--links: #41adff; +--focus: rgba(0, 150, 191, 0.67); +--border: #526980; +--code: #ffbe85; +--animation-duration: 0.1s; +--button-hover: #324759; +--scrollbar-thumb: var(--button-hover); +--scrollbar-thumb-hover: #415c73; +--form-placeholder: #a9a9a9; +--form-text: #fff; +--variable: #d941e2; +--highlight: #efdb43; +--select-arrow: url( + data:image/svg + xml;charset=utf-8, + %3Csvgxmlns="http://www.w3.org/2000/svg"height="63"width="117"fill="%23efefef"%3E%3Cpathd="M115 2c-1-2-4-2-5 0L59 53 7 2a4 4 0 00-5 5l54 54 2 2 3-2 54-54c2-1 2-4 0-5z"/%3E%3C/svg%3E +); +}` + +document.body.append( + createElement('style', { + innerText: themeCSS + }), + createElement('button', { + innerText: 'toggle theme !', + style: 'position: fixed !important; top: 50px !important; right: 100px', + onclick: toggleTheme + }) +) diff --git a/docs/index.html b/docs/index.html index d6ffd9d..68fb820 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 @@ -358,7 +358,6 @@ - diff --git a/src/variables-light.css b/src/variables-light.css index 222f26a..1d602e8 100755 --- a/src/variables-light.css +++ b/src/variables-light.css @@ -20,4 +20,4 @@ --variable: #39a33c; --highlight: #ff0; --select-arrow: svg-load('./assets/select-arrow.svg', fill: #161f27); -} \ No newline at end of file +} From 0859ec67e67bd0a7aed296174c7f098ce6fa0364 Mon Sep 17 00:00:00 2001 From: HarshitJoshi9152 Date: Sat, 21 Aug 2021 01:13:25 +0530 Subject: [PATCH 15/28] added icons & fix ! --- bookmarklet/original.js | 42 ++++++++++++++++++++++++----------------- docs/index.html | 2 +- 2 files changed, 26 insertions(+), 18 deletions(-) diff --git a/bookmarklet/original.js b/bookmarklet/original.js index 741bdd8..d28b719 100644 --- a/bookmarklet/original.js +++ b/bookmarklet/original.js @@ -22,18 +22,6 @@ document.head.append( }) ) -const toggleTheme = () => { - const rootElm = document.querySelector(':root') - // var rs = getComputedStyle(rootElm); - const theme = rootElm.getAttribute('theme') - - if (theme === 'dark') { - rootElm.setAttribute('theme', 'light') - } else { - rootElm.setAttribute('theme', 'dark') - } -} - // css required to support theme switching ! const themeCSS = `/* * light theme colors */ :root[theme="light"] { @@ -92,10 +80,30 @@ const themeCSS = `/* * light theme colors */ document.body.append( createElement('style', { innerText: themeCSS - }), - createElement('button', { - innerText: 'toggle theme !', - style: 'position: fixed !important; top: 50px !important; right: 100px', - onclick: toggleTheme }) ) + +const moonSVG = '' +const sunSVG = '' + +const toggleBtn = createElement('div', { + innerHTML: sunSVG, + style: 'position: fixed !important; top: 50px !important; right: 100px; cursor: pointer;' +}) + +const toggleTheme = () => { + const rootElm = document.querySelector(':root') + const theme = rootElm.getAttribute('theme') + + if (theme === 'light' || theme === null) { + rootElm.setAttribute('theme', 'dark') + toggleBtn.innerHTML = moonSVG + } else { + rootElm.setAttribute('theme', 'light') + toggleBtn.innerHTML = sunSVG + } +} + +toggleBtn.onclick = toggleTheme + +document.body.append(toggleBtn) diff --git a/docs/index.html b/docs/index.html index 68fb820..c123390 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 From 506e106b55ce596a2fd22954fe5cba60997d4eb0 Mon Sep 17 00:00:00 2001 From: HarshitJoshi9152 Date: Sat, 21 Aug 2021 10:47:42 +0530 Subject: [PATCH 16/28] using dark/light stylesheets --- bookmarklet/original.js | 83 +++++++---------------------------------- docs/index.html | 2 +- 2 files changed, 14 insertions(+), 71 deletions(-) diff --git a/bookmarklet/original.js b/bookmarklet/original.js index d28b719..f9613b0 100644 --- a/bookmarklet/original.js +++ b/bookmarklet/original.js @@ -10,79 +10,21 @@ $$('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/water.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' }) ) -// css required to support theme switching ! -const themeCSS = `/* * light theme colors */ -:root[theme="light"] { ---background-body: #fff; ---background: #efefef; ---background-alt: #f7f7f7; ---selection: #9e9e9e; ---text-main: #363636; ---text-bright: #000; ---text-muted: #70777f; ---links: #0076d1; ---focus: rgba(0, 150, 191, 0.67); ---border: #dbdbdb; ---code: #000; ---animation-duration: 0.1s; ---button-hover: #ddd; ---scrollbar-thumb: #d5d5d5; ---scrollbar-thumb-hover: #c4c4c4; ---form-placeholder: #949494; ---form-text: #000; ---variable: #39a33c; ---highlight: #ff0; ---select-arrow: url( - data:image/svg + xml;charset=utf-8, - %3Csvgxmlns="http://www.w3.org/2000/svg"height="63"width="117"fill="%23161f27"%3E%3Cpathd="M115 2c-1-2-4-2-5 0L59 53 7 2a4 4 0 00-5 5l54 54 2 2 3-2 54-54c2-1 2-4 0-5z"/%3E%3C/svg%3E -); -} - -/* * dark theme colors! */ -:root[theme="dark"] { ---background-body: #202b38; ---background: #161f27; ---background-alt: #1a242f; ---selection: #1c76c5; ---text-main: #dbdbdb; ---text-bright: #fff; ---text-muted: #a9b1ba; ---links: #41adff; ---focus: rgba(0, 150, 191, 0.67); ---border: #526980; ---code: #ffbe85; ---animation-duration: 0.1s; ---button-hover: #324759; ---scrollbar-thumb: var(--button-hover); ---scrollbar-thumb-hover: #415c73; ---form-placeholder: #a9a9a9; ---form-text: #fff; ---variable: #d941e2; ---highlight: #efdb43; ---select-arrow: url( - data:image/svg + xml;charset=utf-8, - %3Csvgxmlns="http://www.w3.org/2000/svg"height="63"width="117"fill="%23efefef"%3E%3Cpathd="M115 2c-1-2-4-2-5 0L59 53 7 2a4 4 0 00-5 5l54 54 2 2 3-2 54-54c2-1 2-4 0-5z"/%3E%3C/svg%3E -); -}` - -document.body.append( - createElement('style', { - innerText: themeCSS - }) -) - +// theme switching logic const moonSVG = '' const sunSVG = '' @@ -91,15 +33,16 @@ const toggleBtn = createElement('div', { style: 'position: fixed !important; top: 50px !important; right: 100px; cursor: pointer;' }) -const toggleTheme = () => { - const rootElm = document.querySelector(':root') - const theme = rootElm.getAttribute('theme') +let theme = 'light' +const toggleTheme = () => { if (theme === 'light' || theme === null) { - rootElm.setAttribute('theme', 'dark') + theme = 'dark' toggleBtn.innerHTML = moonSVG + linkElm.href = 'https://cdn.jsdelivr.net/npm/water.css@2/out/dark.css' } else { - rootElm.setAttribute('theme', 'light') + theme = 'light' + linkElm.href = 'https://cdn.jsdelivr.net/npm/water.css@2/out/water.css' toggleBtn.innerHTML = sunSVG } } diff --git a/docs/index.html b/docs/index.html index c123390..b4d2580 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 From b850c3072dd3636787623c1b0a46de92fc635e86 Mon Sep 17 00:00:00 2001 From: Kognise Date: Sat, 21 Aug 2021 11:15:11 -0400 Subject: [PATCH 17/28] Bookmarklet cleanups --- bookmarklet/original.js | 25 ++++++++++++++++--------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/bookmarklet/original.js b/bookmarklet/original.js index f9613b0..08899c5 100644 --- a/bookmarklet/original.js +++ b/bookmarklet/original.js @@ -12,7 +12,7 @@ $$('*').forEach((el) => (el.style = '')) const linkElm = createElement('link', { rel: 'stylesheet', - href: 'https://cdn.jsdelivr.net/npm/water.css@2/out/water.css' + href: 'https://cdn.jsdelivr.net/npm/water.css@2/out/light.css' }) // Add water.css and responsive viewport (if necessary) @@ -24,29 +24,36 @@ document.head.append( }) ) -// theme switching logic +// Theme switching icons const moonSVG = '' const sunSVG = '' -const toggleBtn = createElement('div', { +// Theme toggling logic +const toggleBtn = createElement('button', { innerHTML: sunSVG, - style: 'position: fixed !important; top: 50px !important; right: 100px; cursor: pointer;' + ariaLabel: 'Switch theme', + style: ` + position: fixed; + top: 50px; + right: 50px; + margin: 0; + padding: 10px; + line-height: 1; + ` }) let theme = 'light' - const toggleTheme = () => { - if (theme === 'light' || theme === null) { + if (theme === 'light') { theme = 'dark' toggleBtn.innerHTML = moonSVG linkElm.href = 'https://cdn.jsdelivr.net/npm/water.css@2/out/dark.css' } else { theme = 'light' - linkElm.href = 'https://cdn.jsdelivr.net/npm/water.css@2/out/water.css' + linkElm.href = 'https://cdn.jsdelivr.net/npm/water.css@2/out/light.css' toggleBtn.innerHTML = sunSVG } } -toggleBtn.onclick = toggleTheme - +toggleBtn.addEventListener('click', toggleTheme) document.body.append(toggleBtn) From 002df477cd65bd32d0109a76669e6ce7dd0b2c7c Mon Sep 17 00:00:00 2001 From: Kognise Date: Sat, 21 Aug 2021 11:17:15 -0400 Subject: [PATCH 18/28] Update bookmarklet in HTML --- docs/index.html | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/index.html b/docs/index.html index b4d2580..f8e18a4 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 @@ -305,7 +305,9 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum hendrerit velit, quis ullamcorper sem congue ac. Quisque id magna rhoncus, sodales massa vel, vestibulum elit. Duis ornare accumsan egestas. Proin maximus lacus interdum leo molestie convallis. Orci varius - natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut iaculis risus eu + natoque penatibus et magnis dis parturient montes, nascjavascript:(function()%7Bconst%20%24%24%20%3D%20(selector)%20%3D%3E%20document.querySelectorAll(selector)%0Aconst%20createElement%20%3D%20(tagName%2C%20properties)%20%3D%3E%20Object.assign(document.createElement(tagName)%2C%20properties)%0A%0A%24%24('link%5Brel%3D%22stylesheet%22%5D%2Cstyle').forEach((el)%20%3D%3E%20el.remove())%0A%0A%24%24('*').forEach((el)%20%3D%3E%20(el.style%20%3D%20''))%0A%0Aconst%20linkElm%20%3D%20createElement('link'%2C%20%7B%0A%20%20rel%3A%20'stylesheet'%2C%0A%20%20href%3A%20'https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fwater.css%402%2Fout%2Fwater.css'%0A%7D)%0A%0Adocument.head.append(%0A%20%20linkElm%2C%0A%20%20!%24%24('meta%5Bname%3D%22viewport%22%5D').length%20%26%26%20createElement('meta'%2C%20%7B%0A%20%20%20%20name%3A%20'viewport'%2C%0A%20%20%20%20content%3A%20'width%3Ddevice-width%2Cinitial-scale%3D1.0'%0A%20%20%7D)%0A)%0A%0Aconst%20moonSVG%20%3D%20'%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22feather%20feather-moon%22%3E%3Cpath%20d%3D%22M21%2012.79A9%209%200%201%201%2011.21%203%207%207%200%200%200%2021%2012.79z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E'%0Aconst%20sunSVG%20%3D%20'%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22feather%20feather-sun%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%225%22%3E%3C%2Fcircle%3E%3Cline%20x1%3D%2212%22%20y1%3D%221%22%20x2%3D%2212%22%20y2%3D%223%22%3E%3C%2Fline%3E%3Cline%20x1%3D%2212%22%20y1%3D%2221%22%20x2%3D%2212%22%20y2%3D%2223%22%3E%3C%2Fline%3E%3Cline%20x1%3D%224.22%22%20y1%3D%224.22%22%20x2%3D%225.64%22%20y2%3D%225.64%22%3E%3C%2Fline%3E%3Cline%20x1%3D%2218.36%22%20y1%3D%2218.36%22%20x2%3D%2219.78%22%20y2%3D%2219.78%22%3E%3C%2Fline%3E%3Cline%20x1%3D%221%22%20y1%3D%2212%22%20x2%3D%223%22%20y2%3D%2212%22%3E%3C%2Fline%3E%3Cline%20x1%3D%2221%22%20y1%3D%2212%22%20x2%3D%2223%22%20y2%3D%2212%22%3E%3C%2Fline%3E%3Cline%20x1%3D%224.22%22%20y1%3D%2219.78%22%20x2%3D%225.64%22%20y2%3D%2218.36%22%3E%3C%2Fline%3E%3Cline%20x1%3D%2218.36%22%20y1%3D%225.64%22%20x2%3D%2219.78%22%20y2%3D%224.22%22%3E%3C%2Fline%3E%3C%2Fsvg%3E'%0A%0Aconst%20toggleBtn%20%3D%20createElement('div'%2C%20%7B%0A%20%20innerHTML%3A%20sunSVG%2C%0A%20%20style%3A%20'position%3A%20fixed%20!important%3B%20top%3A%2050px%20!important%3B%20right%3A%20100px%3B%20cursor%3A%20pointer%3B'%0A%7D)%0A%0Alet%20theme%20%3D%20'light'%0A%0Aconst%20toggleTheme%20%3D%20()%20%3D%3E%20%7B%0A%20%20if%20(theme%20%3D%3D%3D%20'light'%20%7C%7C%20theme%20%3D%3D%3D%20null)%20%7B%0A%20%20%20%20theme%20%3D%20'dark'%0A%20%20%20%20toggleBtn.innerHTML%20%3D%20moonSVG%0A%20%20%20%20linkElm.href%20%3D%20'https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fwater.css%402%2Fout%2Fdark.css'%3B%0A%20%20%7D%20else%20%7B%0A%20%20%20%20theme%20%3D%20'light'%0A%20%20%20%20linkElm.href%20%3D%20'https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fwater.css%402%2Fout%2Fwater.css'%3B%0A%20%20%20%20toggleBtn.innerHTML%20%3D%20sunSVG%0A%20%20%7D%0A%7D%0A%0AtoggleBtn.onclick%20%3D%20toggleTheme%0A%0Adocument.body.append(toggleBtn)%7D)()%3B"> +193 + etur ridiculus mus. Ut iaculis risus eu felis feugiat, eu mollis neque elementum. Donec interdum, nisl id dignissim iaculis, felis dui aliquet dui, non fermentum velit lectus ac quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. From 21f50a889f905fcd9cd8cfb949f7d1809ee14eb0 Mon Sep 17 00:00:00 2001 From: Kognise Date: Sat, 21 Aug 2021 11:17:49 -0400 Subject: [PATCH 19/28] Create six-owls-punch.md --- .changeset/six-owls-punch.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/six-owls-punch.md 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 From d950cbc9f8607521587fae1aa523f85e25f8396f Mon Sep 17 00:00:00 2001 From: Kognise Date: Mon, 23 Aug 2021 11:51:21 -0400 Subject: [PATCH 20/28] Fix broken HTML --- docs/index.html | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/docs/index.html b/docs/index.html index f8e18a4..d9ec359 100644 --- a/docs/index.html +++ b/docs/index.html @@ -305,9 +305,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum hendrerit velit, quis ullamcorper sem congue ac. Quisque id magna rhoncus, sodales massa vel, vestibulum elit. Duis ornare accumsan egestas. Proin maximus lacus interdum leo molestie convallis. Orci varius - natoque penatibus et magnis dis parturient montes, nascjavascript:(function()%7Bconst%20%24%24%20%3D%20(selector)%20%3D%3E%20document.querySelectorAll(selector)%0Aconst%20createElement%20%3D%20(tagName%2C%20properties)%20%3D%3E%20Object.assign(document.createElement(tagName)%2C%20properties)%0A%0A%24%24('link%5Brel%3D%22stylesheet%22%5D%2Cstyle').forEach((el)%20%3D%3E%20el.remove())%0A%0A%24%24('*').forEach((el)%20%3D%3E%20(el.style%20%3D%20''))%0A%0Aconst%20linkElm%20%3D%20createElement('link'%2C%20%7B%0A%20%20rel%3A%20'stylesheet'%2C%0A%20%20href%3A%20'https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fwater.css%402%2Fout%2Fwater.css'%0A%7D)%0A%0Adocument.head.append(%0A%20%20linkElm%2C%0A%20%20!%24%24('meta%5Bname%3D%22viewport%22%5D').length%20%26%26%20createElement('meta'%2C%20%7B%0A%20%20%20%20name%3A%20'viewport'%2C%0A%20%20%20%20content%3A%20'width%3Ddevice-width%2Cinitial-scale%3D1.0'%0A%20%20%7D)%0A)%0A%0Aconst%20moonSVG%20%3D%20'%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22feather%20feather-moon%22%3E%3Cpath%20d%3D%22M21%2012.79A9%209%200%201%201%2011.21%203%207%207%200%200%200%2021%2012.79z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E'%0Aconst%20sunSVG%20%3D%20'%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22feather%20feather-sun%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%225%22%3E%3C%2Fcircle%3E%3Cline%20x1%3D%2212%22%20y1%3D%221%22%20x2%3D%2212%22%20y2%3D%223%22%3E%3C%2Fline%3E%3Cline%20x1%3D%2212%22%20y1%3D%2221%22%20x2%3D%2212%22%20y2%3D%2223%22%3E%3C%2Fline%3E%3Cline%20x1%3D%224.22%22%20y1%3D%224.22%22%20x2%3D%225.64%22%20y2%3D%225.64%22%3E%3C%2Fline%3E%3Cline%20x1%3D%2218.36%22%20y1%3D%2218.36%22%20x2%3D%2219.78%22%20y2%3D%2219.78%22%3E%3C%2Fline%3E%3Cline%20x1%3D%221%22%20y1%3D%2212%22%20x2%3D%223%22%20y2%3D%2212%22%3E%3C%2Fline%3E%3Cline%20x1%3D%2221%22%20y1%3D%2212%22%20x2%3D%2223%22%20y2%3D%2212%22%3E%3C%2Fline%3E%3Cline%20x1%3D%224.22%22%20y1%3D%2219.78%22%20x2%3D%225.64%22%20y2%3D%2218.36%22%3E%3C%2Fline%3E%3Cline%20x1%3D%2218.36%22%20y1%3D%225.64%22%20x2%3D%2219.78%22%20y2%3D%224.22%22%3E%3C%2Fline%3E%3C%2Fsvg%3E'%0A%0Aconst%20toggleBtn%20%3D%20createElement('div'%2C%20%7B%0A%20%20innerHTML%3A%20sunSVG%2C%0A%20%20style%3A%20'position%3A%20fixed%20!important%3B%20top%3A%2050px%20!important%3B%20right%3A%20100px%3B%20cursor%3A%20pointer%3B'%0A%7D)%0A%0Alet%20theme%20%3D%20'light'%0A%0Aconst%20toggleTheme%20%3D%20()%20%3D%3E%20%7B%0A%20%20if%20(theme%20%3D%3D%3D%20'light'%20%7C%7C%20theme%20%3D%3D%3D%20null)%20%7B%0A%20%20%20%20theme%20%3D%20'dark'%0A%20%20%20%20toggleBtn.innerHTML%20%3D%20moonSVG%0A%20%20%20%20linkElm.href%20%3D%20'https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fwater.css%402%2Fout%2Fdark.css'%3B%0A%20%20%7D%20else%20%7B%0A%20%20%20%20theme%20%3D%20'light'%0A%20%20%20%20linkElm.href%20%3D%20'https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fwater.css%402%2Fout%2Fwater.css'%3B%0A%20%20%20%20toggleBtn.innerHTML%20%3D%20sunSVG%0A%20%20%7D%0A%7D%0A%0AtoggleBtn.onclick%20%3D%20toggleTheme%0A%0Adocument.body.append(toggleBtn)%7D)()%3B"> -193 - etur ridiculus mus. Ut iaculis risus eu + natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut iaculis risus eu felis feugiat, eu mollis neque elementum. Donec interdum, nisl id dignissim iaculis, felis dui aliquet dui, non fermentum velit lectus ac quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. From 61af66828b38e6163a2b7bdecd20079d4bed4b0b Mon Sep 17 00:00:00 2001 From: Tan Zhen Yong Date: Sat, 2 Oct 2021 19:20:32 +0800 Subject: [PATCH 21/28] Add monospace system font stack Let's add a system font stack for monospace fonts to give monospace elements a pleasing default font. This monospace font stack is based on GitHub's Primer design system [1]. [1]: https://github.com/primer/css/blob/main/src/support/variables/typography.scss#L39 --- .changeset/friendly-meals-cheat.md | 5 +++++ src/parts/_code.css | 7 +++++++ 2 files changed, 12 insertions(+) create mode 100644 .changeset/friendly-meals-cheat.md 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/src/parts/_code.css b/src/parts/_code.css index 166fe1d..80262d4 100644 --- a/src/parts/_code.css +++ b/src/parts/_code.css @@ -8,6 +8,13 @@ time { font-size: 1em; } +pre, +code, +samp, +kbd { + font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; +} + pre > code { padding: 10px; display: block; From 9dcec8a3746052cca4516baea7120ba29e446d4d Mon Sep 17 00:00:00 2001 From: Kognise Date: Sat, 2 Oct 2021 19:41:00 -0400 Subject: [PATCH 22/28] Include var and make style more consistent --- src/parts/_code.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/parts/_code.css b/src/parts/_code.css index 80262d4..d0ef166 100644 --- a/src/parts/_code.css +++ b/src/parts/_code.css @@ -11,8 +11,9 @@ time { pre, code, samp, -kbd { - font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; +kbd, +var { + font-family: ui-monospace, 'SFMono-Regular', 'SF Mono', 'Menlo', 'Consolas', 'Liberation Mono', monospace; } pre > code { @@ -24,7 +25,6 @@ pre > code { var { color: var(--variable); font-style: normal; - font-family: monospace; } kbd { From 958e142dd43061c339dd28926f447e7d6a1df223 Mon Sep 17 00:00:00 2001 From: Kognise Date: Sat, 2 Oct 2021 19:58:57 -0400 Subject: [PATCH 23/28] Update CONTRIBUTING.md for development branch --- .github/CONTRIBUTING.md | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) 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 From e9b6b916ec14f6453fb863c730fddb623f06772f Mon Sep 17 00:00:00 2001 From: Kognise Date: Sat, 2 Oct 2021 20:20:06 -0400 Subject: [PATCH 24/28] Save theme in bookmarklet --- bookmarklet/original.js | 30 ++++++++++++++++++++++-------- docs/index.html | 2 +- 2 files changed, 23 insertions(+), 9 deletions(-) diff --git a/bookmarklet/original.js b/bookmarklet/original.js index 08899c5..2589eea 100644 --- a/bookmarklet/original.js +++ b/bookmarklet/original.js @@ -12,7 +12,7 @@ $$('*').forEach((el) => (el.style = '')) const linkElm = createElement('link', { rel: 'stylesheet', - href: 'https://cdn.jsdelivr.net/npm/water.css@2/out/light.css' + href: 'https://cdn.jsdelivr.net/npm/water.css@2/out/light.min.css' }) // Add water.css and responsive viewport (if necessary) @@ -43,17 +43,31 @@ const toggleBtn = createElement('button', { }) let theme = 'light' -const toggleTheme = () => { - if (theme === 'light') { - theme = 'dark' +const updateTheme = () => { + if (theme === 'dark') { toggleBtn.innerHTML = moonSVG - linkElm.href = 'https://cdn.jsdelivr.net/npm/water.css@2/out/dark.css' + linkElm.href = 'https://cdn.jsdelivr.net/npm/water.css@2/out/dark.min.css' } else { - theme = 'light' - linkElm.href = 'https://cdn.jsdelivr.net/npm/water.css@2/out/light.css' toggleBtn.innerHTML = sunSVG + linkElm.href = 'https://cdn.jsdelivr.net/npm/water.css@2/out/light.min.css' } } -toggleBtn.addEventListener('click', toggleTheme) +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 d9ec359..066495e 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 From 88d5a959ed3323bb2968114802f6df7dcc57dc69 Mon Sep 17 00:00:00 2001 From: Kognise Date: Sat, 2 Oct 2021 20:20:41 -0400 Subject: [PATCH 25/28] Add changeset --- .changeset/fuzzy-zoos-wash.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/fuzzy-zoos-wash.md 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 From d4a5412de47edecd13b4fff1de09317dd309f583 Mon Sep 17 00:00:00 2001 From: Adam Rose <10884874+adamerose@users.noreply.github.com> Date: Thu, 20 Jan 2022 16:06:43 -0500 Subject: [PATCH 26/28] 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 --- .changeset/green-humans-bathe.md | 5 +++++ .changeset/metal-mails-help.md | 5 +++++ .changeset/quiet-wombats-press.md | 5 +++++ gulpfile.js | 6 +----- package.json | 1 - src/parts/_base.css | 5 ----- src/parts/_misc.css | 15 ++++++++++----- src/variables-dark.css | 2 +- src/variables-light.css | 2 +- yarn.lock | 28 ---------------------------- 10 files changed, 28 insertions(+), 46 deletions(-) create mode 100644 .changeset/green-humans-bathe.md create mode 100644 .changeset/metal-mails-help.md create mode 100644 .changeset/quiet-wombats-press.md 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/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/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/gulpfile.js b/gulpfile.js index 34ee92e..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,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 })])) diff --git a/package.json b/package.json index 7704812..6c6018b 100644 --- a/package.json +++ b/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", diff --git a/src/parts/_base.css b/src/parts/_base.css index 33e5692..41cc1ee 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, '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; 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/variables-dark.css b/src/variables-dark.css index 3b1b800..4f82b6d 100755 --- a/src/variables-dark.css +++ b/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; diff --git a/src/variables-light.css b/src/variables-light.css index 1d602e8..3c8a122 100755 --- a/src/variables-light.css +++ b/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; 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" From 059b290e2b7b65b283908c5cc60db95f248d58d6 Mon Sep 17 00:00:00 2001 From: Tan Zhen Yong Date: Fri, 21 Jan 2022 05:09:07 +0800 Subject: [PATCH 27/28] Prevent submitting the demo form (#272) * Prevent submitting the demo form When the submit button on the demo form is pressed, the form is actually submitted and the page is refreshed. Let's prevent the form from submitting by adding a dummy onsubmit handler that returns false. * Create hungry-eagles-shout.md Co-authored-by: Kognise --- .changeset/hungry-eagles-shout.md | 5 +++++ docs/index.html | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) create mode 100644 .changeset/hungry-eagles-shout.md 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/docs/index.html b/docs/index.html index 066495e..8c9d4e2 100644 --- a/docs/index.html +++ b/docs/index.html @@ -198,7 +198,7 @@

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

Form elements

-
+ From af68904f6879965eb631ec64daf3cd06f9966e47 Mon Sep 17 00:00:00 2001 From: Tan Zhen Yong Date: Fri, 21 Jan 2022 05:09:33 +0800 Subject: [PATCH 28/28] Unprefix `-webkit-appearance` (#270) `-webkit-appearance` should be unprefixed [1]. Autoprefixer will add in the necessary vendor prefixes on build. [1]: https://developer.mozilla.org/en-US/docs/Web/CSS/appearance --- .changeset/ten-berries-explode.md | 5 +++++ src/parts/_forms.css | 2 +- src/parts/_range.css | 2 +- 3 files changed, 7 insertions(+), 2 deletions(-) create mode 100644 .changeset/ten-berries-explode.md 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/src/parts/_forms.css b/src/parts/_forms.css index 868575c..be71b3d 100644 --- a/src/parts/_forms.css +++ b/src/parts/_forms.css @@ -82,7 +82,7 @@ input[type='range'], select, button, textarea { - -webkit-appearance: none; + appearance: none; } textarea { 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; }