Fix broken HTML

Bookmarklet theme toggle

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/master/docs/common-questions.md)

.changeset/config.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@1.1.0/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "master",
+  "updateInternalDependencies": "patch"
+}

.changeset/six-owls-punch.md

@@ -0,0 +1,5 @@
+---
+"water.css": patch
+---
+
+Added a theme toggle button to the bookmarklet

.editorconfig

@@ -0,0 +1,13 @@
+root = true
+
+[*]
+quote_type = single
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = false
+
+[*.md]
+indent_size = 4

.eslintrc.json

@@ -0,0 +1,37 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "node": true
+  },
+  "extends": [
+    "standard"
+  ],
+  "parserOptions": {
+    "ecmaVersion": 11,
+    "sourceType": "module"
+  },
+  "plugins": [
+    "html",
+    "markdown",
+    "prefer-arrow"
+  ],
+  "overrides": [
+    {
+      "files": [ "**/*.md" ],
+      "processor": "markdown/markdown"
+    }
+  ],
+  "rules": {
+    "prefer-arrow/prefer-arrow-functions": [
+      "error",
+      {
+        "disallowPrototype": true,
+        "singleReturnOnly": false,
+        "classPropertiesAllowed": false
+      }
+    ],
+    "func-style": ["error", "expression"],
+    "arrow-parens": ["error", "always"]
+  }
+}

.github/CODE_OF_CONDUCT.md

@@ -0,0 +1,76 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, sex characteristics, gender identity and expression,
+level of experience, education, socio-economic status, nationality, personal
+appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+ advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+ address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+ professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at hi@kognise.dev. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see
+https://www.contributor-covenant.org/faq

.github/CONTRIBUTING.md

