Full Code of kognise/water.css for AI

Repository: kognise/water.css
Branch: master
Commit: d950cbc9f860
Files: 39
Total size: 65.8 KB

Directory structure:
gitextract_rdd9wpy1/

├── .changeset/
│   ├── README.md
│   ├── config.json
│   └── six-owls-punch.md
├── .editorconfig
├── .eslintrc.json
├── .github/
│   ├── CODE_OF_CONDUCT.md
│   └── CONTRIBUTING.md
├── .gitignore
├── .huskyrc.json
├── .prettierignore
├── .stylelintrc.json
├── .vscode/
│   └── extensions.json
├── CHANGELOG.md
├── LICENSE.md
├── README.md
├── accessibility.js
├── bookmarklet/
│   └── original.js
├── docs/
│   ├── icons/
│   │   └── browserconfig.xml
│   ├── index.html
│   ├── script.js
│   ├── site.webmanifest
│   └── style.css
├── gulpfile.js
├── index.js
├── package.json
└── src/
    ├── builds/
    │   ├── dark.css
    │   ├── light.css
    │   └── water.css
    ├── parts/
    │   ├── _base.css
    │   ├── _code.css
    │   ├── _core.css
    │   ├── _forms.css
    │   ├── _links.css
    │   ├── _misc.css
    │   ├── _print.css
    │   ├── _range.css
    │   └── _typography.css
    ├── variables-dark.css
    └── variables-light.css

================================================
FILE CONTENTS
================================================

================================================
FILE: .changeset/README.md
================================================
# 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)


================================================
FILE: .changeset/config.json
================================================
{
  "$schema": "https://unpkg.com/@changesets/config@1.1.0/schema.json",
  "changelog": "@changesets/cli/changelog",
  "commit": false,
  "linked": [],
  "access": "restricted",
  "baseBranch": "master",
  "updateInternalDependencies": "patch"
}

================================================
FILE: .changeset/six-owls-punch.md
================================================
---
"water.css": patch
---

Added a theme toggle button to the bookmarklet


================================================
FILE: .editorconfig
================================================
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

================================================
FILE: .eslintrc.json
================================================
{
  "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"]
  }
}


================================================
FILE: .github/CODE_OF_CONDUCT.md
================================================
# 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


================================================
FILE: .github/CONTRIBUTING.md
================================================
# 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"


================================================
FILE: .gitignore
================================================
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*

# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# nyc test coverage
.nyc_output

# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# TypeScript v1 declaration files
typings/

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env
.env.test

# parcel-bundler cache (https://parceljs.org/)
.cache

# next.js build output
.next

# nuxt.js build output
.nuxt

# vuepress build output
.vuepress/dist

# Serverless directories
.serverless/

# FuseBox cache
.fusebox/

# DynamoDB Local files
.dynamodb/

# IntelliJ IDE
.idea/

# Output of yarn build
out/
dist/

================================================
FILE: .huskyrc.json
================================================
{
  "hooks": {
    "pre-commit": "yarn validate"
  }
}

================================================
FILE: .prettierignore
================================================
*

================================================
FILE: .stylelintrc.json
================================================
{
  "extends": "stylelint-config-standard",
  "rules": {
    "no-descending-specificity": null
  }
}

================================================
FILE: .vscode/extensions.json
================================================
{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "stylelint.vscode-stylelint"
  ]
}

================================================
FILE: CHANGELOG.md
================================================
# 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


================================================
FILE: LICENSE.md
================================================
# The MIT License (MIT)

Copyright © 2019 Kognise

Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the “Software”), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:

The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.


================================================
FILE: README.md
================================================
<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>

<br>

<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>

[![Water.css](assets/logo.svg)](https://watercss.kognise.dev/)

<br>

## Goals

- Responsive
- Themeable
- Good browser support (works on my old kindle's browser :P)
- Tiny size
- Beautiful
- 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 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.

## Who?

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.

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>`:

### 🌙/☀ 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/water.css@2/out/water.min.css" />
<style>
  :root {
    --links: red;
  }
</style>
```

If you want to change a value for dark or light mode only, use a media query like this:

```html
<style>
  :root {
    --links: blue; /* Always applied */
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --links: yellow; /* Only applied in dark mode (overrides blue) */
    }
  }
</style>
```

### Compiling your own theme

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!

Check out our [Contributing Guide](.github/CONTRIBUTING.md) to learn how to get started.  
And thanks for taking the time to contribute! :)


================================================
FILE: accessibility.js
================================================
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()


================================================
FILE: bookmarklet/original.js
================================================
// 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)


================================================
FILE: docs/icons/browserconfig.xml
================================================
<?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>


================================================
FILE: docs/index.html
================================================
<!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>


================================================
FILE: docs/script.js
================================================
'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}`
})


================================================
FILE: docs/site.webmanifest
================================================
{
  "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"
}


================================================
FILE: docs/style.css
================================================
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;
}


================================================
FILE: gulpfile.js
================================================
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


================================================
FILE: index.js
================================================
const gulpfile = require('./gulpfile')
gulpfile.watch()


================================================
FILE: package.json
================================================
{
  "name": "water.css",
  "version": "2.1.1",
  "description": "A drop-in collection of CSS styles to make simple websites just a little nicer",
  "main": "out/water.css",
  "scripts": {
    "build": "gulp build",
    "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",
    "simple",
    "minimal"
  ],
  "author": "Kognise",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/kognise/water.css/issues"
  },
  "homepage": "https://github.com/kognise/water.css",
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "@changesets/cli": "^2.7.2",
    "autoprefixer": "^9.5.1",
    "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"
  ]
}


================================================
FILE: src/builds/dark.css
================================================
/**
 * Forced dark theme version
 */

@import '../variables-dark.css';
@import '../parts/_core.css';


================================================
FILE: src/builds/light.css
================================================
/**
 * Forced light theme version
 */

@import '../variables-light.css';
@import '../parts/_core.css';


================================================
FILE: src/builds/water.css
================================================
/**
 * 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';


================================================
FILE: src/parts/_base.css
================================================
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;
}


================================================
FILE: src/parts/_code.css
================================================
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;
}


================================================
FILE: src/parts/_core.css
================================================
@import '_base.css';
@import '_typography.css';
@import '_forms.css';
@import '_range.css';
@import '_links.css';
@import '_code.css';
@import '_misc.css';
@import '_print.css';


================================================
FILE: src/parts/_forms.css
================================================
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;
}


================================================
FILE: src/parts/_links.css
================================================
a {
  text-decoration: none;
  color: var(--links);
}

a:hover {
  text-decoration: underline;
}


================================================
FILE: src/parts/_misc.css
================================================
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;
}


================================================
FILE: src/parts/_print.css
================================================
@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;
  }
}


================================================
FILE: src/parts/_range.css
================================================
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);
}


================================================
FILE: src/parts/_typography.css
================================================
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;
}


================================================
FILE: src/variables-dark.css
================================================
: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);
}


================================================
FILE: src/variables-light.css
================================================
: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);
}