@@ -0,0 +1,169 @@
+# Contributing to Water.css
+
+Water.css becomes better for everyone when people like you help make it better!
+
+Have any questions or concerns? Did I forget an element or selector? Does something look ugly? Feel free to submit an issue or pull request.
+
+Before contributing, please read the [code of conduct](CODE_OF_CONDUCT.md). Also, you agree that your contributions will be licensed under this project's [MIT License](../LICENSE.md).
+
+## Overview
+
+Please take a moment to read through the following guidelines:
+
+- [Get started](#get-started)
+- [Find issues to work on](#find-issues-to-work-on)
+- [Add or change styles](#add-or-change-styles)
+- [Create your pull request](#create-your-pull-request)
+- [Project structure](#project-structure)
+
+<br>
+
+> **Quickstart**:
+> 1. `yarn install` – install dependencies
+> 2. `yarn dev` – start the dev server, make your changes
+> 3. `yarn validate` – make sure your changes pass all tests
+> 4. `yarn changeset` – describe your changes for the changelog
+
+<br>
+
+## Get started
+
+1. Get a copy of the repository. It is recommended to [fork](https://github.com/kognise/water.css/fork) it first and clone to your machine using `git`.
+
+2. Make sure that you have [yarn installed](https://classic.yarnpkg.com/en/docs/install/), then install dependencies by running:
+
+    ```
+    yarn install
+    ```
+
+3. Start the development server with live reload:
+
+    ```
+    yarn dev
+    ```
+
+4. Now you can visit [localhost:3000](http://localhost:3000) and start playing around with the framework – when you make changes to Water.css, the site will reload automatically so you can see what changed.
+
+*Note:* A script that builds distribution ready files is also available but it is not the part of development workflow. It is designed to be triggered automatically while publishing a new version of Water.css, but if you want to inspect the minified assets meant for production, you can run it manually: `yarn build`
+
+> Alternatively, you can develop in Repl.it, a supercool in-browser IDE! Just click this button: [![Run on Repl.it](https://repl.it/badge/github/kognise/water.css)](https://repl.it/github/kognise/water.css)
+
+## Find issues to work on
+
+If you are new to contributing open-source software, you can start by picking any relevant issue that is [tagged with **`good first issue`**](
+https://github.com/kognise/water.css/contribute).
+
+Also, everyone is welcome to contribute on issues [tagged with **`help wanted`**, you can find it filtered here](https://github.com/kognise/water.css/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22).
+
+## Add or change styles
+
+There are a few rules for working in the Water.css source code:
+
+1. The styles must not use any classes or IDs. Water.css is made entirely of basic style rules that only target HTML elements.
+
+2. Don't specify colors directly in the source files (`src/parts/*`). Only use named variables there, which are declared in `src/variables-*.css`.
+
+  ❌ Bad:
+  ```css
+  color: #fff;
+  ```
+
+  ✔ Good:
+  ```css
+  color: var(--text-bright);
+  ```
+
+3. Reuse existing colors where possible. Before introducing a new color to our palette, check if one of the existing colors fits your needs.
+
+4. If you introduce a new variable, make sure to declare it both in `variables-dark.css` and `variables-light.css` so it's available in both themes. Also, add the new variable to the list of variables available for theming in the [README](../README.md#theming).
+
+## Create your pull request
+
+Once you're happy with your changes, you need to **commit** them, create a **changelog** and **submit a pull request**.
+
+A few general rules of thumb about what makes a good pull request:
+
+- Make sure that your pull request covers a small and well defined scope
+- Make small commits with clear and explainful messages
+- Provide a clear description about your contribution on GitHub
+
+### Commit
+
+When you commit code, Water.css will run some checks to make sure that your changes have no errors and match the project's coding style – a process called [**Linting**](https://www.freecodecamp.org/news/what-is-linting-and-how-can-it-save-you-time). It will also verify that all **colors are accessible**, which means they need to have enough contrast to be easily readable.
+
+If the code you introduced has errors or some of the colors aren't accessible, you'll see an error and the commit will abort.
+You can check whether your changes pass all tests before committing them by running:
+
+```
+yarn validate
+```
+
+If there are errors, you can try to fix them automatically by running:
+
+```
+yarn lint
+```
+
+<details>
+  <summary>ℹ A note about puppeteer and WSL</summary>
+  <br>
+  <blockquote>
+    The accessibility checks use puppeteer, a tool that uses Chrome to render websites "headlessly", without a visible interface. In some environments like the <a href="https://aka.ms/wsl">Windows Subsystem for Linux</a>, you'll need to manually configure and run an X-Server in order for puppeteer to work.
+  </blockquote>
+</details>
+
+<br>
+
+### Changelog
+
+Now that your changes are commited, you'll need to **generate a changelog**:
+
+We use a tool called [Changesets](https://github.com/atlassian/changesets) to keep track of what changes have been made between versions. Make sure to create a changelog before creating your pull request!
+
+Just run this command for each change you made, and then answer a few questions:
+
+```
+yarn changeset
+```
+
+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).
+
+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.
+
+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! 🎉
+
+## Project structure
+
+```
+.
+├── out
+├── dist
+└── docs
+    └── icons
+└── src
+    ├── assets
+    ├── builds
+    └── parts
+```
+
+- **`out`** is ignored by git – it contains built assets for distribution
+
+- **`dist`** contains old assets, for backwards compatibility - ignore this
+
+- **`docs`** contains the documentation and demo page
+
+- **`docs/icons`** contains water.css favicons used in the documentation
+
+- **`src`** contains all the source stylesheets grouped into folders and variables
+
+- **`src/assets`** contains images/icons used for UI element styling
+
+- **`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"

.gitignore

@@ -81,4 +81,11 @@ typings/
 .fusebox/
 
 # DynamoDB Local files
-.dynamodb/
+.dynamodb/
+
+# IntelliJ IDE
+.idea/
+
+# Output of yarn build
+out/
+dist/

.huskyrc.json

@@ -0,0 +1,5 @@
+{
+  "hooks": {
+    "pre-commit": "yarn validate"
+  }
+}

.prettierignore

@@ -0,0 +1 @@
+*

.stylelintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": "stylelint-config-standard",
+  "rules": {
+    "no-descending-specificity": null
+  }
+}

.vscode/extensions.json

@@ -0,0 +1,6 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "stylelint.vscode-stylelint"
+  ]
+}

CHANGELOG.md

@@ -0,0 +1,65 @@
+# Water.css
+
+## 2.1.0
+
+### Minor Changes
+
+- 567d2ec: Add styles for <dialog> 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 `<code>` and `<strong>` 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
+
+- Added sourcemaps, autoprefixing, and minification
+
+  - Cleaned up the structure of sourcemap files
+  - Compatible with all major browsers including IE
+
+- Added support for `prefers-color-scheme` to automatically set light and dark theme
+  - The default theme color is light mode
+  - 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
+
+  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
+
+### Minor Changes
+
+- Added radio and checkbox styles
+- Added styles for prepending emojis to `href='mailto'`, `href='tel'`, and `href='sms'`
+- `table` no longer has outer borders and `tr` elements use color striping for alternating backgorund colors
+- Added `min-height` and respect `cols`/`rows` attributes on `textarea`
+- Use `system-ui` font when available
+- Added styles for `samp`, `time`, `var`, and `kbd` elements
+- Added styling for `blockquote`, `q`, and `mark` elements
+- Added print styles
+- Custom scrollbar styles
+- Added `cursor: not-allowed` to `select:disabled`, `button:disabled`, `textarea:disabled`
+- Added styles for `::selection`
+
+### Patch Changes
+
+- Fixed padding, alignment, and colors on several elements
+  - Modified some colors to fix accessibility issues
+- `table` elements no longer overflow
+- Added linter and linted entire codebase
+- Fixed `max-width` of `video` element to prevent overflowing

README.md

@@ -1,126 +1,152 @@
-# Water.css
+<p align="center">
+  <a href="https://www.npmjs.com/package/water.css"><img align="center" src="https://img.shields.io/npm/v/water.css.svg" alt="NPM page"></a>
+  <a href="https://www.producthunt.com/posts/water-css"><img align="center" src="https://img.shields.io/badge/on-product%20hunt-blue.svg" alt="On Product Hunt"></a>
+  <a href="https://github.com/kognise/water.css/pulls"><img align="center" src="https://img.shields.io/github/contributors-anon/kognise/water.css" alt="Contributors"></a>
+  <a href="https://github.com/kognise/water.css/blob/master/LICENSE.md"><img align="center" src="https://img.shields.io/github/license/kognise/water.css.svg" alt="MIT license"></a>
+</p>
 
-[![Water.css](logo.svg)](https://kognise.github.io/water.css/)
+<br>
 
-*A just-add-css collection of styles to make simple websites just a little nicer*
+<h1 align="center">Water.css</h1>
+<p align="center">🌊 A drop-in collection of CSS styles to make simple websites just a little nicer</p>
 
-[![On reddit](https://img.shields.io/badge/on-reddit-orange.svg)](https://www.reddit.com/r/webdev/comments/b9m6mv/watercss_a_collection_of_neat_styles_for_simple/)
+[![Water.css](assets/logo.svg)](https://watercss.kognise.dev/)
-[![On product hunt](https://img.shields.io/badge/on-product%20hunt-red.svg)](https://www.producthunt.com/posts/water-css)
+
-[![MIT license](https://img.shields.io/github/license/kognise/water.css.svg)](https://github.com/kognise/water.css/blob/master/LICENSE.md)
+<br>
 
 ## Goals
 
- - Responsive
+- Responsive
- - Good code quality
+- Themeable
- - Good browser support (works on my old kindle's browser :P)
+- Good browser support (works on my old kindle's browser :P)
- - Small size (&lt; 2kb)
+- Tiny size
- - Beautiful
+- Beautiful
- - No classes
+- No classes
 
 ## Why?
 
-I commonly make quick demo pages or websites with simple content. For these, I don't want to spend time styling them but don't like the uglyness of the default styles.
+I commonly make quick demo pages or websites with simple content. For these, I don't want to spend time styling them but don't like the ugliness of the default styles.
 
-Water.css is a css framework that doesn't require any classes. You just include it in your `<head>` and forget about it, while it silently makes everything nicer.
+Water.css is a CSS framework that doesn't require any classes. You just include it in your `<head>` and forget about it, while it silently makes everything nicer.
 
 ## Who?
 
-You might want to use Water.css if you're making a simple static or demo website that you don't want to spend time styling.
+You might want to use Water.css if you're making a simple static page or demo website that you don't want to spend time styling.
 
-You probably don't want to use it for a production app or something that has more than a simple document. Rule of thumb: if your site has a navbar, don't use Water.css. It's just not meant for that kind of content.
+Although it originally wasn't built for more complex websites, many developers have used Water.css as a base stylesheet and creatively applied custom styles to build out an entire app. Nothing is stopping you from doing the same!
 
 ## How?
 
-Just stick this in your head:
+Just stick this in your `<head>`:
+
+### 🌙/☀ Automatic Theme:
+
+`<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.min.css">`
+
+### 🌙 Dark Theme:
+
+`<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.min.css">`
+
+### ☀ Light Theme:
+
+`<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/light.min.css">`
+
+<br>
+
+A **preview** of the different themes is available [on the **demo page**](https://watercss.kognise.dev/#installation)! ⚡
+
+#### How the "Automatic Theme" works
+
+The main `water.css` file automatically switches between light and dark mode depending on the system preferences of a user's device. This detection is made possible through a CSS media query called [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme). In browsers where the preference can't be detected, `water.css` will stick to the light theme.
+
+If you want to avoid this behavior, use either `dark.css` or `light.css`.
+
+#### Supporting Internet Explorer
+
+All three distributions of Water.css support Internet Explorer 11, but the main `water.css` file **doesn't respect the user's color scheme** and will be locked to light mode due to lack of `prefers-color-scheme` support.
+
+Be aware that IE also doesn't support [runtime theming](#theming), and fixed fallback values will be used. If you want to override the Water.css theme in a way that's compatible with IE, we recommend that you [compile your own theme](#compiling-your-own-theme).
+
+#### Unminified builds
+
+All versions are also available as unminified stylesheets, which can be handy during development.  
+Simply remove the `.min` from the file name.
+
+## Theming
+
+Do you want to make some adjustments or build your own theme completely different from the official dark or light themes? Since Water.css is built with CSS variables this is super easy to do! Here's a list list of all the variables you can change to your liking:
+
+- `--background-body`
+- `--background`
+- `--background-alt`
+- `--selection`
+- `--text-main`
+- `--text-bright`
+- `--text-muted`
+- `--links`
+- `--focus`
+- `--border`
+- `--code`
+- `--animation-duration`
+- `--button-hover`
+- `--scrollbar-thumb`
+- `--scrollbar-thumb-hover`
+- `--form-placeholder`
+- `--form-text`
+- `--variable`
+- `--highlight`
+- `--select-arrow`
+
+### Runtime theming
+
+> ⚠ If you use a version with support for legacy browsers like Internet Explorer, skip to [Compiling your own theme](#compiling-your-own-theme)!
+
+Water.css uses Custom Properties (_"CSS variables"_) to define its base styles such as colors. These can be changed and overwritten right in the browser.
+
+Because of this, you can simply add your own stylesheet to the page and set your own CSS variables there. As long as your stylesheet comes after Water.css in the HTML, your values will override the default ones and your theme is applied!
+
+This short example will use Water.css, but color all links red:
 
 ```html
-<link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/dark.css'>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/water.css@2/out/water.min.css" />
+<style>
+  :root {
+    --links: red;
+  }
+</style>
 ```
 
-Well, there's a dark theme and a light theme. If you want the light theme, use `light.css` instead of `dark.css`. See [Theming](#theming) to make your own theme!
+If you want to change a value for dark or light mode only, use a media query like this:
 
-No other classes or code is required to make Water.css work. If you want a specific version, you can replace `@latest` with `@version`. See [all the versions](https://github.com/kognise/water.css/releases).
+```html
+<style>
+  :root {
+    --links: blue; /* Always applied */
+  }
 
-Oh, you want a demo you say? Cheeky fellah!
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --links: yellow; /* Only applied in dark mode (overrides blue) */
+    }
+  }
+</style>
+```
 
-[Well, here's your demo.](https://kognise.github.io/water.css/)
+### Compiling your own theme
 
-Don't like how it looks? Feel free to submit an issue or PR with suggestions.
+If you are targeting browsers without support for CSS Custom Properties such as Internet Explorer, runtime theming is not an option. To apply your own theming, you'll need to make your changes in the source files themselves, then re-compile the CSS files. This works like the following:
+
+- Clone the repository to your machine
+- Run `yarn` to install dependencies
+- Make the theming changes you want in `src/variables-*.css`
+- Run `yarn build` to compile the CSS files
+- Use the compiled files in the `out/` directory on your site
+
+You also might want to check out the [Contributing Guide](https://github.com/kognise/water.css/tree/master/.github/CONTRIBUTING.md) as it contains further information about the build setup.
 
 ## Contributing
 
 Water.css becomes better for everyone when people like you help make it better!
 
-Have any questions or concerns? Did I forget an element or selector? Does something look ugly? Feel free to submit an issue or pull request.
+Check out our [Contributing Guide](.github/CONTRIBUTING.md) to learn how to get started.  
-
+And thanks for taking the time to contribute! :)
-If you decide to cotnribute, after downloading a copy of the repository make sure to run `yarn` to install dependencies useful for development. Then, you can just run the following to start a server of the demo with live reloading and automatic Sass compiling.
-
-```
-$ yarn dev
-```
-
-And make sure to run `yarn build` before pushing any changes! Thanks for taking the time to contribute :)
-
-## Theming
-
-Do you want to make your own theme different from the light or dark themes? Since Water.css is built with Sass this is super easy to do. There are two methods. Also, here's a list of variables to set:
-
-- `$background`
-- `$background-alt`
-- `$text-main`
-- `$text-bright`
-- `$links`
-- `$focus`
-- `$border`
-- `$code`
-- `$button-hover`
-- `$animation-duration`
-- `$form-placeholder`
-- `$form-text`
-
-### Based on an existing theme
-
-You can base your theme off of the existing light or dark themes, which already have some variables predefined to make it easier for you.
-
-Here's some simple Sass that'll just use the dark theme but color all links red. Of course, you can change any variables you want.
-
-```scss
-$links: #ff0000;
-@import 'dark.scss';
-```
-
-### From scratch
-
-You can also make your theme from scratch. This is less recommended, but feel free to! You just have to define all of the variables.
-
-For example, here's an example of a really ugly theme, made from scratch. **Ouch!**
-
-```scss
-$background: #ff48c2 !default;
-$background-alt: #00ff00 !default;
-
-$text-main: #dbdbdb !default;
-$text-bright: #ffffff !default;
-
-$links: #ff0022 !default;
-$focus: #ffc400 !default;
-$border: #00ffff !default;
-$code: #001aff !default;
-
-$button-hover: #324759 !default;
-$animation-duration: 0.1s !default;
-
-$form-placeholder: #a9a9a9 !default;
-$form-text: #ffffff !default;
-
-@import 'parts/core';
-```
-
-You can also only import parts you want, but this is not recommended. See the `src/parts/` folder for a list of parts.
-
-## Todos
-
-- [Tables](https://github.com/kognise/water.css/issues/5)
-- Blockquotes
-- Add a screenshot
-- Jekyll theme

accessibility.js

@@ -0,0 +1,55 @@
+const pa11y = require('pa11y')
+const chalk = require('chalk')
+const puppeteer = require('puppeteer')
+
+const check = async (browser, theme) => {
+  console.log(chalk`{bold Checking {blue ${theme}} theme...}`)
+
+  const page = await browser.newPage()
+  page.emulateMediaFeatures([
+    { name: 'prefers-color-scheme', value: theme }
+  ])
+
+  const results = await pa11y('./out/docs/index.html', {
+    ignore: [
+      'WCAG2AA.Principle3.Guideline3_2.3_2_2.H32.2' // Ignore "this form does not contain a submit button"
+    ],
+    browser,
+    page
+  })
+
+  if (results.issues.length === 0) {
+    await page.close()
+    console.log(chalk`{green No issues found!}`)
+    return false
+  }
+
+  for (const issue of results.issues) {
+    console.log()
+    console.log(chalk`{red Error:} ${issue.message}`)
+    console.log(chalk`{gray -> ${issue.code}}`)
+    console.log(chalk`{gray -> ${issue.selector}}`)
+    console.log(chalk`{gray -> ${issue.context}}`)
+  }
+
+  await page.close()
+  return true
+}
+
+const go = async () => {
+  try {
+    const browser = await puppeteer.launch()
+
+    const lightResult = await check(browser, 'light')
+    console.log()
+    const darkResult = await check(browser, 'dark')
+
+    await browser.close()
+    if (lightResult || darkResult) process.exit(1)
+  } catch (error) {
+    console.log()
+    console.log(chalk`{red An unexpected error occured!} ${error.message}`)
+  }
+}
+
+go()

assets/icon-dark.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 445 445" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><rect id="Icon-Dark" serif:id="Icon Dark" x="0" y="0" width="444.1" height="444.1" style="fill:none;"/><path d="M444.1,222.05c0,-122.553 -99.497,-222.05 -222.05,-222.05c-122.553,0 -222.05,99.497 -222.05,222.05c0,122.553 99.497,222.05 222.05,222.05c122.553,0 222.05,-99.497 222.05,-222.05Z" style="fill:#202b38;"/><clipPath id="_clip1"><path d="M444.1,222.05c0,-122.553 -99.497,-222.05 -222.05,-222.05c-122.553,0 -222.05,99.497 -222.05,222.05c0,122.553 99.497,222.05 222.05,222.05c122.553,0 222.05,-99.497 222.05,-222.05Z"/></clipPath><g clip-path="url(#_clip1)"><path d="M911.401,444.1l-952.033,0l-1013.41,0c-60.994,-158.567 -78.355,-238.341 -52.081,-239.322c55.598,8.234 81.973,34.191 139.482,112.049c29.194,35.605 69.345,20.109 94.465,-2.512c17.584,-16.734 27.073,-50.366 48.844,-49.975c24.561,-0.391 43.233,18.645 54.02,38.532c21.212,25.119 58.675,26.667 78.568,27.352c28.888,-4.186 35.586,-8.373 46.89,-15.909c20.235,-18.142 25.957,-28.887 36.525,-62.596c19.03,-45.672 40.059,-54.509 68.508,-57.09c17.52,-0.234 67.036,-6.54 92.613,58.359c27.593,50.861 80.763,49.186 123.466,44.999c42.704,-7.117 48.121,-21.878 79.52,-56.417c21.98,-33.912 66.612,-40.42 88.173,-36.792c0.085,0.016 0.171,0.031 0.257,0.046c0.23,-0.021 0.464,-0.037 0.702,-0.046c6.914,1.024 13.376,2.322 19.492,3.971c14.176,3.459 31.042,9.841 47.556,24.318c21.383,17.24 42.766,43.593 72.434,83.76c29.194,35.605 69.345,20.109 94.465,-2.512c17.584,-16.734 27.073,-50.366 48.844,-49.975c24.561,-0.391 43.233,18.645 54.02,38.532c21.212,25.119 58.676,26.667 78.568,27.352c28.888,-4.186 35.586,-8.373 46.89,-15.909c20.235,-18.142 25.957,-28.887 36.525,-62.596c19.03,-45.672 40.059,-54.509 68.508,-57.09c17.52,-0.234 67.036,-6.54 92.613,58.359c27.593,50.861 80.763,49.186 123.466,44.999c42.704,-7.117 48.121,-21.878 79.521,-56.417c21.979,-33.912 66.611,-40.42 88.172,-36.792c0.031,0.006 0.062,0.012 0.094,0.017c0.11,-0.007 0.22,-0.012 0.332,-0.017c4.97,0.737 9.708,1.614 14.244,2.667c16.717,3.443 38.298,10.313 58.806,30.72c19.45,17.188 39.536,42.249 66.432,78.662c29.194,35.605 69.346,20.109 94.466,-2.512c17.583,-16.734 27.073,-50.366 48.843,-49.975c24.561,-0.391 43.233,18.645 54.02,38.532c21.212,25.119 58.676,26.667 78.568,27.352c28.888,-4.186 35.587,-8.373 46.89,-15.909c20.236,-18.142 25.957,-28.887 36.525,-62.596c19.03,-45.672 40.059,-54.509 68.508,-57.09c17.52,-0.234 67.037,-6.54 92.613,58.359c27.594,50.861 80.763,49.186 123.467,44.999c42.703,-7.117 48.12,-21.878 79.52,-56.417c21.979,-33.912 66.611,-40.42 88.172,-36.792c21.617,3.861 62.105,8.005 93.951,59.562c7.404,11.987 14.341,26.536 20.465,44.241l0,135.519l-951.5,0Z" style="fill:#41adff;fill-rule:nonzero;"/></g></svg>

assets/icon-light.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 445 445" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><rect id="Icon-Light" serif:id="Icon Light" x="0" y="0" width="444.1" height="444.1" style="fill:none;"/><path d="M444.1,222.05c0,-122.553 -99.497,-222.05 -222.05,-222.05c-122.553,0 -222.05,99.497 -222.05,222.05c0,122.553 99.497,222.05 222.05,222.05c122.553,0 222.05,-99.497 222.05,-222.05Z" style="fill:#efefef;"/><clipPath id="_clip1"><path d="M444.1,222.05c0,-122.553 -99.497,-222.05 -222.05,-222.05c-122.553,0 -222.05,99.497 -222.05,222.05c0,122.553 99.497,222.05 222.05,222.05c122.553,0 222.05,-99.497 222.05,-222.05Z"/></clipPath><g clip-path="url(#_clip1)"><path d="M911.401,444.1l-952.033,0l-1013.41,0c-60.994,-158.567 -78.355,-238.341 -52.081,-239.322c55.598,8.234 81.973,34.191 139.482,112.049c29.194,35.605 69.345,20.109 94.465,-2.512c17.584,-16.734 27.073,-50.366 48.844,-49.975c24.561,-0.391 43.233,18.645 54.02,38.532c21.212,25.119 58.675,26.667 78.568,27.352c28.888,-4.186 35.586,-8.373 46.89,-15.909c20.235,-18.142 25.957,-28.887 36.525,-62.596c19.03,-45.672 40.059,-54.509 68.508,-57.09c17.52,-0.234 67.036,-6.54 92.613,58.359c27.593,50.861 80.763,49.186 123.466,44.999c42.704,-7.117 48.121,-21.878 79.52,-56.417c21.98,-33.912 66.612,-40.42 88.173,-36.792c0.085,0.016 0.171,0.031 0.257,0.046c0.23,-0.021 0.464,-0.037 0.702,-0.046c6.914,1.024 13.376,2.322 19.492,3.971c14.176,3.459 31.042,9.841 47.556,24.318c21.383,17.24 42.766,43.593 72.434,83.76c29.194,35.605 69.345,20.109 94.465,-2.512c17.584,-16.734 27.073,-50.366 48.844,-49.975c24.561,-0.391 43.233,18.645 54.02,38.532c21.212,25.119 58.676,26.667 78.568,27.352c28.888,-4.186 35.586,-8.373 46.89,-15.909c20.235,-18.142 25.957,-28.887 36.525,-62.596c19.03,-45.672 40.059,-54.509 68.508,-57.09c17.52,-0.234 67.036,-6.54 92.613,58.359c27.593,50.861 80.763,49.186 123.466,44.999c42.704,-7.117 48.121,-21.878 79.521,-56.417c21.979,-33.912 66.611,-40.42 88.172,-36.792c0.031,0.006 0.062,0.012 0.094,0.017c0.11,-0.007 0.22,-0.012 0.332,-0.017c4.97,0.737 9.708,1.614 14.244,2.667c16.717,3.443 38.298,10.313 58.806,30.72c19.45,17.188 39.536,42.249 66.432,78.662c29.194,35.605 69.346,20.109 94.466,-2.512c17.583,-16.734 27.073,-50.366 48.843,-49.975c24.561,-0.391 43.233,18.645 54.02,38.532c21.212,25.119 58.676,26.667 78.568,27.352c28.888,-4.186 35.587,-8.373 46.89,-15.909c20.236,-18.142 25.957,-28.887 36.525,-62.596c19.03,-45.672 40.059,-54.509 68.508,-57.09c17.52,-0.234 67.037,-6.54 92.613,58.359c27.594,50.861 80.763,49.186 123.467,44.999c42.703,-7.117 48.12,-21.878 79.52,-56.417c21.979,-33.912 66.611,-40.42 88.172,-36.792c21.617,3.861 62.105,8.005 93.951,59.562c7.404,11.987 14.341,26.536 20.465,44.241l0,135.519l-951.5,0Z" style="fill:#41adff;fill-rule:nonzero;"/></g></svg>

bookmarklet/original.js

@@ -0,0 +1,59 @@
+// Water.css Bookmarklet
+// ---------------------
+
+const $$ = (selector) => document.querySelectorAll(selector)
+const createElement = (tagName, properties) => Object.assign(document.createElement(tagName), properties)
+
+// Remove all CSS stylesheets, external and internal
+$$('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.css'
+})
+
+// Add water.css and responsive viewport (if necessary)
+document.head.append(
+  linkElm,
+  !$$('meta[name="viewport"]').length && createElement('meta', {
+    name: 'viewport',
+    content: 'width=device-width,initial-scale=1.0'
+  })
+)
+
+// Theme switching icons
+const moonSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>'
+const sunSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-sun"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg>'
+
+// 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 toggleTheme = () => {
+  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/light.css'
+    toggleBtn.innerHTML = sunSVG
+  }
+}
+
+toggleBtn.addEventListener('click', toggleTheme)
+document.body.append(toggleBtn)

dev.js

@@ -1,75 +0,0 @@
-const express = require('express')
-const app = express()
-const http = require('http').Server(app)
-const io = require('socket.io')(http)
-const fs = require('fs-extra')
-const chokidar = require('chokidar')
-const sass = require('node-sass')
-
-const script = `
-const socket = io()
-socket.on('reload', () => location.reload())
-`
-
-app.get('/', async (req, res) => {
-  console.log('> Serving index')
-  const html = await fs.readFile('index.html')
-  const injected = html.toString().replace('</body>', `<script src='/socket.io/socket.io.js'></script><script>${script}</script></body>`)
-  res.send(injected)
-})
-
-app.get('/script.js', async (req, res) => {
-  console.log('> Serving script')
-  const script = await fs.readFile('script.js')
-  res.contentType('javascript')
-  res.send(script)
-})
-
-app.use('/dist', (req, res, next) => {
-  console.log('> Serving a stylesheet')
-  next()
-}, express.static('dist'))
-
-function reload() {
-  console.log('> Reloading')
-  io.emit('reload')
-}
-
-chokidar.watch('index.html', { ignoreInitial: true }).on('all', () => {
-  console.log('> Index changed')
-  reload()
-})
-
-chokidar.watch('script.js', { ignoreInitial: true }).on('all', () => {
-  console.log('> Script changed')
-  reload()
-})
-
-function buildSass(file) {
-  sass.render({ file, outputStyle: 'compressed' }, async (errors, result) => {
-    if (errors) {
-      console.log('> Sass errors!')
-      console.log(errors)
-      return
-    }
-    const outFile = file.replace('src', 'dist').replace('.scss', '.css')
-    await fs.outputFile(outFile, result.css)
-    reload()
-  })
-}
-
-chokidar.watch('src/*.scss', { ignoreInitial: true }).on('all', (event, file) => {
-  console.log('> Stylesheet changed')
-  buildSass(file)
-})
-
-chokidar.watch('src/parts/*.scss', { ignoreInitial: true }).on('all', async () => {
-  console.log('> Stylesheet part changed')
-  const src = await fs.readdir('src')
-  const files = src.filter(file => file !== 'parts').map(file => `src/${file}`)
-  for (let file of files) {
-    buildSass(file)
-  }
-})
-
-http.listen(3000, () => console.log('> Ready at http://localhost:3000/'))

dist/README.md

@@ -0,0 +1,7 @@
+# About This Directory
+
+This `dist/` directory is here to maintain backwards compatibility with sites that use the pre-2.0 version of Water.css.
+
+We used to encourage linking to this directory instead of the version on NPM (since it didn't exist) so this exists to avoid breaking anything.
+
+If you're still using a version from this directory please see the README to update. If you're a contributor, ignore this - **you're probably looking for `out/`**.

dist/dark.css

@@ -1 +1,241 @@
-body{font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;line-height:1.4;max-width:800px;margin:20px auto;padding:0 10px;color:#dbdbdb;background:#202b38;text-rendering:optimizeLegibility}button,input,textarea{transition:background-color .1s linear,border-color .1s linear,color .1s linear,box-shadow .1s linear,transform .1s ease}h1{font-size:2.2em;margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:12px}h1,h2,h3,h4,h5,h6,strong{color:#fff}h1,h2,h3,h4,h5,h6,b,strong,th{font-weight:600}button,input[type='submit'],input[type='button'],input[type='checkbox']{cursor:pointer}input:not([type='checkbox']),select{display:block}input,select,button,textarea{color:#fff;background-color:#161f27;font-family:inherit;font-size:inherit;margin-right:6px;margin-bottom:6px;padding:10px;border:none;border-radius:6px;outline:none}input:not([type='checkbox']),select,button,textarea{-webkit-appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}button,input[type='submit'],input[type='button']{padding-right:30px;padding-left:30px}button:hover,input[type='submit']:hover,input[type='button']:hover{background:#324759}input:focus,select:focus,button:focus,textarea:focus{box-shadow:0 0 0 2px rgba(0,150,191,0.670588)}input[type='checkbox']:active,input[type='submit']:active,input[type='button']:active,button:active{transform:translateY(2px)}input:disabled{cursor:not-allowed;opacity:.5}::placeholder{color:#a9a9a9}a{text-decoration:none;color:#41adff}a:hover{text-decoration:underline}code,kbd{background:#161f27;color:#ffbe85;padding:5px;border-radius:6px}pre>code{padding:10px;display:block;overflow-x:auto}img{max-width:100%}hr{border:none;border-top:1px solid #dbdbdb}
+@charset "UTF-8";
+body {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  line-height: 1.4;
+  max-width: 800px;
+  margin: 20px auto;
+  padding: 0 10px;
+  color: #dbdbdb;
+  background: #202b38;
+  text-rendering: optimizeLegibility;
+}
+
+button, input, textarea {
+  transition: background-color 0.1s linear, border-color 0.1s linear, color 0.1s linear, box-shadow 0.1s linear, transform 0.1s ease;
+}
+
+h1 {
+  font-size: 2.2em;
+  margin-top: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-bottom: 12px;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+strong {
+  color: #ffffff;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+b,
+strong,
+th {
+  font-weight: 600;
+}
+
+blockquote {
+  border-left: 4px solid #0096bfab;
+  margin: 1.5em 0em;
+  padding: 0.5em 1em;
+  font-style: italic;
+}
+
+blockquote > footer {
+  margin-top: 10px;
+  font-style: normal;
+}
+
+blockquote cite {
+  font-style: normal;
+}
+
+address {
+  font-style: normal;
+}
+
+a[href^='mailto']::before {
+  content: '📧 ';
+}
+
+a[href^='tel']::before {
+  content: '📞 ';
+}
+
+a[href^='sms']::before {
+  content: '💬 ';
+}
+
+button,
+input[type='submit'],
+input[type='button'],
+input[type='checkbox'] {
+  cursor: pointer;
+}
+
+input:not([type='checkbox']):not([type='radio']),
+select {
+  display: block;
+}
+
+input, select, button, textarea {
+  color: #ffffff;
+  background-color: #161f27;
+  font-family: inherit;
+  font-size: inherit;
+  margin-right: 6px;
+  margin-bottom: 6px;
+  padding: 10px;
+  border: none;
+  border-radius: 6px;
+  outline: none;
+}
+
+input:not([type='checkbox']):not([type='radio']),
+select, button, textarea {
+  -webkit-appearance: none;
+}
+
+textarea {
+  margin-right: 0;
+  width: 100%;
+  box-sizing: border-box;
+  resize: vertical;
+}
+
+button, input[type='submit'], input[type='button'] {
+  padding-right: 30px;
+  padding-left: 30px;
+}
+
+button:hover,
+input[type='submit']:hover,
+input[type='button']:hover {
+  background: #324759;
+}
+
+input:focus,
+select:focus,
+button:focus,
+textarea:focus {
+  box-shadow: 0 0 0 2px #0096bfab;
+}
+
+input[type='checkbox']:active,
+input[type='radio']:active,
+input[type='submit']:active,
+input[type='button']:active,
+button:active {
+  transform: translateY(2px);
+}
+
+input:disabled,
+select:disabled,
+button:disabled,
+textarea:disabled {
+  cursor: not-allowed;
+  opacity: .5;
+}
+
+::-webkit-input-placeholder {
+  color: #a9a9a9;
+}
+
+:-ms-input-placeholder {
+  color: #a9a9a9;
+}
+
+::-ms-input-placeholder {
+  color: #a9a9a9;
+}
+
+::placeholder {
+  color: #a9a9a9;
+}
+
+a {
+  text-decoration: none;
+  color: #41adff;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+code, kbd {
+  background: #161f27;
+  color: #ffbe85;
+  padding: 5px;
+  border-radius: 6px;
+}
+
+pre > code {
+  padding: 10px;
+  display: block;
+  overflow-x: auto;
+}
+
+img {
+  max-width: 100%;
+}
+
+hr {
+  border: none;
+  border-top: 1px solid #dbdbdb;
+}
+
+table {
+  border-collapse: collapse;
+  margin-bottom: 10px;
+  width: 100%;
+}
+
+td, th {
+  padding: 6px;
+  text-align: left;
+}
+
+th {
+  border-bottom: 1px solid #dbdbdb;
+}
+
+tbody tr:nth-child(even) {
+  background-color: #161f27;
+}
+
+::-webkit-scrollbar {
+  height: 10px;
+  width: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: #161f27;
+  border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #324759;
+  border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #415c73;
+}
+
+/*# sourceMappingURL=dark.css.map */

dist/dark.min.css

@@ -0,0 +1,2 @@
+@charset "UTF-8";body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.4;max-width:800px;margin:20px auto;padding:0 10px;color:#dbdbdb;background:#202b38;text-rendering:optimizeLegibility}button,input,textarea{transition:background-color .1s linear,border-color .1s linear,color .1s linear,box-shadow .1s linear,transform .1s ease}h1{font-size:2.2em;margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:12px}h1,h2,h3,h4,h5,h6,strong{color:#fff}b,h1,h2,h3,h4,h5,h6,strong,th{font-weight:600}blockquote{border-left:4px solid rgba(0,150,191,.67);margin:1.5em 0;padding:.5em 1em;font-style:italic}blockquote>footer{margin-top:10px;font-style:normal}address,blockquote cite{font-style:normal}a[href^=mailto]:before{content:"📧 "}a[href^=tel]:before{content:"📞 "}a[href^=sms]:before{content:"💬 "}button,input[type=button],input[type=checkbox],input[type=submit]{cursor:pointer}input:not([type=checkbox]):not([type=radio]),select{display:block}button,input,select,textarea{color:#fff;background-color:#161f27;font-family:inherit;font-size:inherit;margin-right:6px;margin-bottom:6px;padding:10px;border:none;border-radius:6px;outline:none}button,input:not([type=checkbox]):not([type=radio]),select,textarea{-webkit-appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}button,input[type=button],input[type=submit]{padding-right:30px;padding-left:30px}button:hover,input[type=button]:hover,input[type=submit]:hover{background:#324759}button:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 0 2px rgba(0,150,191,.67)}button:active,input[type=button]:active,input[type=checkbox]:active,input[type=radio]:active,input[type=submit]:active{transform:translateY(2px)}button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;opacity:.5}::-webkit-input-placeholder{color:#a9a9a9}:-ms-input-placeholder{color:#a9a9a9}::-ms-input-placeholder{color:#a9a9a9}::placeholder{color:#a9a9a9}a{text-decoration:none;color:#41adff}a:hover{text-decoration:underline}code,kbd{background:#161f27;color:#ffbe85;padding:5px;border-radius:6px}pre>code{padding:10px;display:block;overflow-x:auto}img{max-width:100%}hr{border:none;border-top:1px solid #dbdbdb}table{border-collapse:collapse;margin-bottom:10px;width:100%}td,th{padding:6px;text-align:left}th{border-bottom:1px solid #dbdbdb}tbody tr:nth-child(2n){background-color:#161f27}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#161f27;border-radius:6px}::-webkit-scrollbar-thumb{background:#324759;border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#415c73}
+/*# sourceMappingURL=dark.min.css.map */

dist/light.css

@@ -1 +1,241 @@
-body{font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;line-height:1.4;max-width:800px;margin:20px auto;padding:0 10px;color:#363636;background:#fff;text-rendering:optimizeLegibility}button,input,textarea{transition:background-color .1s linear,border-color .1s linear,color .1s linear,box-shadow .1s linear,transform .1s ease}h1{font-size:2.2em;margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:12px}h1,h2,h3,h4,h5,h6,strong{color:#000}h1,h2,h3,h4,h5,h6,b,strong,th{font-weight:600}button,input[type='submit'],input[type='button'],input[type='checkbox']{cursor:pointer}input:not([type='checkbox']),select{display:block}input,select,button,textarea{color:#000;background-color:#efefef;font-family:inherit;font-size:inherit;margin-right:6px;margin-bottom:6px;padding:10px;border:none;border-radius:6px;outline:none}input:not([type='checkbox']),select,button,textarea{-webkit-appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}button,input[type='submit'],input[type='button']{padding-right:30px;padding-left:30px}button:hover,input[type='submit']:hover,input[type='button']:hover{background:#ddd}input:focus,select:focus,button:focus,textarea:focus{box-shadow:0 0 0 2px rgba(0,150,191,0.670588)}input[type='checkbox']:active,input[type='submit']:active,input[type='button']:active,button:active{transform:translateY(2px)}input:disabled{cursor:not-allowed;opacity:.5}::placeholder{color:#949494}a{text-decoration:none;color:#0076d1}a:hover{text-decoration:underline}code,kbd{background:#efefef;color:#000;padding:5px;border-radius:6px}pre>code{padding:10px;display:block;overflow-x:auto}img{max-width:100%}hr{border:none;border-top:1px solid #dbdbdb}
+@charset "UTF-8";
+body {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  line-height: 1.4;
+  max-width: 800px;
+  margin: 20px auto;
+  padding: 0 10px;
+  color: #363636;
+  background: #ffffff;
+  text-rendering: optimizeLegibility;
+}
+
+button, input, textarea {
+  transition: background-color 0.1s linear, border-color 0.1s linear, color 0.1s linear, box-shadow 0.1s linear, transform 0.1s ease;
+}
+
+h1 {
+  font-size: 2.2em;
+  margin-top: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-bottom: 12px;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+strong {
+  color: #000000;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+b,
+strong,
+th {
+  font-weight: 600;
+}
+
+blockquote {
+  border-left: 4px solid #0096bfab;
+  margin: 1.5em 0em;
+  padding: 0.5em 1em;
+  font-style: italic;
+}
+
+blockquote > footer {
+  margin-top: 10px;
+  font-style: normal;
+}
+
+blockquote cite {
+  font-style: normal;
+}
+
+address {
+  font-style: normal;
+}
+
+a[href^='mailto']::before {
+  content: '📧 ';
+}
+
+a[href^='tel']::before {
+  content: '📞 ';
+}
+
+a[href^='sms']::before {
+  content: '💬 ';
+}
+
+button,
+input[type='submit'],
+input[type='button'],
+input[type='checkbox'] {
+  cursor: pointer;
+}
+
+input:not([type='checkbox']):not([type='radio']),
+select {
+  display: block;
+}
+
+input, select, button, textarea {
+  color: #000000;
+  background-color: #efefef;
+  font-family: inherit;
+  font-size: inherit;
+  margin-right: 6px;
+  margin-bottom: 6px;
+  padding: 10px;
+  border: none;
+  border-radius: 6px;
+  outline: none;
+}
+
+input:not([type='checkbox']):not([type='radio']),
+select, button, textarea {
+  -webkit-appearance: none;
+}
+
+textarea {
+  margin-right: 0;
+  width: 100%;
+  box-sizing: border-box;
+  resize: vertical;
+}
+
+button, input[type='submit'], input[type='button'] {
+  padding-right: 30px;
+  padding-left: 30px;
+}
+
+button:hover,
+input[type='submit']:hover,
+input[type='button']:hover {
+  background: #dddddd;
+}
+
+input:focus,
+select:focus,
+button:focus,
+textarea:focus {
+  box-shadow: 0 0 0 2px #0096bfab;
+}
+
+input[type='checkbox']:active,
+input[type='radio']:active,
+input[type='submit']:active,
+input[type='button']:active,
+button:active {
+  transform: translateY(2px);
+}
+
+input:disabled,
+select:disabled,
+button:disabled,
+textarea:disabled {
+  cursor: not-allowed;
+  opacity: .5;
+}
+
+::-webkit-input-placeholder {
+  color: #949494;
+}
+
+:-ms-input-placeholder {
+  color: #949494;
+}
+
+::-ms-input-placeholder {
+  color: #949494;
+}
+
+::placeholder {
+  color: #949494;
+}
+
+a {
+  text-decoration: none;
+  color: #0076d1;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+code, kbd {
+  background: #efefef;
+  color: #000000;
+  padding: 5px;
+  border-radius: 6px;
+}
+
+pre > code {
+  padding: 10px;
+  display: block;
+  overflow-x: auto;
+}
+
+img {
+  max-width: 100%;
+}
+
+hr {
+  border: none;
+  border-top: 1px solid #dbdbdb;
+}
+
+table {
+  border-collapse: collapse;
+  margin-bottom: 10px;
+  width: 100%;
+}
+
+td, th {
+  padding: 6px;
+  text-align: left;
+}
+
+th {
+  border-bottom: 1px solid #dbdbdb;
+}
+
+tbody tr:nth-child(even) {
+  background-color: #efefef;
+}
+
+::-webkit-scrollbar {
+  height: 10px;
+  width: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: #efefef;
+  border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #d5d5d5;
+  border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #c4c4c4;
+}
+
+/*# sourceMappingURL=light.css.map */

dist/light.min.css

@@ -0,0 +1,2 @@
+@charset "UTF-8";body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.4;max-width:800px;margin:20px auto;padding:0 10px;color:#363636;background:#fff;text-rendering:optimizeLegibility}button,input,textarea{transition:background-color .1s linear,border-color .1s linear,color .1s linear,box-shadow .1s linear,transform .1s ease}h1{font-size:2.2em;margin-top:0}h1,h2,h3,h4,h5,h6{margin-bottom:12px}h1,h2,h3,h4,h5,h6,strong{color:#000}b,h1,h2,h3,h4,h5,h6,strong,th{font-weight:600}blockquote{border-left:4px solid rgba(0,150,191,.67);margin:1.5em 0;padding:.5em 1em;font-style:italic}blockquote>footer{margin-top:10px;font-style:normal}address,blockquote cite{font-style:normal}a[href^=mailto]:before{content:"📧 "}a[href^=tel]:before{content:"📞 "}a[href^=sms]:before{content:"💬 "}button,input[type=button],input[type=checkbox],input[type=submit]{cursor:pointer}input:not([type=checkbox]):not([type=radio]),select{display:block}button,input,select,textarea{color:#000;background-color:#efefef;font-family:inherit;font-size:inherit;margin-right:6px;margin-bottom:6px;padding:10px;border:none;border-radius:6px;outline:none}button,input:not([type=checkbox]):not([type=radio]),select,textarea{-webkit-appearance:none}textarea{margin-right:0;width:100%;box-sizing:border-box;resize:vertical}button,input[type=button],input[type=submit]{padding-right:30px;padding-left:30px}button:hover,input[type=button]:hover,input[type=submit]:hover{background:#ddd}button:focus,input:focus,select:focus,textarea:focus{box-shadow:0 0 0 2px rgba(0,150,191,.67)}button:active,input[type=button]:active,input[type=checkbox]:active,input[type=radio]:active,input[type=submit]:active{transform:translateY(2px)}button:disabled,input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;opacity:.5}::-webkit-input-placeholder{color:#949494}:-ms-input-placeholder{color:#949494}::-ms-input-placeholder{color:#949494}::placeholder{color:#949494}a{text-decoration:none;color:#0076d1}a:hover{text-decoration:underline}code,kbd{background:#efefef;color:#000;padding:5px;border-radius:6px}pre>code{padding:10px;display:block;overflow-x:auto}img{max-width:100%}hr{border:none;border-top:1px solid #dbdbdb}table{border-collapse:collapse;margin-bottom:10px;width:100%}td,th{padding:6px;text-align:left}th{border-bottom:1px solid #dbdbdb}tbody tr:nth-child(2n){background-color:#efefef}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#efefef;border-radius:6px}::-webkit-scrollbar-thumb{background:#d5d5d5;border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#c4c4c4}
+/*# sourceMappingURL=light.min.css.map */

docs/icons/browserconfig.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square70x70logo src="./mstile-70x70.png"/>
+            <square150x150logo src="./mstile-150x150.png"/>
+            <square310x310logo src="./mstile-310x310.png"/>
+            <wide310x150logo src="./mstile-310x150.png"/>
+            <TileColor>#00aba9</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

docs/icons/safari-pinned-tab.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M2378 5115 c-2 -1 -30 -5 -63 -9 -33 -3 -71 -8 -85 -10 -14 -3 -61
+-10 -105 -16 -239 -35 -599 -163 -835 -297 -479 -273 -886 -735 -1095 -1243
+-52 -128 -115 -324 -129 -400 -2 -14 -7 -36 -10 -50 -44 -190 -65 -557 -44
+-780 39 -410 195 -841 429 -1185 303 -446 735 -784 1239 -968 111 -41 310 -97
+395 -111 226 -38 248 -40 480 -41 275 0 380 12 635 76 233 59 453 147 643 258
+43 25 85 51 95 56 46 27 151 103 239 174 523 418 866 1043 940 1716 13 116 9
+511 -6 600 -49 295 -96 465 -194 693 -194 456 -557 879 -982 1146 -152 96
+-423 226 -520 250 -5 2 -18 6 -27 9 -37 14 -54 20 -83 27 -16 5 -73 20 -125
+33 -174 47 -356 69 -582 72 -113 2 -208 2 -210 0z"/>
+</g>
+</svg>

docs/index.html

@@ -0,0 +1,363 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head prefix="og: http://ogp.me/ns#">
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Water.css</title>
+    <link rel="canonical" href="https://watercss.kognise.dev/" />
+    <meta
+      name="description"
+      content="A drop-in collection of CSS styles to make simple websites like this just a little bit nicer."
+    />
+
+    <link rel="apple-touch-icon" sizes="180x180" href="./icons/apple-touch-icon.png" />
+    <link rel="icon" id="icon-16" type="image/png" sizes="16x16" href="./icons/favicon-16x16.png" />
+    <link rel="icon" id="icon-32" type="image/png" sizes="32x32" href="./icons/favicon-32x32.png" />
+    <link rel="manifest" href="./site.webmanifest" />
+    <link rel="mask-icon" href="./icons/safari-pinned-tab.svg" color="#5bbad5" />
+    <link rel="shortcut icon" id="icon-ico" href="./icons/favicon.ico" />
+    <meta name="apple-mobile-web-app-title" content="Water.css" />
+    <meta name="application-name" content="Water.css" />
+    <meta name="msapplication-TileColor" content="#00aba9" />
+    <meta name="msapplication-config" content="./icons/browserconfig.xml" />
+    <meta name="theme-color" content="#ffffff" />
+
+    <!-- Startup styles of water.css, so styles don't have to wait until JS is loaded -->
+    <link rel="preload" as="style" href="./water.css/dark.min.css" />
+    <link rel="preload" as="style" href="./water.css/light.min.css" />
+    <link rel="stylesheet" id="js-startup-stylesheet" href="./water.css/water.min.css" />
+
+    <!-- Dynamic version of water.css, overwrites startup styles. JavaScript sets & updates href -->
+    <link rel="stylesheet" id="js-stylesheet" />
+
+    <!-- Custom styles for the documentation / version picker -->
+    <link rel="stylesheet" href="style.css" />
+
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://watercss.kognise.dev/" />
+    <meta property="og:title" content="Water.css" />
+    <meta
+      property="og:description"
+      content="A drop-in collection of CSS styles to make simple websites like this just a little bit nicer."
+    />
+    <meta
+      property="og:image"
+      content="https://raw.githubusercontent.com/kognise/water.css/master/assets/logo.png"
+    />
+    <meta property="og:image:width" content="1154" />
+    <meta property="og:image:height" content="444" />
+    <script type="application/ld+json">
+      {
+        "@context": "http://www.schema.org",
+        "@type": "WebSite",
+        "name": "Water.css",
+        "alternateName": "Water.css",
+        "url": "https://watercss.kognise.dev/"
+      }
+    </script>
+
+    <script>
+      // eslint-disable-next-line no-useless-escape
+      window.navigator.clipboard || document.write('<script src="https://unpkg.com/clipboard-polyfill@2.8.6/dist/clipboard-polyfill.promise.js"><\/script>')
+    </script>
+
+    <!-- Use bright favicons when the browser is in dark mode. -->
+    <script type="module">
+      import faviconSwitcher from 'https://unpkg.com/favicon-mode-switcher@1.0.4/dist/index.min.mjs'
+      faviconSwitcher([
+        { element: '#icon-ico', href: { dark: './icons/light-favicon.ico' } },
+        { element: '#icon-16', href: { dark: './icons/light-favicon-16x16.png' } },
+        { element: '#icon-32', href: { dark: './icons/light-favicon-32x32.png' } }
+      ])
+    </script>
+  </head>
+
+  <body>
+    <h1>Water.css</h1>
+
+    <p>
+      Water.css is a drop-in collection of CSS styles to make simple websites like this just a
+      little bit nicer.
+    </p>
+    <p>
+      Now you can write your simple static site with nice semantic html, and Water.css will manage
+      the styling for you.
+    </p>
+
+    <div class="row">
+      <div>
+        <a href="#installation"><b>Get it already!</b></a>
+        <br />
+        <a href="https://github.com/kognise/water.css"><b>GitHub</b></a>
+      </div>
+
+      <a
+        href="https://www.producthunt.com/posts/water-css?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-water-css"
+        target="_blank"
+        rel="noopener"
+      >
+        <img
+          id="product-hunt"
+          src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=150490&theme=dark&period=daily"
+          alt="Water.css - Make your tiny website just a little nicer | Product Hunt Embed"
+          style="width: 250px; height: 54px;"
+          width="250px"
+          height="54px"
+        />
+      </a>
+    </div>
+
+    <h2>Installation</h2>
+    <div id="installation">
+      <header class="row">
+        <h3 id="link-snippet-headline">
+          Paste this into the <code>&lt;head&gt;</code> of your HTML:
+        </h3>
+        <button type="button" id="copy-button">
+          <span id="copy-button-feedback"></span>
+          Copy to clipboard
+        </button>
+      </header>
+
+      <div id="link-snippet-container">
+        <pre id="link-snippet-auto"><code>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"></code></pre>
+        <pre hidden id="link-snippet-dark"><code>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.css"></code></pre>
+        <pre hidden id="link-snippet-light"><code>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/light.css"></code></pre>
+      </div>
+
+      <h3>Options</h3>
+      <form id="theme-form">
+        <input type="radio" value="auto" checked name="theme" id="theme-auto" />
+        <label for="theme-auto">Automatic 🌙 / ☀</label>
+
+        <input type="radio" value="dark" name="theme" id="theme-dark" />
+        <label for="theme-dark">Dark theme 🌙</label>
+
+        <input type="radio" value="light" name="theme" id="theme-light" />
+        <label for="theme-light">Light theme ☀</label>
+      </form>
+
+      <table id="version-info">
+        <caption>
+          <h3>Version info</h3>
+        </caption>
+
+        <tbody>
+          <tr>
+            <th scope="row">File</th>
+            <td id="table-file-name"></td>
+          </tr>
+
+          <tr>
+            <th scope="row">Size (min + gzip)</th>
+            <td id="table-file-size"></td>
+          </tr>
+
+          <tr>
+            <th scope="row">Theme</th>
+            <td id="table-theme"></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <h2 id="goals">Goals</h2>
+    <ul>
+      <li>Responsive</li>
+      <li>Good code quality</li>
+      <li>Good browser support</li>
+      <li>Small size (&lt; 2kb)</li>
+      <li>Beautiful</li>
+      <li>No classes</li>
+    </ul>
+
+    <h2 id="responsive">Is it responsive?</h2>
+    <p>
+      <strong>Heck yeah!</strong> It doesn't include any fancy styles so it's easily mobile
+      responsive. Just add the famous
+      <a href="https://www.w3schools.com/css/css_rwd_viewport.asp">responsive viewport tag</a> and
+      you'll be good to go!
+    </p>
+    <p>In fact, try resizing this page. Everything flows super nicely as you'll see.</p>
+
+    <h2 id="bookmarklet">Bookmarklet</h2>
+    <p>
+      A bookmarklet is a snippet of JavaScript that sits in your bookmarks bar.
+    </p>
+    <p>
+      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:
+    </p>
+    <strong>
+      <a href="javascript:(function()%7B%2F%2F%20Water.css%20Bookmarklet%0A%2F%2F%20---------------------%0A%0Aconst%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%2F%2F%20Remove%20all%20CSS%20stylesheets%2C%20external%20and%20internal%0A%24%24('link%5Brel%3D%22stylesheet%22%5D%2Cstyle').forEach((el)%20%3D%3E%20el.remove())%0A%0A%2F%2F%20Remove%20all%20inline%20styles%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%2Flight.css'%0A%7D)%0A%0A%2F%2F%20Add%20water.css%20and%20responsive%20viewport%20(if%20necessary)%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%0A%2F%2F%20Theme%20switching%20icons%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%0A%2F%2F%20Theme%20toggling%20logic%0Aconst%20toggleBtn%20%3D%20createElement('button'%2C%20%7B%0A%20%20innerHTML%3A%20sunSVG%2C%0A%20%20ariaLabel%3A%20'Switch%20theme'%2C%0A%20%20style%3A%20%60%0A%20%20%20%20position%3A%20fixed%3B%0A%20%20%20%20top%3A%2050px%3B%0A%20%20%20%20right%3A%2050px%3B%0A%20%20%20%20margin%3A%200%3B%0A%20%20%20%20padding%3A%2010px%3B%0A%20%20%20%20line-height%3A%201%3B%0A%20%20%60%0A%7D)%0A%0Alet%20theme%20%3D%20'light'%0Aconst%20toggleTheme%20%3D%20()%20%3D%3E%20%7B%0A%20%20if%20(theme%20%3D%3D%3D%20'light')%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'%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%2Flight.css'%0A%20%20%20%20toggleBtn.innerHTML%20%3D%20sunSVG%0A%20%20%7D%0A%7D%0A%0AtoggleBtn.addEventListener('click'%2C%20toggleTheme)%0Adocument.body.append(toggleBtn)%7D)()%3B">
+        Waterize
+      </a>
+    </strong>
+
+    <h2 id="demo">Element demos</h2>
+    <p>This is supposed to be a demo page so we need more elements!</p>
+
+    <h3 id="form-elements">Form elements</h3>
+    <form>
+      <label for="email">Email</label>
+      <input type="email" name="email" id="email" placeholder="john.doe@gmail.com" />
+
+      <label for="id">User id (read only)</label>
+      <input readonly name="id" id="id" value="04D6H89Z" />
+
+      <label for="disabled">Random disabled input</label>
+      <input disabled name="disabled" id="disabled" placeholder="Because why not?" />
+
+      <label for="about">About me</label>
+      <textarea name="about" id="about" placeholder="I am a textarea..."></textarea>
+
+      <label>Choose a Doe:</label>
+      <div>
+        <input type="radio" id="john" name="drone" value="john" checked />
+        <label for="john">John Doe</label>
+      </div>
+      <div>
+        <input type="radio" id="jane" name="drone" value="jane" checked />
+        <label for="jane">Jane Doe</label>
+      </div>
+      <div>
+        <input type="radio" id="johnny" name="drone" value="johnny" checked />
+        <label for="johnny">Johnny Doe</label>
+      </div>
+
+      <br />
+
+      <input type="checkbox" name="remember" id="remember" checked />
+      <label for="remember">Remember me</label>
+
+      <input type="submit" value="Submit" />
+      <input type="reset" value="Reset" />
+    </form>
+
+    <h3 id="code">Code</h3>
+    <p>
+      Below is some code, you can copy it with <kbd>Ctrl-C</kbd>. Did you know,
+      <code>alert(1)</code> can show an alert in JavaScript!
+    </p>
+    <pre><code>// This logs a message to the console and check out the scrollbar.<br>console.log('Hello, world!')</code></pre>
+
+    <h3 id="other">Other</h3>
+    <p>Here's a horizontal rule and image because I don't know where else to put them.</p>
+    <img src="https://placekitten.com/408/287" alt="Example kitten" />
+    <hr />
+
+    <p>And here's a nicely marked up table!</p>
+    <table>
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Quantity</th>
+          <th>Price</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Godzilla</td>
+          <td>2</td>
+          <td>$299.99</td>
+        </tr>
+        <tr>
+          <td>Mozilla</td>
+          <td>10</td>
+          <td>$100,000.00</td>
+        </tr>
+        <tr>
+          <td>Quesadilla</td>
+          <td>1</td>
+          <td>$2.22</td>
+        </tr>
+      </tbody>
+    </table>
+
+    <details>
+      <summary>Some summary/details can't hurt!</summary>
+      <p>Lorem ipsum dolor sit blah blah.</p>
+    </details>
+
+    <p>The dialog (form, and menu) tag</p>
+
+    <div>
+      <button type="button" id="dialog-trigger">
+        Show me the dialog!
+      </button>
+      <span id="dialog-result"></span>
+    </div>
+
+    <dialog id="dialog">
+      <header>This is a sample dialog</header>
+      <form method="dialog">
+        <p>What is your favorite pet animal?</p>
+        <menu>
+          <button value="feline">Cats</button>
+          <button value="canine">Dogs</button>
+          <button value="other">Others</button>
+        </menu>
+      </form>
+    </dialog>
+
+    <h3 id="typography">Typography</h3>
+    <p>
+      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
+      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.
+      <strong>This is strong,</strong> this is normal, <b>this is just bold,</b>
+      <em>and this is emphasized!</em> And heck, <a href="/">here</a>'s a link.
+    </p>
+
+    <blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
+      "The HTML blockquote Element (or HTML Block Quotation Element) indicates that the enclosed
+      text is an extended quotation. Usually, this is rendered visually by indentation (see
+      <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote#Usage_notes"
+        >Notes</a
+      >
+      for how to change it). A URL for the source of the quotation may be given using the
+      <code>cite</code> attribute, while a text representation of the source can be given using the
+      <code>&lt;cite&gt;</code> cite element."
+
+      <footer>
+        <cite>MDN, "The Block Quotation element"</cite>
+      </footer>
+    </blockquote>
+
+    <ul>
+      <li>Unordered list item 1</li>
+      <li>Unordered list item 2</li>
+      <li>Unordered list item 3</li>
+    </ul>
+    <ol>
+      <li>Ordered list item 1</li>
+      <li>Ordered list item 2</li>
+      <li>Ordered list item 3</li>
+    </ol>
+
+    <p>Addresses are also styled to be <strong>awesome</strong>!</p>
+    <address>
+      <a href="mailto:john.doe@example.com">john.doe@example.com</a><br />
+      <a href="tel:778-330-2389">778-330-2389</a><br />
+      <a href="sms:666-666-6666">666-666-6666</a><br />
+    </address>
+
+    <br />
+
+    <h1>Heading 1</h1>
+    <h2>Heading 2</h2>
+    <h3>Heading 3</h3>
+    <h4>Heading 4</h4>
+    <h5>Heading 5</h5>
+    <h6>Heading 6</h6>
+
+    <footer>
+      <a href="#">Back to top ⬆</a>
+    </footer>
+    <script src="script.js" defer></script>
+  </body>
+</html>

docs/script.js

@@ -0,0 +1,88 @@
+'use strict'
+
+const localBase = './water.css/'
+
+const fileSizes = {
+  dark: 2.57,
+  light: 2.55,
+  auto: 3.27
+}
+
+const themeForm = document.getElementById('theme-form')
+const stylesheet = document.getElementById('js-stylesheet')
+const startupStylesheet = document.getElementById('js-startup-stylesheet')
+const productHunt = document.getElementById('product-hunt')
+const copyButton = document.getElementById('copy-button')
+const copyButtonFeedback = document.getElementById('copy-button-feedback')
+const linkSnippets = [].slice.call(document.querySelectorAll('#link-snippet-container > pre'))
+
+const table = {
+  fileName: document.getElementById('table-file-name'),
+  fileSize: document.getElementById('table-file-size'),
+  theme: document.getElementById('table-theme')
+}
+
+const prefersColorScheme = window.matchMedia('(prefers-color-scheme: light)')
+
+const updateProductHunt = (theme) => {
+  theme = theme || (prefersColorScheme.matches ? 'light' : 'dark')
+  productHunt.src = `https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=150490&theme=${theme}&period=daily`
+}
+
+const updateTheme = () => {
+  const theme = themeForm.querySelector('input[name="theme"]:checked').value
+
+  const fileName = `${theme === 'auto' ? 'water' : theme}.min.css`
+  const localUrl = `${localBase}${fileName}`
+
+  stylesheet.href = localUrl
+
+  for (const snippet of linkSnippets) {
+    snippet.hidden = snippet.id.indexOf(theme) === -1
+  }
+
+  table.fileName.innerText = fileName
+  table.fileSize.innerText = `${fileSizes[theme].toFixed(2)} kb`
+
+  if (theme === 'auto') {
+    updateProductHunt()
+    table.theme.innerHTML = `
+    Respects user-defined theme settings using <a style="--links: var(--code)" href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme" target="_blank" rel="noopener"><code>prefers-color-scheme</code></a>.<br>
+    Light in browsers where the theme settings can't be detected.
+    `
+  } else {
+    updateProductHunt(theme)
+    table.theme.innerText = `Theme is forced to ${theme}.`
+  }
+}
+
+themeForm.addEventListener('change', updateTheme)
+
+updateProductHunt()
+prefersColorScheme.addListener(() => {
+  if (themeForm.theme.value !== 'auto') return
+  updateProductHunt()
+})
+
+updateTheme()
+startupStylesheet.parentElement.removeChild(startupStylesheet)
+
+copyButton.addEventListener('click', () => {
+  const clipboard = navigator.clipboard || window.clipboard
+  const theme = themeForm.querySelector('input[name="theme"]:checked').value
+  const snippetText = document.querySelector(`#link-snippet-${theme} code`).textContent
+
+  clipboard.writeText(snippetText)
+    .then(() => { copyButtonFeedback.textContent = '✔' })
+    .catch(() => { copyButtonFeedback.textContent = '❌' })
+    .then(() => setTimeout(() => { copyButtonFeedback.textContent = '' }, 1000))
+})
+
+document.getElementById('dialog-trigger').addEventListener('click', () => {
+  document.getElementById('dialog-result').innerText = ''
+  document.getElementById('dialog').showModal()
+})
+
+document.getElementById('dialog').addEventListener('close', (event) => {
+  document.getElementById('dialog-result').innerText = `Your answer: ${event.target.returnValue}`
+})

docs/site.webmanifest

@@ -0,0 +1,20 @@
+{
+  "name": "Water.css",
+  "short_name": "Water.css",
+  "start_url": "./",
+  "icons": [
+    {
+      "src": "./icons/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "./icons/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

docs/style.css

@@ -0,0 +1,65 @@
+html {
+  scroll-behavior: smooth;
+}
+
+#product-hunt {
+  margin-top: 1rem;
+}
+
+#link-snippet-headline {
+  margin: 1rem 2.5rem 1rem 0;
+}
+
+/* Make the feedback Emoji appear next to the button */
+#copy-button {
+  position: relative;
+  margin-right: 2px;
+  overflow: visible;
+}
+
+#copy-button-feedback {
+  position: absolute;
+  left: -2rem;
+  display: inline-block;
+  transform: scale(1.3);
+}
+
+#link-snippet-container {
+  overflow: hidden;
+  display: grid;
+  display: -ms-grid;
+  -ms-grid-columns: 1fr;
+}
+
+#link-snippet-container > pre {
+  overflow: auto;
+  grid-column: 1;
+  grid-row: 1;
+  transition: transform 220ms cubic-bezier(0.175, 0.885, 0.32, 1) 220ms;
+}
+
+#link-snippet-container > pre[hidden] {
+  display: block;
+  visibility: hidden;
+  transform: scale(0);
+  transition: transform 220ms cubic-bezier(0.175, 0.885, 0.32, 1), visibility 0ms 220ms;
+}
+
+#theme-form > label:not(:last-of-type) {
+  margin-right: 1rem;
+}
+
+#version-info th {
+  width: 35%;
+}
+
+body > footer {
+  text-align: right;
+}
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+}

gulpfile.js

@@ -0,0 +1,139 @@
+const gulp = require('gulp')
+const postcss = require('gulp-postcss')
+const autoprefixer = require('autoprefixer')
+const cssnano = require('cssnano')
+const sourcemaps = require('gulp-sourcemaps')
+const bytediff = require('gulp-bytediff')
+const browserSync = require('browser-sync').create()
+const chalk = require('chalk')
+const rename = require('gulp-rename')
+const filter = require('gulp-filter')
+const flatten = require('gulp-flatten')
+const babel = require('gulp-babel')
+const terser = require('gulp-terser')
+const posthtml = require('gulp-posthtml')
+const htmlnano = require('htmlnano')
+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' },
+  styles: { src: 'src/builds/*.css', dest: 'out', watch: 'src/**/*.css' }
+}
+
+// https://stackoverflow.com/a/20732091
+const humanFileSize = (size) => {
+  const i = Math.floor(Math.log(size) / Math.log(1024))
+  return (size / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i]
+}
+
+const formatByteMessage = (source, data) => {
+  const prettyStartSize = humanFileSize(data.startSize)
+  let message = ''
+
+  if (data.startSize !== data.endSize) {
+    const change = data.savings > 0 ? 'saved' : 'gained'
+    const prettySavings = humanFileSize(Math.abs(data.savings))
+    let prettyEndSize = humanFileSize(data.endSize)
+
+    if (data.endSize > data.startSize) prettyEndSize = chalk.yellow(prettyEndSize)
+    if (data.endSize < data.startSize) prettyEndSize = chalk.green(prettyEndSize)
+
+    message = chalk`${change} ${prettySavings} (${prettyStartSize} -> {bold ${prettyEndSize}})`
+  } else message = chalk`kept original filesize. ({bold ${prettyStartSize}})`
+
+  return chalk`{cyan ${source.padStart(12, ' ')}}: {bold ${data.fileName}} ${message}`
+}
+
+const style = () => {
+  const startDiff = () => bytediff.start()
+  const endDiff = (source) => bytediff.stop((data) => formatByteMessage(source, data))
+
+  return (
+    gulp
+      .src(paths.styles.src)
+      .pipe(postcss([postcssImport(), postcssColorModFunction(), postcssInlineSvg()]))
+
+      .pipe(startDiff())
+      .pipe(postcss([postcssCssVariables({ preserve: true })]))
+      .pipe(endDiff('css variables'))
+
+      .pipe(startDiff())
+      .pipe(postcss([autoprefixer()]))
+      .pipe(endDiff('autoprefixer'))
+
+      .pipe(flatten()) // Put files in out/*, not out/builds/*
+      .pipe(gulp.dest(paths.styles.dest))
+
+      // <minifying>
+      .pipe(startDiff())
+      .pipe(postcss([cssnano({ preset: ['default', { svgo: { floatPrecision: 0 } }] })]))
+      .pipe(endDiff('minification'))
+      .pipe(rename({ suffix: '.min' }))
+      // </minifying>
+
+      .pipe(gulp.dest(paths.styles.dest))
+      .pipe(gulp.dest(paths.docs.dest + '/water.css'))
+
+      .pipe(sizereport({ gzip: true, total: false, title: 'SIZE REPORT' }))
+      .pipe(browserSync.stream())
+  )
+}
+
+const docs = () => {
+  const htmlOnly = filter('**/*.html', { restore: true })
+  const jsOnly = filter('**/*.js', { restore: true })
+  const cssOnly = filter('**/*.css', { restore: true })
+
+  return (
+    gulp
+      // Exclude all HTML files but index.html
+      .src(paths.docs.src, { ignore: '**/!(index).html' })
+
+      // * Process HTML *
+      .pipe(htmlOnly)
+      .pipe(posthtml([htmlnano()]))
+      .pipe(htmlOnly.restore)
+
+      // * Process JS *
+      .pipe(jsOnly)
+      .pipe(sourcemaps.init())
+      .pipe(babel({ presets: ['@babel/preset-env'] }))
+      .pipe(terser({ toplevel: true }))
+      .pipe(sourcemaps.write('.'))
+      .pipe(jsOnly.restore)
+
+      // * Process CSS *
+      .pipe(cssOnly)
+      .pipe(sourcemaps.init())
+      .pipe(postcss([autoprefixer(), cssnano()]))
+      .pipe(sourcemaps.write('.'))
+      .pipe(cssOnly.restore)
+
+      .pipe(gulp.dest(paths.docs.dest))
+  )
+}
+
+const browserReload = (done) => {
+  browserSync.reload()
+  return done()
+}
+
+const startDevServer = () => {
+  browserSync.init({ server: { baseDir: './out/docs' } })
+
+  gulp.watch(paths.styles.watch, gulp.series(style, browserReload))
+  gulp.watch(paths.docs.src, gulp.series(docs, browserReload))
+}
+
+const build = gulp.parallel(style, docs)
+const watch = gulp.series(build, startDevServer)
+
+module.exports.build = build
+module.exports.watch = watch

index.html

@@ -1,108 +0,0 @@
-<!DOCTYPE html>
-<html lang='en'>
-  <head>
-    <title>Water.css</title>
-    <link id='stylesheet' rel='stylesheet' href='dist/dark.css'>
-    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
-
-    <script async src='https://www.googletagmanager.com/gtag/js?id=UA-116663597-6'></script>
-    <script>
-      window.dataLayer = window.dataLayer || []
-      function gtag(){dataLayer.push(arguments)}
-      gtag('js', new Date())
-      gtag('config', 'UA-116663597-6')
-    </script>
-  </head>
-  <body>
-    <h1>Water.css</h1>
-    <p>
-      Water.css is a just-add-css collection of styles to make simple websites like this just a little bit nicer.
-      <a href='https://github.com/kognise/water.css'>Get it already!</a>
-    </p>
-    <p>
-      Now you can write your simple static site with nice semantic html, and Water.css will manage the styling for you.
-    </p>
-    <a href='https://www.producthunt.com/posts/water-css?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-water-css' target='_blank'><img id='ph' src='https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=150490&theme=dark' alt='Water.css - Make your tiny website just a little nicer | Product Hunt Embed' style='width: 250px; height: 54px;' width='250px' height='54px' /></a>
-
-    <h2>Goals</h2>
-    <ul>
-      <li>Responsive</li>
-      <li>Good code quality</li>
-      <li>Good browser support</li>
-      <li>Small size (&lt; 2kb)</li>
-      <li>Beautiful</li>
-      <li>No classes</li>
-    </ul>
-
-    <h2>Is it responsive?</h2>
-    <p>
-      <strong>Heck yeah!</strong> It doesn't include any fancy styles so it's easily mobile responsive.
-      Just add the famous <a href='https://www.w3schools.com/css/css_rwd_viewport.asp'>responsive viewport tag</a> and you'll be good to go!
-    </p>
-    <p>
-      In fact, try resizing this page. Everything flows super nicely as you'll see.
-    </p>
-    <button id='switch'>Switch theme</button>
-
-    <h2>Element demos</h2>
-    <p>
-      This is supposed to be a demo page so we need more elements!
-    </p>
-
-    <h3>Form elements</h3>
-    <form>
-      <label for='email'>Email</label>
-      <input type='email' name='email' id='email' placeholder='john.doe@gmail.com'>
-
-      <label for='id'>User id (read only)</label>
-      <input readonly name='id' id='id' value='04D6H89Z'>
-
-      <label for='disabled'>Random disabled input</label>
-      <input disabled name='disabled' id='disabled' placeholder='Because why not?'>
-
-      <label for='about'>About me</label>
-      <textarea name='about' id='about' placeholder='I am a textarea...'></textarea>
-
-      <input type='checkbox' name='remember' id='remember' checked>
-      <label for='remember'>Remember me</label>
-
-      <input type='submit'>
-    </form>
-
-    <h3>Code</h3>
-    <p>
-      Below is some code, you can copy it with <kbd>Ctrl-C</kbd>.
-      Did you know, <code>alert(1)</code> can show an alert in JavaScript!
-    </p>
-    <pre><code>// This logs a message to the console<br>console.log('Hello, world!')</code></pre>
-
-    <h3>Other</h3>
-    <p>Here's a horizontal rule and image because I don't know where else to put them.</p>
-    <img src='http://placekitten.com/408/287' alt='Example kitten'>
-    <hr>
-
-    <h3>Typography</h3>
-    <p>
-      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 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.
-      <strong>This is strong,</strong> this is normal, <b>this is just bold,</b> <em>and this is emphasized!</em> And heck, <a href='/'>here</a>'s a link.
-    </p>
-    <ul>
-      <li>Unordered list item 1</li>
-      <li>Unordered list item 2</li>
-      <li>Unordered list item 3</li>
-    </ul>
-    <ol>
-      <li>Ordered list item 1</li>
-      <li>Ordered list item 2</li>
-      <li>Ordered list item 3</li>
-    </ol>
-    <h1>Heading 1</h1>
-    <h2>Heading 2</h2>
-    <h3>Heading 3</h3>
-    <h4>Heading 4</h4>
-    <h5>Heading 5</h5>
-    <h6>Heading 6</h6>
-
-    <script src='script.js'></script>
-  </body>
-</html>

index.js

@@ -0,0 +1,2 @@
+const gulpfile = require('./gulpfile')
+gulpfile.watch()

package.json

@@ -1,16 +1,24 @@
 {
   "name": "water.css",
-  "version": "1.0.0",
+  "version": "2.1.1",
-  "description": "A just-add-css collection of styles to make simple websites just a little nicer.",
+  "description": "A drop-in collection of CSS styles to make simple websites just a little nicer",
-  "main": "index.js",
+  "main": "out/water.css",
   "scripts": {
-    "build": "node-sass src/ --output dist/ --output-style compressed",
+    "build": "gulp build",
-    "dev": "node dev.js"
+    "dev": "gulp watch",
+    "lint:js": "eslint bookmarklet/original.js docs/script.js docs/index.html gulpfile.js",
+    "lint:css": "stylelint src/**/*.css docs/style.css",
+    "lint": "yarn lint:js --fix && yarn lint:css --fix",
+    "accessibility": "yarn build && node accessibility.js",
+    "validate": "yarn lint:js && yarn lint:css && yarn accessibility"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/kognise/water.css.git"
   },
+  "publishConfig": {
+    "access": "public"
+  },
   "keywords": [
     "css",
     "css-framework",
@@ -24,10 +32,49 @@
   },
   "homepage": "https://github.com/kognise/water.css",
   "devDependencies": {
-    "express": "^4.16.4",
+    "@babel/core": "^7.4.5",
-    "fs-extra": "^7.0.1",
+    "@babel/preset-env": "^7.4.5",
-    "node-sass": "^4.11.0",
+    "@changesets/cli": "^2.7.2",
-    "socket.io": "^2.2.0",
+    "autoprefixer": "^9.5.1",
-    "chokidar": "^2.1.5"
+    "browser-sync": "^2.26.3",
-  }
+    "chalk": "^2.4.2",
+    "cssnano": "^4.1.10",
+    "eslint": "^7.1.0",
+    "eslint-config-standard": "^14.1.1",
+    "eslint-plugin-html": "^6.0.2",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-markdown": "^2.0.0-alpha.0",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prefer-arrow": "^1.2.1",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-standard": "^4.0.1",
+    "gulp": "^4.0.0",
+    "gulp-babel": "^8.0.0",
+    "gulp-bytediff": "^1.0.0",
+    "gulp-filter": "^5.1.0",
+    "gulp-flatten": "^0.4.0",
+    "gulp-postcss": "^8.0.0",
+    "gulp-posthtml": "^3.0.4",
+    "gulp-rename": "^1.4.0",
+    "gulp-sizereport": "^1.2.1",
+    "gulp-sourcemaps": "^2.6.5",
+    "gulp-terser": "^1.2.0",
+    "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",
+    "puppeteer": "^3.2.0",
+    "stylelint": "^13.5.0",
+    "stylelint-config-standard": "^20.0.0"
+  },
+  "browserslist": [
+    "defaults"
+  ],
+  "files": [
+    "out/*.css",
+    "LICENSE.md"
+  ]
 }

script.js

@@ -1,11 +0,0 @@
-document.getElementById('switch').addEventListener('click', () => {
-  const stylesheet = document.getElementById('stylesheet')
-  const ph = document.getElementById('ph')
-  if (stylesheet.getAttribute('href') === 'dist/dark.css') {
-    stylesheet.setAttribute('href', 'dist/light.css')
-    ph.src = ph.src.replace('theme=dark', 'theme=light')
-  } else {
-    stylesheet.setAttribute('href', 'dist/dark.css')
-    ph.src = ph.src.replace('theme=light', 'theme=dark')
-  }
-})

src/assets/select-arrow.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="62.5" width="116.9">
+    <path d="M115.3,1.6 C113.7,0 111.1,0 109.5,1.6 L58.5,52.7 L7.4,1.6 C5.8,0 3.2,0 1.6,1.6 C0,3.2 0,5.8 1.6,7.4 L55.5,61.3 C56.3,62.1 57.3,62.5 58.4,62.5 C59.4,62.5 60.5,62.1 61.3,61.3 L115.2,7.4 C116.9,5.8 116.9,3.2 115.3,1.6Z"/>
+</svg>

src/builds/dark.css

@@ -0,0 +1,6 @@
+/**
+ * Forced dark theme version
+ */
+
+@import '../variables-dark.css';
+@import '../parts/_core.css';

src/builds/light.css

@@ -0,0 +1,6 @@
+/**
+ * Forced light theme version
+ */
+
+@import '../variables-light.css';
+@import '../parts/_core.css';

src/builds/water.css

@@ -0,0 +1,9 @@
+/**
+ * Automatic version:
+ * Uses light theme by default but switches to dark theme
+ * if a system-wide theme preference is set on the user's device.
+ */
+
+@import '../variables-light.css';
+@import '../variables-dark.css' (prefers-color-scheme: dark);
+@import '../parts/_core.css';

src/dark.scss

@@ -1,18 +0,0 @@
-$background: #202b38 !default;
-$background-alt: #161f27 !default;
-
-$text-main: #dbdbdb !default;
-$text-bright: #ffffff !default;
-
-$links: #41adff !default;
-$focus: #0096bfab !default;
-$border: #dbdbdb !default;
-$code: #ffbe85 !default;
-
-$button-hover: #324759 !default;
-$animation-duration: 0.1s !default;
-
-$form-placeholder: #a9a9a9 !default;
-$form-text: #ffffff !default;
-
-@import 'parts/core';

src/light.scss

@@ -1,18 +0,0 @@
-$background: #ffffff !default;
-$background-alt: #efefef !default;
-
-$text-main: #363636 !default;
-$text-bright: #000000 !default;
-
-$links: #0076d1 !default;
-$focus: #0096bfab !default;
-$border: #dbdbdb !default;
-$code: #000000 !default;
-
-$button-hover: #dddddd !default;
-$animation-duration: 0.1s !default;
-
-$form-placeholder: #949494 !default;
-$form-text: #000000 !default;
-
-@import 'parts/core';

src/parts/_base.css

@@ -0,0 +1,27 @@
+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;
+  max-width: 800px;
+  margin: 20px auto;
+  padding: 0 10px;
+  word-wrap: break-word;
+  color: var(--text-main);
+  background: var(--background-body);
+  text-rendering: optimizeLegibility;
+}
+
+button,
+input,
+textarea {
+  transition:
+    background-color var(--animation-duration) linear,
+    border-color var(--animation-duration) linear,
+    color var(--animation-duration) linear,
+    box-shadow var(--animation-duration) linear,
+    transform var(--animation-duration) ease;
+}

src/parts/_base.scss

@@ -1,21 +0,0 @@
-body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  line-height: 1.4;
-
-  max-width: 800px;
-  margin: 20px auto;
-  padding: 0 10px;
-
-  color: $text-main;
-  background: $background;
-
-  text-rendering: optimizeLegibility;
-}
-
-button, input, textarea {
-  transition: background-color $animation-duration linear,
-              border-color $animation-duration linear,
-              color $animation-duration linear,
-              box-shadow $animation-duration linear,
-              transform $animation-duration ease;
-}

src/parts/_code.css

@@ -0,0 +1,29 @@
+code,
+samp,
+time {
+  background: var(--background);
+  color: var(--code);
+  padding: 2.5px 5px;
+  border-radius: 6px;
+  font-size: 1em;
+}
+
+pre > code {
+  padding: 10px;
+  display: block;
+  overflow-x: auto;
+}
+
+var {
+  color: var(--variable);
+  font-style: normal;
+  font-family: monospace;
+}
+
+kbd {
+  background: var(--background);
+  border: 1px solid var(--border);
+  border-radius: 2px;
+  color: var(--text-main);
+  padding: 2px 4px 2px 4px;
+}

src/parts/_code.scss

@@ -1,12 +0,0 @@
-code, kbd {
-  background: $background-alt;
-  color: $code;
-  padding: 5px;
-  border-radius: 6px;
-}
-
-pre > code {
-  padding: 10px;
-  display: block;
-  overflow-x: auto;
-}

src/parts/_core.css

@@ -0,0 +1,8 @@
+@import '_base.css';
+@import '_typography.css';
+@import '_forms.css';
+@import '_range.css';
+@import '_links.css';
+@import '_code.css';
+@import '_misc.css';
+@import '_print.css';

src/parts/_core.scss

@@ -1,6 +0,0 @@
-@import 'base';
-@import 'typography';
-@import 'forms';
-@import 'links';
-@import 'code';
-@import 'misc';

src/parts/_forms.css

@@ -0,0 +1,159 @@
+button,
+select,
+input[type='submit'],
+input[type='reset'],
+input[type='button'],
+input[type='checkbox'],
+input[type='range'],
+input[type='radio'] {
+  cursor: pointer;
+}
+
+input,
+select {
+  display: block;
+}
+
+[type='checkbox'],
+[type='radio'] {
+  display: initial;
+}
+
+input,
+button,
+textarea,
+select {
+  color: var(--form-text);
+  background-color: var(--background);
+  font-family: inherit;
+  font-size: inherit;
+  margin-right: 6px;
+  margin-bottom: 6px;
+  padding: 10px;
+  border: none;
+  border-radius: 6px;
+  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;
+  cursor: pointer;
+}
+
+input[type='checkbox'],
+input[type='radio'] {
+  height: 1em;
+  width: 1em;
+}
+
+input[type='radio'] {
+  border-radius: 100%;
+}
+
+input {
+  vertical-align: top;
+}
+
+label {
+  vertical-align: middle;
+  margin-bottom: 4px;
+  display: inline-block;
+}
+
+input:not([type='checkbox']):not([type='radio']),
+input[type='range'],
+select,
+button,
+textarea {
+  -webkit-appearance: none;
+}
+
+textarea {
+  display: block;
+  margin-right: 0;
+  box-sizing: border-box;
+  resize: vertical;
+}
+
+textarea:not([cols]) {
+  width: 100%;
+}
+
+textarea:not([rows]) {
+  min-height: 40px;
+  height: 140px;
+}
+
+select {
+  background: var(--background) var(--select-arrow) calc(100% - 12px) 50% / 12px no-repeat;
+  padding-right: 35px;
+}
+
+select::-ms-expand {
+  display: none;
+}
+
+select[multiple] {
+  padding-right: 10px;
+  background-image: none;
+  overflow-y: auto;
+}
+
+input:focus,
+select:focus,
+button:focus,
+textarea:focus {
+  box-shadow: 0 0 0 2px var(--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 {
+  transform: translateY(2px);
+}
+
+input:disabled,
+select:disabled,
+button:disabled,
+textarea:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+::placeholder {
+  color: var(--form-placeholder);
+}
+
+fieldset {
+  border: 1px var(--focus) solid;
+  border-radius: 6px;
+  margin: 0;
+  margin-bottom: 12px;
+  padding: 10px;
+}
+
+legend {
+  font-size: 0.9em;
+  font-weight: 600;
+}

src/parts/_forms.scss

@@ -1,71 +0,0 @@
-button,
-input[type='submit'],
-input[type='button'],
-input[type='checkbox'] {
-  cursor: pointer;
-}
-
-input:not([type='checkbox']), select {
-  display: block;
-}
-
-input, select, button, textarea {
-  color: $form-text;
-  background-color: $background-alt;
-
-  font-family: inherit;
-  font-size: inherit;
-
-  margin-right: 6px;
-  margin-bottom: 6px;
-  padding: 10px;
-
-  border: none;
-  border-radius: 6px;
-  outline: none;
-}
-
-input:not([type='checkbox']), select, button, textarea {
-  -webkit-appearance: none;
-}
-
-textarea {
-  margin-right: 0;
-  width: 100%;
-  box-sizing: border-box;
-  resize: vertical;
-}
-
-button, input[type='submit'], input[type='button'] {
-  padding-right: 30px;
-  padding-left: 30px;
-}
-
-button:hover,
-input[type='submit']:hover,
-input[type='button']:hover {
-  background: $button-hover;
-}
-
-input:focus,
-select:focus,
-button:focus,
-textarea:focus {
-  box-shadow: 0 0 0 2px $focus;
-}
-
-input[type='checkbox']:active,
-input[type='submit']:active,
-input[type='button']:active,
-button:active {
-  transform: translateY(2px);
-}
-
-input:disabled {
-  cursor: not-allowed;
-  opacity: .5;
-}
-
-::placeholder {
-  color: $form-placeholder;
-}

src/parts/_links.css

@@ -1,8 +1,8 @@
 a {
   text-decoration: none;
-  color: $links;
+  color: var(--links);
 }
 
 a:hover {
   text-decoration: underline;
-}
+}

src/parts/_misc.css

@@ -0,0 +1,150 @@
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+hr {
+  border: none;
+  border-top: 1px solid var(--border);
+}
+
+table {
+  border-collapse: collapse;
+  margin-bottom: 10px;
+  width: 100%;
+  table-layout: fixed;
+}
+
+table caption {
+  text-align: left;
+}
+
+td,
+th {
+  padding: 6px;
+  text-align: left;
+  vertical-align: top;
+  word-wrap: break-word;
+}
+
+thead {
+  border-bottom: 1px solid var(--border);
+}
+
+tfoot {
+  border-top: 1px solid var(--border);
+}
+
+tbody tr:nth-child(even) {
+  background-color: var(--background);
+}
+
+tbody tr:nth-child(even) button {
+  background-color: var(--background-alt);
+}
+
+tbody tr:nth-child(even) button:hover {
+  background-color: var(--background-body);
+}
+
+::-webkit-scrollbar {
+  height: 10px;
+  width: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--background);
+  border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--scrollbar-thumb);
+  border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--scrollbar-thumb-hover);
+}
+
+::selection {
+  background-color: var(--selection);
+  color: var(--text-bright);
+}
+
+details {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  background-color: var(--background-alt);
+  padding: 10px 10px 0;
+  margin: 1em 0;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+details[open] {
+  padding: 10px;
+}
+
+details > :last-child {
+  margin-bottom: 0;
+}
+
+details[open] summary {
+  margin-bottom: 10px;
+}
+
+summary {
+  display: list-item;
+  background-color: var(--background);
+  padding: 10px;
+  margin: -10px -10px 0;
+  cursor: pointer;
+  outline: none;
+}
+
+summary:hover,
+summary:focus {
+  text-decoration: underline;
+}
+
+details > :not(summary) {
+  margin-top: 0;
+}
+
+summary::-webkit-details-marker {
+  color: var(--text-main);
+}
+
+dialog {
+  background-color: var(--background-alt);
+  color: var(--text-main);
+  border: none;
+  border-radius: 6px;
+  border-color: var(--border);
+  padding: 10px 30px;
+}
+
+dialog > header:first-child {
+  background-color: var(--background);
+  border-radius: 6px 6px 0 0;
+  margin: -10px -30px 10px;
+  padding: 10px;
+  text-align: center;
+}
+
+dialog::backdrop {
+  background: #0000009c;
+  backdrop-filter: blur(4px);
+}
+
+footer {
+  border-top: 1px solid var(--border);
+  padding-top: 10px;
+  color: var(--text-muted);
+}
+
+body > footer {
+  margin-top: 40px;
+}

src/parts/_misc.scss

@@ -1,8 +0,0 @@
-img {
-  max-width: 100%;
-}
-
-hr {
-  border: none;
-  border-top: 1px solid $border;
-}

src/parts/_print.css

@@ -0,0 +1,53 @@
+@media print {
+  body,
+  pre,
+  code,
+  summary,
+  details,
+  button,
+  input,
+  textarea {
+    background-color: #fff;
+  }
+
+  button,
+  input,
+  textarea {
+    border: 1px solid #000;
+  }
+
+  body,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  pre,
+  code,
+  button,
+  input,
+  textarea,
+  footer,
+  summary,
+  strong {
+    color: #000;
+  }
+
+  summary::marker {
+    color: #000;
+  }
+
+  summary::-webkit-details-marker {
+    color: #000;
+  }
+
+  tbody tr:nth-child(even) {
+    background-color: #f2f2f2;
+  }
+
+  a {
+    color: #00f;
+    text-decoration: underline;
+  }
+}

src/parts/_range.css

@@ -0,0 +1,87 @@
+input[type='range'] {
+  margin: 10px 0;
+  padding: 10px 0;
+  background: transparent;
+}
+
+input[type='range']:focus {
+  outline: none;
+}
+
+input[type='range']::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 9.5px;
+  transition: 0.2s;
+  background: var(--background);
+  border-radius: 3px;
+}
+
+input[type='range']::-webkit-slider-thumb {
+  box-shadow: 0 1px 1px #000, 0 0 1px #0d0d0d;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: var(--border);
+  -webkit-appearance: none;
+  margin-top: -7px;
+}
+
+input[type='range']:focus::-webkit-slider-runnable-track {
+  background: var(--background);
+}
+
+input[type='range']::-moz-range-track {
+  width: 100%;
+  height: 9.5px;
+  transition: 0.2s;
+  background: var(--background);
+  border-radius: 3px;
+}
+
+input[type='range']::-moz-range-thumb {
+  box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: var(--border);
+}
+
+input[type='range']::-ms-track {
+  width: 100%;
+  height: 9.5px;
+  background: transparent;
+  border-color: transparent;
+  border-width: 16px 0;
+  color: transparent;
+}
+
+input[type='range']::-ms-fill-lower {
+  background: var(--background);
+  border: 0.2px solid #010101;
+  border-radius: 3px;
+  box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
+}
+
+input[type='range']::-ms-fill-upper {
+  background: var(--background);
+  border: 0.2px solid #010101;
+  border-radius: 3px;
+  box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
+}
+
+input[type='range']::-ms-thumb {
+  box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
+  border: 1px solid #000;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: var(--border);
+}
+
+input[type='range']:focus::-ms-fill-lower {
+  background: var(--background);
+}
+
+input[type='range']:focus::-ms-fill-upper {
+  background: var(--background);
+}

src/parts/_typography.css

@@ -0,0 +1,89 @@
+h1 {
+  font-size: 2.2em;
+  margin-top: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-bottom: 12px;
+  margin-top: 24px;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+strong {
+  color: var(--text-bright);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+b,
+strong,
+th {
+  font-weight: 600;
+}
+
+q::before {
+  content: none;
+}
+
+q::after {
+  content: none;
+}
+
+blockquote,
+q {
+  border-left: 4px solid var(--focus);
+  margin: 1.5em 0;
+  padding: 0.5em 1em;
+  font-style: italic;
+}
+
+blockquote > footer {
+  font-style: normal;
+  border: 0;
+}
+
+blockquote cite {
+  font-style: normal;
+}
+
+address {
+  font-style: normal;
+}
+
+a[href^='mailto\:']::before {
+  content: '📧 ';
+}
+
+a[href^='tel\:']::before {
+  content: '📞 ';
+}
+
+a[href^='sms\:']::before {
+  content: '💬 ';
+}
+
+mark {
+  background-color: var(--highlight);
+  border-radius: 2px;
+  padding: 0 2px 0 2px;
+  color: #000;
+}
+
+a > code,
+a > strong {
+  color: inherit;
+}

src/parts/_typography.scss

@@ -1,16 +0,0 @@
-h1 {
-  font-size: 2.2em;
-  margin-top: 0;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  margin-bottom: 12px;
-}
-
-h1, h2, h3, h4, h5, h6, strong {
-  color: $text-bright;
-}
-
-h1, h2, h3, h4, h5, h6, b, strong, th {
-  font-weight: 600;
-}

src/variables-dark.css

@@ -0,0 +1,23 @@
+:root {
+  --background-body: #202b38;
+  --background: #161f27;
+  --background-alt: #1a242f;
+  --selection: #1c76c5;
+  --text-main: #dbdbdb;
+  --text-bright: #fff;
+  --text-muted: #a9b1ba;
+  --links: #41adff;
+  --focus: #0096bfab;
+  --border: #526980;
+  --code: #ffbe85;
+  --animation-duration: 0.1s;
+  --button-base: #0c151c;
+  --button-hover: #040a0f;
+  --scrollbar-thumb: var(--button-hover);
+  --scrollbar-thumb-hover: color-mod(var(--scrollbar-thumb) lightness(-30%));
+  --form-placeholder: #a9a9a9;
+  --form-text: #fff;
+  --variable: #d941e2;
+  --highlight: #efdb43;
+  --select-arrow: svg-load('./assets/select-arrow.svg', fill: #efefef);
+}

src/variables-light.css

@@ -0,0 +1,23 @@
+:root {
+  --background-body: #fff;
+  --background: #efefef;
+  --background-alt: #f7f7f7;
+  --selection: #9e9e9e;
+  --text-main: #363636;
+  --text-bright: #000;
+  --text-muted: #70777f;
+  --links: #0076d1;
+  --focus: #0096bfab;
+  --border: #dbdbdb;
+  --code: #000;
+  --animation-duration: 0.1s;
+  --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: #1d1d1d;
+  --variable: #39a33c;
+  --highlight: #ff0;
+  --select-arrow: svg-load('./assets/select-arrow.svg', fill: #161f27);
+}