From f5f4c73454a8a3a946d75787ffe33ec6815bb428 Mon Sep 17 00:00:00 2001 From: Miriam Suzanne Date: Fri, 29 Nov 2019 10:42:41 -0800 Subject: [PATCH] Various updates for beta.8 --- .sassdocrc | 4 +- CHANGELOG.md | 17 ++ CONTRIBUTING.md | 43 ++++- LICENSE | 33 ---- LICENSE.md | 45 +++++ README.md | 7 +- css/ccs.css | 161 +++++++++------- css/ccs.css.map | 2 +- package.json | 4 +- sass/config/_colors.scss | 25 +++ sass/partials/_colors.scss | 39 +++- sass/partials/_index.scss | 11 +- sass/partials/_menu.scss | 12 +- sass/partials/_modes.scss | 25 +++ sass/partials/_palettes.scss | 55 ++---- sass/partials/_root.scss | 19 +- site/css/styles.css | 362 ++++++++++++++++++++--------------- site/css/styles.css.map | 2 +- site/sass/_ccs.scss | 1 + site/sass/_menu.scss | 4 - site/sass/_theme.scss | 4 +- 21 files changed, 548 insertions(+), 327 deletions(-) delete mode 100644 LICENSE create mode 100644 LICENSE.md diff --git a/.sassdocrc b/.sassdocrc index 6e89f87..5aae43a 100644 --- a/.sassdocrc +++ b/.sassdocrc @@ -19,8 +19,8 @@ herman: path: CHANGELOG.md - name: 'Contributing' path: CONTRIBUTING.md - - name: 'License' - path: LICENSE + - name: 'Hipocratic MIT License' + path: LICENSE.md extraLinks: - name: 'Demo' url: 'https://cascading-colors.netlify.com/' diff --git a/CHANGELOG.md b/CHANGELOG.md index bc97597..df66c52 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,22 @@ # Changelog +## 0.1.0-beta.8 - 2019/11/29 + +- BREAKING: Set defaults on `background-color` + rather than `background` shorthand +- BREAKING: `--ccs-custom-display` and `--ccs-field-display` variables + for more customized control of CCS menu field display +- BREAKING: Set `background-color` and `color` on all `[data-ccs-colors]`, + with both fallback values and variables defaulting to + `--ccs-neutral--(fg/bg)-full` +- BREAKING: Re-order the output from general to specific +- NEW: `--ccs-background` and `--ccs-color` override the default + `[data-ccs-colors]` background and text +- NEW: `$neutral-hue` and `--ccs-neutral--config` for setting neutral hues +- NEW: `$neutral-saturation` and `--ccs-s-neutral--config` + override contrast-based saturation on neutral palette +- MOVE: `LICENSE` => `LICENSE.md` (and fix in `package.json`) + ## 0.1.0-beta.7 - 2019/10/9 - BREAKING: rename `[data-ccs="*-select"]` attributes diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 378f7e2..e69fc30 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,3 +1,44 @@ # Contributing -... +Run `yarn` to install dependencies… + +## Organization + +- `css/`: GENERATED CSS for use without a build step +- `docs/`: GENERATED SassDoc/Herman documentation +- `sass/`: the tool itself + - `config/`: all the use-defined variables + - `partials/`: all the logic and output + - `_ccs.scss`: forwards the combined Sass module + - `_output.scss`: generates the default CSS output +- `site/`: Styles for the demo site (also used for testing) +- `_index.scss`: Root-level index file for importing the module + +## Development + +The following scripts can help you work: + +- `yarn build-sass`: compiles the `output` file to `css/ccs.css` +- `yarn build-docs`: compiles SassDoc/Herman documentation +- `yarn build-js`: compiles `dist.js` for packaging +- `yarn build-site`: compiles the demo site styles +- `yarn build` or `yarn commit`: all the build steps at once +- `yarn watch`: a watcher for the site styles + +## Process + +1. Create a new branch for each feature/bug being addressed +2. Make any changes required +3. Update inline documentation as you go +4. Document changes in [CHANGELOG.md](./CHANGELOG.md) +5. Run `yarn commit` +6. Commit your changes +7. Create a Pull Request on GitHub + +## Release + +1. Update `package.json` +2. Run `yarn commit` to update generated docs +3. Commit and push changes +4. Create release through GitHub UI +5. Pull changes, and `npm publish` diff --git a/LICENSE b/LICENSE deleted file mode 100644 index 7971634..0000000 --- a/LICENSE +++ /dev/null @@ -1,33 +0,0 @@ -Hippocratic License - -Copyright (c) 2019 Miriam Suzanne - -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 may not be used by individuals, corporations, governments, or - other groups for systems or activities that actively and knowingly endanger, - harm, or otherwise threaten the physical, mental, economic, or general - well-being of individuals or groups in violation of the United Nations - Universal Declaration of Human Rights - (https://www.un.org/en/universal-declaration-human-rights/). - - -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. - -This license is derived from the MIT License, as amended to limit the impact -of the unethical use of open source software. - diff --git a/LICENSE.md b/LICENSE.md new file mode 100644 index 0000000..cf32b85 --- /dev/null +++ b/LICENSE.md @@ -0,0 +1,45 @@ +Copyright 2019 OddBird + +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. + +* No Harm: The software may not be used by anyone for systems or activities + that actively and knowingly endanger, harm, or otherwise threaten + the physical, mental, economic, or general well-being + of other individuals or groups, + in violation of the United Nations Universal Declaration of Human Rights + (https://www.un.org/en/universal-declaration-human-rights/). + +* Services: If the Software is used to provide a service to others, + the licensee shall, as a condition of use, require those others + not to use the service in any way that violates the No Harm clause above. + +* Enforceability: If any portion or provision of this License shall + to any extent be declared illegal or unenforceable + by a court of competent jurisdiction, then the remainder of this License, + or the application of such portion or provision + in circumstances other than those as to which + it is so declared illegal or unenforceable, shall not be affected thereby, + and each portion and provision of this Agreement + shall be valid and enforceable to the fullest extent permitted by law. + +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. + +This Hippocratic License is an Ethical Source license +(https://ethicalsource.dev) derived from the MIT License, +amended to limit the impact of the unethical use of open source software. diff --git a/README.md b/README.md index 612ded8..dbfbd63 100644 --- a/README.md +++ b/README.md @@ -82,11 +82,11 @@ and fallback values for both modes: ```scss // fallback values, in case variables are not supported [data-ccs='root'] { - background: $fallback-light; + background-color: $fallback-light; color: $fallback-dark; @media (prefers-color-scheme: dark) { - background: $fallback-dark; + background-color: $fallback-dark; color: $fallback-light; } } @@ -197,9 +197,6 @@ using the `[data-ccs-theme]` attribute: [data-ccs-theme='triad'] { /* triad logic */ } -[data-ccs-theme='adjacent'] { - /* adjacent logic */ -} ``` ### Sass Configuration diff --git a/css/ccs.css b/css/ccs.css index 2c7c946..247910f 100644 --- a/css/ccs.css +++ b/css/ccs.css @@ -1,74 +1,63 @@ -[data-ccs-colors] { - --ccs-step: calc(var(--ccs-contrast) / 4); - --ccs-l--bg1: calc(var(--ccs-l) + var(--ccs-step) * 1 * var(--ccs-mode)); - --ccs-l--fg1: calc(var(--ccs-l) - var(--ccs-step) * 1 * var(--ccs-mode)); - --ccs-s--fg1: calc(var(--ccs-s) - var(--ccs-step) * 1); - --ccs-s--bg1: calc(var(--ccs-s) - var(--ccs-fade-background) - var(--ccs-step) * 1); - --ccs-prime--fg1: hsl(var(--ccs-h--prime), var(--ccs-s--fg1), var(--ccs-l--fg1)); - --ccs-prime--bg1: hsl(var(--ccs-h--prime), var(--ccs-s--bg1), var(--ccs-l--bg1)); - --ccs-accent--fg1: hsl(var(--ccs-h--accent), var(--ccs-s--fg1), var(--ccs-l--fg1)); - --ccs-accent--bg1: hsl(var(--ccs-h--accent), var(--ccs-s--bg1), var(--ccs-l--bg1)); - --ccs-neutral--fg1: hsl(var(--ccs-h--neutral), var(--ccs-s--bg-contrast), var(--ccs-l--fg1)); - --ccs-neutral--bg1: hsl(var(--ccs-h--neutral), var(--ccs-s--bg-contrast), var(--ccs-l--bg1)); - --ccs-l--bg2: calc(var(--ccs-l) + var(--ccs-step) * 2 * var(--ccs-mode)); - --ccs-l--fg2: calc(var(--ccs-l) - var(--ccs-step) * 2 * var(--ccs-mode)); - --ccs-s--fg2: calc(var(--ccs-s) - var(--ccs-step) * 2); - --ccs-s--bg2: calc(var(--ccs-s) - var(--ccs-fade-background) - var(--ccs-step) * 2); - --ccs-prime--fg2: hsl(var(--ccs-h--prime), var(--ccs-s--fg2), var(--ccs-l--fg2)); - --ccs-prime--bg2: hsl(var(--ccs-h--prime), var(--ccs-s--bg2), var(--ccs-l--bg2)); - --ccs-accent--fg2: hsl(var(--ccs-h--accent), var(--ccs-s--fg2), var(--ccs-l--fg2)); - --ccs-accent--bg2: hsl(var(--ccs-h--accent), var(--ccs-s--bg2), var(--ccs-l--bg2)); - --ccs-neutral--fg2: hsl(var(--ccs-h--neutral), var(--ccs-s--bg-contrast), var(--ccs-l--fg2)); - --ccs-neutral--bg2: hsl(var(--ccs-h--neutral), var(--ccs-s--bg-contrast), var(--ccs-l--bg2)); - --ccs-l--bg3: calc(var(--ccs-l) + var(--ccs-step) * 3 * var(--ccs-mode)); - --ccs-l--fg3: calc(var(--ccs-l) - var(--ccs-step) * 3 * var(--ccs-mode)); - --ccs-s--fg3: calc(var(--ccs-s) - var(--ccs-step) * 3); - --ccs-s--bg3: calc(var(--ccs-s) - var(--ccs-fade-background) - var(--ccs-step) * 3); - --ccs-prime--fg3: hsl(var(--ccs-h--prime), var(--ccs-s--fg3), var(--ccs-l--fg3)); - --ccs-prime--bg3: hsl(var(--ccs-h--prime), var(--ccs-s--bg3), var(--ccs-l--bg3)); - --ccs-accent--fg3: hsl(var(--ccs-h--accent), var(--ccs-s--fg3), var(--ccs-l--fg3)); - --ccs-accent--bg3: hsl(var(--ccs-h--accent), var(--ccs-s--bg3), var(--ccs-l--bg3)); - --ccs-neutral--fg3: hsl(var(--ccs-h--neutral), var(--ccs-s--bg-contrast), var(--ccs-l--fg3)); - --ccs-neutral--bg3: hsl(var(--ccs-h--neutral), var(--ccs-s--bg-contrast), var(--ccs-l--bg3)); - --ccs-l--bg4: calc(var(--ccs-l) + var(--ccs-step) * 4 * var(--ccs-mode)); - --ccs-l--fg4: calc(var(--ccs-l) - var(--ccs-step) * 4 * var(--ccs-mode)); - --ccs-s--fg4: calc(var(--ccs-s) - var(--ccs-step) * 4); - --ccs-s--bg4: calc(var(--ccs-s) - var(--ccs-fade-background) - var(--ccs-step) * 4); - --ccs-prime--fg4: hsl(var(--ccs-h--prime), var(--ccs-s--fg4), var(--ccs-l--fg4)); - --ccs-prime--bg4: hsl(var(--ccs-h--prime), var(--ccs-s--bg4), var(--ccs-l--bg4)); - --ccs-accent--fg4: hsl(var(--ccs-h--accent), var(--ccs-s--fg4), var(--ccs-l--fg4)); - --ccs-accent--bg4: hsl(var(--ccs-h--accent), var(--ccs-s--bg4), var(--ccs-l--bg4)); - --ccs-neutral--fg4: hsl(var(--ccs-h--neutral), var(--ccs-s--bg-contrast), var(--ccs-l--fg4)); - --ccs-neutral--bg4: hsl(var(--ccs-h--neutral), var(--ccs-s--bg-contrast), var(--ccs-l--bg4)); -} - [data-ccs=root] { --ccs-mode--os: 1; - background: #f3f2f2; - color: #0d0c0d; } @media (prefers-color-scheme: dark) { [data-ccs=root] { --ccs-mode--os: -1; - background: #0d0c0d; + } +} + +[data-ccs-colors] { + background-color: #f3f2f2; + color: #0d0c0d; +} +@media (prefers-color-scheme: dark) { + [data-ccs-colors] { + background-color: #0d0c0d; color: #f3f2f2; } } +[data-ccs-colors=invert] { + --ccs-mode: calc(-1 * var(--ccs-mode--cascade, 1)); + background-color: #0d0c0d; + color: #f3f2f2; +} +@media (prefers-color-scheme: dark) { + [data-ccs-colors=invert] { + background-color: #f3f2f2; + color: #0d0c0d; + } +} + +[data-ccs-colors=light] { + --ccs-mode--html: 1; + background-color: #f3f2f2; + color: #0d0c0d; +} + +[data-ccs-colors=dark] { + --ccs-mode--html: -1; + background-color: #0d0c0d; + color: #f3f2f2; +} + [data-ccs-colors] { --ccs-h--prime: var(--ccs-prime--user, var(--ccs-prime--theme, var(--ccs-prime--config, 330))); --ccs-h--accent: var(--ccs-accent--theme, var(--ccs-accent--config, var(--ccs-h--prime))); - --ccs-h--neutral: var(--ccs-neutral--theme, var(--ccs-h--prime)); + --ccs-h--neutral: var(--ccs-neutral--theme, var(--ccs-neutral--config, var(--ccs-h--prime))); --ccs-contrast--user-percent: calc(var(--ccs-contrast--user) * 1%); --ccs-contrast: var(--ccs-contrast--user-percent, var(--ccs-contrast--theme, var(--ccs-contrast-config, 45%))); --ccs-l--user-percent: calc(var(--ccs-l--user) * 1%); --ccs-l: var(--ccs-l--user-percent, var(--ccs-l--theme, var(--ccs-lightness--config, 50%))); --ccs-l--fg-contrast: calc(var(--ccs-l) + var(--ccs-contrast) * var(--ccs-mode--invert)); --ccs-l--bg-contrast: calc(var(--ccs-l) + var(--ccs-contrast) * var(--ccs-mode)); + --ccs-fade-background: var(--ccs-fade-background--theme, var(--ccs-fade-background--config, 0%)); --ccs-s--user-percent: calc(var(--ccs-s--user) * 1%); --ccs-s: var(--ccs-s--user-percent, var(--ccs-s--theme, var(--ccs-saturation--config, 50%))); --ccs-s--fg-contrast: calc(var(--ccs-s) - var(--ccs-contrast) * 0.75); --ccs-s--bg-contrast: calc(var(--ccs-s--fg-contrast) - var(--ccs-fade-background)); + --ccs-s--neutral: var(--ccs-s-neutral--theme, var(--ccs-s-neutral--config, var(--ccs-s--bg-contrast))); --ccs-mode--cascade: var(--ccs-mode--user, var(--ccs-mode--html, var(--ccs-mode--os, 1))); --ccs-mode: var(--ccs-mode--cascade, 1); --ccs-mode--invert: calc(-1 * var(--ccs-mode)); @@ -106,31 +95,21 @@ ); --ccs-neutral: hsl( var(--ccs-h--neutral), - var(--ccs-s--bg-contrast), + var(--ccs-s--neutral), var(--ccs-l) ); --ccs-neutral--fg-full: hsl( var(--ccs-h--neutral), - var(--ccs-s--fg-contrast), + var(--ccs-s--neutral), var(--ccs-l--fg-contrast) ); --ccs-neutral--bg-full: hsl( var(--ccs-h--neutral), - var(--ccs-s--bg-contrast), + var(--ccs-s--neutral), var(--ccs-l--bg-contrast) ); -} - -[data-ccs-colors=invert] { - --ccs-mode: calc(-1 * var(--ccs-mode--cascade, 1)); -} - -[data-ccs-colors=light] { - --ccs-mode--html: 1; -} - -[data-ccs-colors=dark] { - --ccs-mode--html: -1; + background-color: var(--ccs-background, var(--ccs-neutral--bg-full)); + color: var(--ccs-color, var(--ccs-neutral--fg-full)); } [data-ccs-theme=complement] { @@ -150,24 +129,68 @@ --ccs-custom-contrast: none; } -[data-ccs-field=hue] { - display: var(--ccs-custom-hue, block); +[data-ccs-colors] { + --ccs-step: calc(var(--ccs-contrast) / 4); + --ccs-l--bg1: calc(var(--ccs-l) + var(--ccs-step) * 1 * var(--ccs-mode)); + --ccs-l--fg1: calc(var(--ccs-l) - var(--ccs-step) * 1 * var(--ccs-mode)); + --ccs-s--fg1: calc(var(--ccs-s) - var(--ccs-step) * 1); + --ccs-s--bg1: calc(var(--ccs-s) - var(--ccs-fade-background) - var(--ccs-step) * 1); + --ccs-prime--fg1: hsl(var(--ccs-h--prime), var(--ccs-s--fg1), var(--ccs-l--fg1)); + --ccs-prime--bg1: hsl(var(--ccs-h--prime), var(--ccs-s--bg1), var(--ccs-l--bg1)); + --ccs-accent--fg1: hsl(var(--ccs-h--accent), var(--ccs-s--fg1), var(--ccs-l--fg1)); + --ccs-accent--bg1: hsl(var(--ccs-h--accent), var(--ccs-s--bg1), var(--ccs-l--bg1)); + --ccs-neutral--fg1: hsl(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--fg1)); + --ccs-neutral--bg1: hsl(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--bg1)); + --ccs-l--bg2: calc(var(--ccs-l) + var(--ccs-step) * 2 * var(--ccs-mode)); + --ccs-l--fg2: calc(var(--ccs-l) - var(--ccs-step) * 2 * var(--ccs-mode)); + --ccs-s--fg2: calc(var(--ccs-s) - var(--ccs-step) * 2); + --ccs-s--bg2: calc(var(--ccs-s) - var(--ccs-fade-background) - var(--ccs-step) * 2); + --ccs-prime--fg2: hsl(var(--ccs-h--prime), var(--ccs-s--fg2), var(--ccs-l--fg2)); + --ccs-prime--bg2: hsl(var(--ccs-h--prime), var(--ccs-s--bg2), var(--ccs-l--bg2)); + --ccs-accent--fg2: hsl(var(--ccs-h--accent), var(--ccs-s--fg2), var(--ccs-l--fg2)); + --ccs-accent--bg2: hsl(var(--ccs-h--accent), var(--ccs-s--bg2), var(--ccs-l--bg2)); + --ccs-neutral--fg2: hsl(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--fg2)); + --ccs-neutral--bg2: hsl(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--bg2)); + --ccs-l--bg3: calc(var(--ccs-l) + var(--ccs-step) * 3 * var(--ccs-mode)); + --ccs-l--fg3: calc(var(--ccs-l) - var(--ccs-step) * 3 * var(--ccs-mode)); + --ccs-s--fg3: calc(var(--ccs-s) - var(--ccs-step) * 3); + --ccs-s--bg3: calc(var(--ccs-s) - var(--ccs-fade-background) - var(--ccs-step) * 3); + --ccs-prime--fg3: hsl(var(--ccs-h--prime), var(--ccs-s--fg3), var(--ccs-l--fg3)); + --ccs-prime--bg3: hsl(var(--ccs-h--prime), var(--ccs-s--bg3), var(--ccs-l--bg3)); + --ccs-accent--fg3: hsl(var(--ccs-h--accent), var(--ccs-s--fg3), var(--ccs-l--fg3)); + --ccs-accent--bg3: hsl(var(--ccs-h--accent), var(--ccs-s--bg3), var(--ccs-l--bg3)); + --ccs-neutral--fg3: hsl(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--fg3)); + --ccs-neutral--bg3: hsl(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--bg3)); + --ccs-l--bg4: calc(var(--ccs-l) + var(--ccs-step) * 4 * var(--ccs-mode)); + --ccs-l--fg4: calc(var(--ccs-l) - var(--ccs-step) * 4 * var(--ccs-mode)); + --ccs-s--fg4: calc(var(--ccs-s) - var(--ccs-step) * 4); + --ccs-s--bg4: calc(var(--ccs-s) - var(--ccs-fade-background) - var(--ccs-step) * 4); + --ccs-prime--fg4: hsl(var(--ccs-h--prime), var(--ccs-s--fg4), var(--ccs-l--fg4)); + --ccs-prime--bg4: hsl(var(--ccs-h--prime), var(--ccs-s--bg4), var(--ccs-l--bg4)); + --ccs-accent--fg4: hsl(var(--ccs-h--accent), var(--ccs-s--fg4), var(--ccs-l--fg4)); + --ccs-accent--bg4: hsl(var(--ccs-h--accent), var(--ccs-s--bg4), var(--ccs-l--bg4)); + --ccs-neutral--fg4: hsl(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--fg4)); + --ccs-neutral--bg4: hsl(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--bg4)); +} + +[data-ccs-field] { + display: var(--ccs-custom-display, var(--ccs-field-display, block)); } [data-ccs-field=hue] { - display: var(--ccs-custom-hue, block); + --ccs-custom-display: var(--ccs-custom-hue, block); } [data-ccs-field=lightness] { - display: var(--ccs-custom-lightness, block); + --ccs-custom-display: var(--ccs-custom-lightness, block); } [data-ccs-field=saturation] { - display: var(--ccs-custom-saturation, block); + --ccs-custom-display: var(--ccs-custom-saturation, block); } [data-ccs-field=contrast] { - display: var(--ccs-custom-contrast, block); + --ccs-custom-display: var(--ccs-custom-contrast, block); } /*# sourceMappingURL=ccs.css.map */ diff --git a/css/ccs.css.map b/css/ccs.css.map index 9f33c51..58eae8e 100644 --- a/css/ccs.css.map +++ b/css/ccs.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../sass/partials/_build.scss","../sass/partials/_palettes.scss","../sass/partials/_root.scss","../sass/config/_colors.scss","../sass/partials/_colors.scss","../sass/partials/_modes.scss","../sass/partials/_themes.scss","../sass/partials/_menu.scss"],"names":[],"mappings":"AAIE;EC+BA;EAqBE;EACA;EAGA;EACA;EAaE;EACA;EADA;EACA;EADA;EACA;EAnBF;EACA;EAGA;EACA;EAaE;EACA;EADA;EACA;EADA;EACA;EAnBF;EACA;EAGA;EACA;EAaE;EACA;EADA;EACA;EADA;EACA;EAnBF;EACA;EAGA;EACA;EAaE;EACA;EADA;EACA;EADA;EACA;;;AC3DN;EA2BE;EAGA,YCgFe;ED/Ef,OC8Dc;;AD5Dd;EAjCF;IAkCI;IACA,YC0DY;IDzDZ,OC0Ea;;;;AC9HjB;EAEE;EACA;EACA;EAGA;EACA;EAGA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EAGE;AAAA;AAAA;AAAA;AAAA;EAKA;AAAA;AAAA;AAAA;AAAA;EAKA;AAAA;AAAA;AAAA;AAAA;EAVA;AAAA;AAAA;AAAA;AAAA;EAKA;AAAA;AAAA;AAAA;AAAA;EAKA;AAAA;AAAA;AAAA;AAAA;EAVA;AAAA;AAAA;AAAA;AAAA;EAKA;AAAA;AAAA;AAAA;AAAA;EAKA;AAAA;AAAA;AAAA;AAAA;;;AC1CJ;EACE;;;AAGF;EACE;;;AAGF;EACE;;;ACTF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;ACdF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE","file":"ccs.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../sass/partials/_root.scss","../sass/partials/_modes.scss","../sass/config/_colors.scss","../sass/partials/_colors.scss","../sass/partials/_themes.scss","../sass/partials/_build.scss","../sass/partials/_palettes.scss","../sass/partials/_menu.scss"],"names":[],"mappings":"AAgBA;EAuCE;;AAEA;EAzCF;IA0CI;;;;ACtDJ;EACE,kBCkJe;EDjJf,OCgIc;;AD9Hd;EAJF;IAKI,kBC6HY;ID5HZ,OC6Ia;;;;ADzIjB;EACE;EACA,kBCsHc;EDrHd,OCsIe;;ADpIf;EALF;IAMI,kBCmIa;IDlIb,OCiHY;;;;AD7GhB;EACE;EACA,kBC4He;ED3Hf,OC0Gc;;;ADvGhB;EACE;EACA,kBCqGc;EDpGd,OCqHe;;;ACrJjB;EAEE;EACA;EACA;EAGA;EACA;EAGA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EAGA;EACA;EAIE;AAAA;AAAA;AAAA;AAAA;EAKA;AAAA;AAAA;AAAA;AAAA;EAKA;AAAA;AAAA;AAAA;AAAA;EAVA;AAAA;AAAA;AAAA;AAAA;EAKA;AAAA;AAAA;AAAA;AAAA;EAKA;AAAA;AAAA;AAAA;AAAA;EAVA;AAAA;AAAA;AAAA;AAAA;EAKA;AAAA;AAAA;AAAA;AAAA;EAKA;AAAA;AAAA;AAAA;AAAA;EA8BF;EACA;;;AC9EF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;ACVA;EC8BA;EAOE;EACA;EAGA;EACA;EAWE;EACA;EADA;EACA;EADA;EACA;EAjBF;EACA;EAGA;EACA;EAWE;EACA;EADA;EACA;EADA;EACA;EAjBF;EACA;EAGA;EACA;EAWE;EACA;EADA;EACA;EADA;EACA;EAjBF;EACA;EAGA;EACA;EAWE;EACA;EADA;EACA;EADA;EACA;;;AC1DN;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE","file":"ccs.css"} \ No newline at end of file diff --git a/package.json b/package.json index 5412c15..b442d57 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "cascading-color-systems", - "version": "0.1.0-beta.7", + "version": "0.1.0-beta.8", "description": "generate dynamic color palettes with custom properties", "main": "dist.js", "module": "index.js", @@ -10,7 +10,7 @@ "contributors": [ "Jonny Gerig Meyer " ], - "license": "MIT Hippocratic", + "license": "SEE LICENSE IN LICENSE.md", "devDependencies": { "@babel/cli": "^7.6.2", "@babel/core": "^7.6.2", diff --git a/sass/config/_colors.scss b/sass/config/_colors.scss index 89a8e7c..a97c589 100644 --- a/sass/config/_colors.scss +++ b/sass/config/_colors.scss @@ -96,6 +96,31 @@ $contrast: null !default; /// @group config $fade-background: null !default; +// Neutral Hue +// ----------- +/// By default, neutral colors are created from the prime hue. +/// +/// - Sass: `$neutral-hue: 330;` +/// - CSS: `--ccs-neutral--config: 330;` +/// +/// @type percentage | null +/// @group config +$neutral-hue: null !default; + +// Neutral Saturation +// ------------------ +/// By default, neutral saturation is set to +/// the full-contrast background saturation. +/// At low-contrast that can still be quite saturated, +/// so we provide an override when needed. +/// +/// - Sass: `$neutral-saturation: 15%;` +/// - CSS: `--ccs-s-neutral--config: 15%;` +/// +/// @type percentage | null +/// @group config +$neutral-saturation: null !default; + // Fallback Dark // ------------- /// A dark fallback color diff --git a/sass/partials/_colors.scss b/sass/partials/_colors.scss index c26f58f..956882c 100644 --- a/sass/partials/_colors.scss +++ b/sass/partials/_colors.scss @@ -1,8 +1,10 @@ +@use '../config'; + [data-ccs-colors] { // optionally set `--ccs-prime--user-*` values with JS --ccs-h--prime: var(--ccs-prime--user, var(--ccs-prime--theme, var(--ccs-prime--config, 330))); --ccs-h--accent: var(--ccs-accent--theme, var(--ccs-accent--config, var(--ccs-h--prime))); - --ccs-h--neutral: var(--ccs-neutral--theme, var(--ccs-h--prime)); + --ccs-h--neutral: var(--ccs-neutral--theme, var(--ccs-neutral--config, var(--ccs-h--prime))); // offset lightness and saturation based on contrast --ccs-contrast--user-percent: calc(var(--ccs-contrast--user) * 1%); @@ -15,10 +17,12 @@ --ccs-l--bg-contrast: calc(var(--ccs-l) + var(--ccs-contrast) * var(--ccs-mode)); // initial saturation values + --ccs-fade-background: var(--ccs-fade-background--theme, var(--ccs-fade-background--config, 0%)); --ccs-s--user-percent: calc(var(--ccs-s--user) * 1%); --ccs-s: var(--ccs-s--user-percent, var(--ccs-s--theme, var(--ccs-saturation--config, 50%))); --ccs-s--fg-contrast: calc(var(--ccs-s) - var(--ccs-contrast) * 0.75); --ccs-s--bg-contrast: calc(var(--ccs-s--fg-contrast) - var(--ccs-fade-background)); + --ccs-s--neutral: var(--ccs-s-neutral--theme, var(--ccs-s-neutral--config, var(--ccs-s--bg-contrast))); // final mode calculations --ccs-mode--cascade: var(--ccs-mode--user, var(--ccs-mode--html, var(--ccs-mode--os, 1))); @@ -30,20 +34,47 @@ --ccs--fg-full: hsl(0, 0%, calc(100% * var(--ccs-mode--invert))); @each $color in ('prime', 'accent', 'neutral') { + $s: if($color == 'neutral', '--neutral', null); --ccs-#{$color}: hsl( var(--ccs-h--#{$color}), - var(--ccs-s#{if($color == 'neutral', '--bg-contrast', '')}), + var(--ccs-s#{$s or ''}), var(--ccs-l) ); --ccs-#{$color}--fg-full: hsl( var(--ccs-h--#{$color}), - var(--ccs-s--fg-contrast), + var(--ccs-s#{$s or '--fg-contrast'}), var(--ccs-l--fg-contrast) ); --ccs-#{$color}--bg-full: hsl( var(--ccs-h--#{$color}), - var(--ccs-s--bg-contrast), + var(--ccs-s#{$s or '--bg-contrast'}), var(--ccs-l--bg-contrast) ); + + @if (config.$fades) { + --ccs-#{$color}--fade: hsla( + var(--ccs-h--#{$color}), + var(--ccs-s#{$s or ''}), + var(--ccs-l), + var(--ccs-fade) + ); + --ccs-#{$color}--fg-full-fade: hsla( + var(--ccs-h--#{$color}), + var(--ccs-s#{$s or '--fg-contrast'}), + var(--ccs-l--fg-contrast), + var(--ccs-fade) + ); + --ccs-#{$color}--bg-full-fade: hsla( + var(--ccs-h--#{$color}), + var(--ccs-s#{$s or '--bg-contrast'}), + var(--ccs-l--bg-contrast), + var(--ccs-fade) + ); + } + } + + // default variable colors + background-color: var(--ccs-background, var(--ccs-neutral--bg-full)); + color: var(--ccs-color, var(--ccs-neutral--fg-full)); } diff --git a/sass/partials/_index.scss b/sass/partials/_index.scss index 49e17bc..ef02f36 100644 --- a/sass/partials/_index.scss +++ b/sass/partials/_index.scss @@ -1,7 +1,14 @@ +// members only @forward 'palettes'; -@forward 'build'; + +// setup @forward 'root'; -@forward 'colors'; @forward 'modes'; +@forward 'colors'; @forward 'themes'; + +// build +@forward 'build'; + +// meta @forward 'menu'; diff --git a/sass/partials/_menu.scss b/sass/partials/_menu.scss index 8cdd646..0ba5105 100644 --- a/sass/partials/_menu.scss +++ b/sass/partials/_menu.scss @@ -1,19 +1,19 @@ -[data-ccs-field='hue'] { - display: var(--ccs-custom-hue, block); +[data-ccs-field] { + display: var(--ccs-custom-display, var(--ccs-field-display, block)); } [data-ccs-field='hue'] { - display: var(--ccs-custom-hue, block); + --ccs-custom-display: var(--ccs-custom-hue, block); } [data-ccs-field='lightness'] { - display: var(--ccs-custom-lightness, block); + --ccs-custom-display: var(--ccs-custom-lightness, block); } [data-ccs-field='saturation'] { - display: var(--ccs-custom-saturation, block); + --ccs-custom-display: var(--ccs-custom-saturation, block); } [data-ccs-field='contrast'] { - display: var(--ccs-custom-contrast, block); + --ccs-custom-display: var(--ccs-custom-contrast, block); } diff --git a/sass/partials/_modes.scss b/sass/partials/_modes.scss index cbfc726..bcf3dd1 100644 --- a/sass/partials/_modes.scss +++ b/sass/partials/_modes.scss @@ -1,11 +1,36 @@ +@use '../config'; + +// fallback values, in case variables are not supported +// along with explicit mode settings +[data-ccs-colors] { + background-color: config.$fallback-light; + color: config.$fallback-dark; + + @media (prefers-color-scheme: dark) { + background-color: config.$fallback-dark; + color: config.$fallback-light; + } +} + [data-ccs-colors='invert'] { --ccs-mode: calc(-1 * var(--ccs-mode--cascade, 1)); + background-color: config.$fallback-dark; + color: config.$fallback-light; + + @media (prefers-color-scheme: dark) { + background-color: config.$fallback-light; + color: config.$fallback-dark; + } } [data-ccs-colors='light'] { --ccs-mode--html: 1; + background-color: config.$fallback-light; + color: config.$fallback-dark; } [data-ccs-colors='dark'] { --ccs-mode--html: -1; + background-color: config.$fallback-dark; + color: config.$fallback-light; } diff --git a/sass/partials/_palettes.scss b/sass/partials/_palettes.scss index 2d2f153..457c4f0 100644 --- a/sass/partials/_palettes.scss +++ b/sass/partials/_palettes.scss @@ -1,5 +1,6 @@ @use '../config'; + // Colors // ------ /// Generate custom-property color palettes @@ -30,25 +31,9 @@ $fades: config.$fades, $gradients: config.$gradients, ) { - $colors: ('prime', 'accent', 'neutral'); - // offset steps --ccs-step: calc(var(--ccs-contrast) / #{$steps}); - // main colors - @if ($fades) { - $sla: var(--ccs-s--bg-contrast), var(--ccs-l), var(--ccs-fade); - --ccs-fade: #{if(type-of($fades) == 'number', $fades, 1)}; - --ccs-fade-background: var(--ccs-fade-background--theme, var(--ccs-fade-background--config, 0%)); - - @each $color in $colors { - --ccs-#{$color}--fade: hsla(var(--ccs-h--#{$color}), #{$sla}); - --ccs-#{$color}--fg-full-fade: var(--ccs-#{$color}--fg#{$steps}-fade); - --ccs-#{$color}--bg-full-fade: var(--ccs-#{$color}--bg#{$steps}-fade); - } - } - - @for $i from 1 through $steps { $bg: 'bg#{$i}'; $fg: 'fg#{$i}'; @@ -61,30 +46,26 @@ --ccs-s--#{$fg}: calc(var(--ccs-s) - var(--ccs-step) * #{$i}); --ccs-s--#{$bg}: calc(var(--ccs-s) - var(--ccs-fade-background) - var(--ccs-step) * #{$i}); - // sl steps - $sl-fg: var(--ccs-s--#{$fg}), var(--ccs-l--#{$fg}); - $sl-bg: var(--ccs-s--#{$bg}), var(--ccs-l--#{$bg}); - $sl-fg--neutral: var(--ccs-s--bg-contrast), var(--ccs-l--#{$fg}); - $sl-bg--neutral: var(--ccs-s--bg-contrast), var(--ccs-l--#{$bg}); - // color steps - @each $color in $colors { - $slf: if($color == 'neutral', $sl-fg--neutral, $sl-fg); - $slb: if($color == 'neutral', $sl-bg--neutral, $sl-bg); - - --ccs-#{$color}--#{$fg}: hsl(var(--ccs-h--#{$color}), #{$slf}); - --ccs-#{$color}--#{$bg}: hsl(var(--ccs-h--#{$color}), #{$slb}); - } - - @if ($fades) { - $sla-fg: var(--ccs-s--bg-contrast), var(--ccs-l--#{$fg}), var(--ccs-fade); - $sla-bg: var(--ccs-s--bg-contrast), var(--ccs-l--#{$bg}), var(--ccs-fade); - - @each $color in $colors { - --ccs-#{$color}--#{$fg}-fade: hsla(var(--ccs-h--#{$color}), #{$sla-fg}); - --ccs-#{$color}--#{$bg}-fade: hsla(var(--ccs-h--#{$color}), #{$sla-bg}); + @each $color in ('prime', 'accent', 'neutral') { + $h: var(--ccs-h--#{$color}); + $s: if($color == 'neutral', 'neutral', null); + $l-fg: var(--ccs-l--#{$fg}); + $l-bg: var(--ccs-l--#{$bg}); + $s-fg: var(--ccs-s--#{$s or $fg}); + $s-bg: var(--ccs-s--#{$s or $bg}); + + --ccs-#{$color}--#{$fg}: hsl(#{$h}, #{$s-fg}, #{$l-fg}); + --ccs-#{$color}--#{$bg}: hsl(#{$h}, #{$s-bg}, #{$l-bg}); + + @if ($fades) { + $a: var(--ccs-fade); + + --ccs-#{$color}--#{$fg}-fade: hsla(#{$h}, #{$s-fg}, #{$l-fg}, #{$a}); + --ccs-#{$color}--#{$bg}-fade: hsla(#{$h}, #{$s-bg}, #{$l-bg}, #{$a}); } } + } @if ($gradients) { diff --git a/sass/partials/_root.scss b/sass/partials/_root.scss index ad37636..6be74bf 100644 --- a/sass/partials/_root.scss +++ b/sass/partials/_root.scss @@ -40,17 +40,22 @@ --ccs-fade-background--config: #{config.$fade-background or null}; } + @if (config.$neutral-hue) { + --ccs-neutral--config: #{config.$neutral-hue or null}; + } + + @if (config.$neutral-saturation) { + --ccs-s-neutral--config: #{config.$neutral-saturation or null}; + } + + @if (config.$fades) { + --ccs-fade: #{if(type-of(config.$fades) == 'number', config.$fades, 1)}; + } + // mode --ccs-mode--os: 1; - // fallback values, in case variables are not supported - background: config.$fallback-light; - color: config.$fallback-dark; - @media (prefers-color-scheme: dark) { --ccs-mode--os: -1; - background: config.$fallback-dark; - color: config.$fallback-light; } } - diff --git a/site/css/styles.css b/site/css/styles.css index de2fbfd..3a54b82 100644 --- a/site/css/styles.css +++ b/site/css/styles.css @@ -217,152 +217,69 @@ category: legacy browsers padding: 0; } -[data-ccs-colors] { - --ccs-step: calc(var(--ccs-contrast) / 6); - --ccs-fade: 0.9; - --ccs-fade-background: var(--ccs-fade-background--theme, var(--ccs-fade-background--config, 0%)); - --ccs-prime--fade: hsla(var(--ccs-h--prime), var(--ccs-s--bg-contrast), var(--ccs-l), var(--ccs-fade)); - --ccs-prime--fg-full-fade: var(--ccs-prime--fg6-fade); - --ccs-prime--bg-full-fade: var(--ccs-prime--bg6-fade); - --ccs-accent--fade: hsla(var(--ccs-h--accent), var(--ccs-s--bg-contrast), var(--ccs-l), var(--ccs-fade)); - --ccs-accent--fg-full-fade: var(--ccs-accent--fg6-fade); - --ccs-accent--bg-full-fade: var(--ccs-accent--bg6-fade); - --ccs-neutral--fade: hsla(var(--ccs-h--neutral), var(--ccs-s--bg-contrast), var(--ccs-l), var(--ccs-fade)); - --ccs-neutral--fg-full-fade: var(--ccs-neutral--fg6-fade); - --ccs-neutral--bg-full-fade: var(--ccs-neutral--bg6-fade); - --ccs-l--bg1: calc(var(--ccs-l) + var(--ccs-step) * 1 * var(--ccs-mode)); - --ccs-l--fg1: calc(var(--ccs-l) - var(--ccs-step) * 1 * var(--ccs-mode)); - --ccs-s--fg1: calc(var(--ccs-s) - var(--ccs-step) * 1); - --ccs-s--bg1: calc(var(--ccs-s) - var(--ccs-fade-background) - var(--ccs-step) * 1); - --ccs-prime--fg1: hsl(var(--ccs-h--prime), var(--ccs-s--fg1), var(--ccs-l--fg1)); - --ccs-prime--bg1: hsl(var(--ccs-h--prime), var(--ccs-s--bg1), var(--ccs-l--bg1)); - --ccs-accent--fg1: hsl(var(--ccs-h--accent), var(--ccs-s--fg1), var(--ccs-l--fg1)); - --ccs-accent--bg1: hsl(var(--ccs-h--accent), var(--ccs-s--bg1), var(--ccs-l--bg1)); - --ccs-neutral--fg1: hsl(var(--ccs-h--neutral), var(--ccs-s--bg-contrast), var(--ccs-l--fg1)); - --ccs-neutral--bg1: hsl(var(--ccs-h--neutral), var(--ccs-s--bg-contrast), var(--ccs-l--bg1)); - --ccs-prime--fg1-fade: hsla(var(--ccs-h--prime), var(--ccs-s--bg-contrast), var(--ccs-l--fg1), var(--ccs-fade)); - --ccs-prime--bg1-fade: hsla(var(--ccs-h--prime), var(--ccs-s--bg-contrast), var(--ccs-l--bg1), var(--ccs-fade)); - --ccs-accent--fg1-fade: hsla(var(--ccs-h--accent), var(--ccs-s--bg-contrast), var(--ccs-l--fg1), var(--ccs-fade)); - --ccs-accent--bg1-fade: hsla(var(--ccs-h--accent), var(--ccs-s--bg-contrast), var(--ccs-l--bg1), var(--ccs-fade)); - --ccs-neutral--fg1-fade: hsla(var(--ccs-h--neutral), var(--ccs-s--bg-contrast), var(--ccs-l--fg1), var(--ccs-fade)); - --ccs-neutral--bg1-fade: hsla(var(--ccs-h--neutral), var(--ccs-s--bg-contrast), var(--ccs-l--bg1), var(--ccs-fade)); - --ccs-l--bg2: calc(var(--ccs-l) + var(--ccs-step) * 2 * var(--ccs-mode)); - --ccs-l--fg2: calc(var(--ccs-l) - var(--ccs-step) * 2 * var(--ccs-mode)); - --ccs-s--fg2: calc(var(--ccs-s) - var(--ccs-step) * 2); - --ccs-s--bg2: calc(var(--ccs-s) - var(--ccs-fade-background) - var(--ccs-step) * 2); - --ccs-prime--fg2: hsl(var(--ccs-h--prime), var(--ccs-s--fg2), var(--ccs-l--fg2)); - --ccs-prime--bg2: hsl(var(--ccs-h--prime), var(--ccs-s--bg2), var(--ccs-l--bg2)); - --ccs-accent--fg2: hsl(var(--ccs-h--accent), var(--ccs-s--fg2), var(--ccs-l--fg2)); - --ccs-accent--bg2: hsl(var(--ccs-h--accent), var(--ccs-s--bg2), var(--ccs-l--bg2)); - --ccs-neutral--fg2: hsl(var(--ccs-h--neutral), var(--ccs-s--bg-contrast), var(--ccs-l--fg2)); - --ccs-neutral--bg2: hsl(var(--ccs-h--neutral), var(--ccs-s--bg-contrast), var(--ccs-l--bg2)); - --ccs-prime--fg2-fade: hsla(var(--ccs-h--prime), var(--ccs-s--bg-contrast), var(--ccs-l--fg2), var(--ccs-fade)); - --ccs-prime--bg2-fade: hsla(var(--ccs-h--prime), var(--ccs-s--bg-contrast), var(--ccs-l--bg2), var(--ccs-fade)); - --ccs-accent--fg2-fade: hsla(var(--ccs-h--accent), var(--ccs-s--bg-contrast), var(--ccs-l--fg2), var(--ccs-fade)); - --ccs-accent--bg2-fade: hsla(var(--ccs-h--accent), var(--ccs-s--bg-contrast), var(--ccs-l--bg2), var(--ccs-fade)); - --ccs-neutral--fg2-fade: hsla(var(--ccs-h--neutral), var(--ccs-s--bg-contrast), var(--ccs-l--fg2), var(--ccs-fade)); - --ccs-neutral--bg2-fade: hsla(var(--ccs-h--neutral), var(--ccs-s--bg-contrast), var(--ccs-l--bg2), var(--ccs-fade)); - --ccs-l--bg3: calc(var(--ccs-l) + var(--ccs-step) * 3 * var(--ccs-mode)); - --ccs-l--fg3: calc(var(--ccs-l) - var(--ccs-step) * 3 * var(--ccs-mode)); - --ccs-s--fg3: calc(var(--ccs-s) - var(--ccs-step) * 3); - --ccs-s--bg3: calc(var(--ccs-s) - var(--ccs-fade-background) - var(--ccs-step) * 3); - --ccs-prime--fg3: hsl(var(--ccs-h--prime), var(--ccs-s--fg3), var(--ccs-l--fg3)); - --ccs-prime--bg3: hsl(var(--ccs-h--prime), var(--ccs-s--bg3), var(--ccs-l--bg3)); - --ccs-accent--fg3: hsl(var(--ccs-h--accent), var(--ccs-s--fg3), var(--ccs-l--fg3)); - --ccs-accent--bg3: hsl(var(--ccs-h--accent), var(--ccs-s--bg3), var(--ccs-l--bg3)); - --ccs-neutral--fg3: hsl(var(--ccs-h--neutral), var(--ccs-s--bg-contrast), var(--ccs-l--fg3)); - --ccs-neutral--bg3: hsl(var(--ccs-h--neutral), var(--ccs-s--bg-contrast), var(--ccs-l--bg3)); - --ccs-prime--fg3-fade: hsla(var(--ccs-h--prime), var(--ccs-s--bg-contrast), var(--ccs-l--fg3), var(--ccs-fade)); - --ccs-prime--bg3-fade: hsla(var(--ccs-h--prime), var(--ccs-s--bg-contrast), var(--ccs-l--bg3), var(--ccs-fade)); - --ccs-accent--fg3-fade: hsla(var(--ccs-h--accent), var(--ccs-s--bg-contrast), var(--ccs-l--fg3), var(--ccs-fade)); - --ccs-accent--bg3-fade: hsla(var(--ccs-h--accent), var(--ccs-s--bg-contrast), var(--ccs-l--bg3), var(--ccs-fade)); - --ccs-neutral--fg3-fade: hsla(var(--ccs-h--neutral), var(--ccs-s--bg-contrast), var(--ccs-l--fg3), var(--ccs-fade)); - --ccs-neutral--bg3-fade: hsla(var(--ccs-h--neutral), var(--ccs-s--bg-contrast), var(--ccs-l--bg3), var(--ccs-fade)); - --ccs-l--bg4: calc(var(--ccs-l) + var(--ccs-step) * 4 * var(--ccs-mode)); - --ccs-l--fg4: calc(var(--ccs-l) - var(--ccs-step) * 4 * var(--ccs-mode)); - --ccs-s--fg4: calc(var(--ccs-s) - var(--ccs-step) * 4); - --ccs-s--bg4: calc(var(--ccs-s) - var(--ccs-fade-background) - var(--ccs-step) * 4); - --ccs-prime--fg4: hsl(var(--ccs-h--prime), var(--ccs-s--fg4), var(--ccs-l--fg4)); - --ccs-prime--bg4: hsl(var(--ccs-h--prime), var(--ccs-s--bg4), var(--ccs-l--bg4)); - --ccs-accent--fg4: hsl(var(--ccs-h--accent), var(--ccs-s--fg4), var(--ccs-l--fg4)); - --ccs-accent--bg4: hsl(var(--ccs-h--accent), var(--ccs-s--bg4), var(--ccs-l--bg4)); - --ccs-neutral--fg4: hsl(var(--ccs-h--neutral), var(--ccs-s--bg-contrast), var(--ccs-l--fg4)); - --ccs-neutral--bg4: hsl(var(--ccs-h--neutral), var(--ccs-s--bg-contrast), var(--ccs-l--bg4)); - --ccs-prime--fg4-fade: hsla(var(--ccs-h--prime), var(--ccs-s--bg-contrast), var(--ccs-l--fg4), var(--ccs-fade)); - --ccs-prime--bg4-fade: hsla(var(--ccs-h--prime), var(--ccs-s--bg-contrast), var(--ccs-l--bg4), var(--ccs-fade)); - --ccs-accent--fg4-fade: hsla(var(--ccs-h--accent), var(--ccs-s--bg-contrast), var(--ccs-l--fg4), var(--ccs-fade)); - --ccs-accent--bg4-fade: hsla(var(--ccs-h--accent), var(--ccs-s--bg-contrast), var(--ccs-l--bg4), var(--ccs-fade)); - --ccs-neutral--fg4-fade: hsla(var(--ccs-h--neutral), var(--ccs-s--bg-contrast), var(--ccs-l--fg4), var(--ccs-fade)); - --ccs-neutral--bg4-fade: hsla(var(--ccs-h--neutral), var(--ccs-s--bg-contrast), var(--ccs-l--bg4), var(--ccs-fade)); - --ccs-l--bg5: calc(var(--ccs-l) + var(--ccs-step) * 5 * var(--ccs-mode)); - --ccs-l--fg5: calc(var(--ccs-l) - var(--ccs-step) * 5 * var(--ccs-mode)); - --ccs-s--fg5: calc(var(--ccs-s) - var(--ccs-step) * 5); - --ccs-s--bg5: calc(var(--ccs-s) - var(--ccs-fade-background) - var(--ccs-step) * 5); - --ccs-prime--fg5: hsl(var(--ccs-h--prime), var(--ccs-s--fg5), var(--ccs-l--fg5)); - --ccs-prime--bg5: hsl(var(--ccs-h--prime), var(--ccs-s--bg5), var(--ccs-l--bg5)); - --ccs-accent--fg5: hsl(var(--ccs-h--accent), var(--ccs-s--fg5), var(--ccs-l--fg5)); - --ccs-accent--bg5: hsl(var(--ccs-h--accent), var(--ccs-s--bg5), var(--ccs-l--bg5)); - --ccs-neutral--fg5: hsl(var(--ccs-h--neutral), var(--ccs-s--bg-contrast), var(--ccs-l--fg5)); - --ccs-neutral--bg5: hsl(var(--ccs-h--neutral), var(--ccs-s--bg-contrast), var(--ccs-l--bg5)); - --ccs-prime--fg5-fade: hsla(var(--ccs-h--prime), var(--ccs-s--bg-contrast), var(--ccs-l--fg5), var(--ccs-fade)); - --ccs-prime--bg5-fade: hsla(var(--ccs-h--prime), var(--ccs-s--bg-contrast), var(--ccs-l--bg5), var(--ccs-fade)); - --ccs-accent--fg5-fade: hsla(var(--ccs-h--accent), var(--ccs-s--bg-contrast), var(--ccs-l--fg5), var(--ccs-fade)); - --ccs-accent--bg5-fade: hsla(var(--ccs-h--accent), var(--ccs-s--bg-contrast), var(--ccs-l--bg5), var(--ccs-fade)); - --ccs-neutral--fg5-fade: hsla(var(--ccs-h--neutral), var(--ccs-s--bg-contrast), var(--ccs-l--fg5), var(--ccs-fade)); - --ccs-neutral--bg5-fade: hsla(var(--ccs-h--neutral), var(--ccs-s--bg-contrast), var(--ccs-l--bg5), var(--ccs-fade)); - --ccs-l--bg6: calc(var(--ccs-l) + var(--ccs-step) * 6 * var(--ccs-mode)); - --ccs-l--fg6: calc(var(--ccs-l) - var(--ccs-step) * 6 * var(--ccs-mode)); - --ccs-s--fg6: calc(var(--ccs-s) - var(--ccs-step) * 6); - --ccs-s--bg6: calc(var(--ccs-s) - var(--ccs-fade-background) - var(--ccs-step) * 6); - --ccs-prime--fg6: hsl(var(--ccs-h--prime), var(--ccs-s--fg6), var(--ccs-l--fg6)); - --ccs-prime--bg6: hsl(var(--ccs-h--prime), var(--ccs-s--bg6), var(--ccs-l--bg6)); - --ccs-accent--fg6: hsl(var(--ccs-h--accent), var(--ccs-s--fg6), var(--ccs-l--fg6)); - --ccs-accent--bg6: hsl(var(--ccs-h--accent), var(--ccs-s--bg6), var(--ccs-l--bg6)); - --ccs-neutral--fg6: hsl(var(--ccs-h--neutral), var(--ccs-s--bg-contrast), var(--ccs-l--fg6)); - --ccs-neutral--bg6: hsl(var(--ccs-h--neutral), var(--ccs-s--bg-contrast), var(--ccs-l--bg6)); - --ccs-prime--fg6-fade: hsla(var(--ccs-h--prime), var(--ccs-s--bg-contrast), var(--ccs-l--fg6), var(--ccs-fade)); - --ccs-prime--bg6-fade: hsla(var(--ccs-h--prime), var(--ccs-s--bg-contrast), var(--ccs-l--bg6), var(--ccs-fade)); - --ccs-accent--fg6-fade: hsla(var(--ccs-h--accent), var(--ccs-s--bg-contrast), var(--ccs-l--fg6), var(--ccs-fade)); - --ccs-accent--bg6-fade: hsla(var(--ccs-h--accent), var(--ccs-s--bg-contrast), var(--ccs-l--bg6), var(--ccs-fade)); - --ccs-neutral--fg6-fade: hsla(var(--ccs-h--neutral), var(--ccs-s--bg-contrast), var(--ccs-l--fg6), var(--ccs-fade)); - --ccs-neutral--bg6-fade: hsla(var(--ccs-h--neutral), var(--ccs-s--bg-contrast), var(--ccs-l--bg6), var(--ccs-fade)); - --stop: calc(100% / (6 * 2 + 1)); - --prime-gradient: linear-gradient(to right, var(--ccs-prime--bg6) calc(var(--stop) * 0) calc(var(--stop) * 1), var(--ccs-prime--bg5) calc(var(--stop) * 1) calc(var(--stop) * 2), var(--ccs-prime--bg4) calc(var(--stop) * 2) calc(var(--stop) * 3), var(--ccs-prime--bg3) calc(var(--stop) * 3) calc(var(--stop) * 4), var(--ccs-prime--bg2) calc(var(--stop) * 4) calc(var(--stop) * 5), var(--ccs-prime--bg1) calc(var(--stop) * 5) calc(var(--stop) * 6), var(--ccs-prime) calc(var(--stop) * 6) calc(var(--stop) * 7), var(--ccs-prime--fg1) calc(var(--stop) * 7) calc(var(--stop) * 8), var(--ccs-prime--fg2) calc(var(--stop) * 8) calc(var(--stop) * 9), var(--ccs-prime--fg3) calc(var(--stop) * 9) calc(var(--stop) * 10), var(--ccs-prime--fg4) calc(var(--stop) * 10) calc(var(--stop) * 11), var(--ccs-prime--fg5) calc(var(--stop) * 11) calc(var(--stop) * 12), var(--ccs-prime--fg6) calc(var(--stop) * 12) calc(var(--stop) * 13)); - --prime-gradient--fade: linear-gradient(to right, var(--ccs-prime--bg6-fade) calc(var(--stop) * 0) calc(var(--stop) * 1), var(--ccs-prime--bg5-fade) calc(var(--stop) * 1) calc(var(--stop) * 2), var(--ccs-prime--bg4-fade) calc(var(--stop) * 2) calc(var(--stop) * 3), var(--ccs-prime--bg3-fade) calc(var(--stop) * 3) calc(var(--stop) * 4), var(--ccs-prime--bg2-fade) calc(var(--stop) * 4) calc(var(--stop) * 5), var(--ccs-prime--bg1-fade) calc(var(--stop) * 5) calc(var(--stop) * 6), var(--ccs-prime--fade) calc(var(--stop) * 6) calc(var(--stop) * 7), var(--ccs-prime--fg1-fade) calc(var(--stop) * 7) calc(var(--stop) * 8), var(--ccs-prime--fg2-fade) calc(var(--stop) * 8) calc(var(--stop) * 9), var(--ccs-prime--fg3-fade) calc(var(--stop) * 9) calc(var(--stop) * 10), var(--ccs-prime--fg4-fade) calc(var(--stop) * 10) calc(var(--stop) * 11), var(--ccs-prime--fg5-fade) calc(var(--stop) * 11) calc(var(--stop) * 12), var(--ccs-prime--fg6-fade) calc(var(--stop) * 12) calc(var(--stop) * 13)); - --accent-gradient: linear-gradient(to right, var(--ccs-accent--bg6) calc(var(--stop) * 0) calc(var(--stop) * 1), var(--ccs-accent--bg5) calc(var(--stop) * 1) calc(var(--stop) * 2), var(--ccs-accent--bg4) calc(var(--stop) * 2) calc(var(--stop) * 3), var(--ccs-accent--bg3) calc(var(--stop) * 3) calc(var(--stop) * 4), var(--ccs-accent--bg2) calc(var(--stop) * 4) calc(var(--stop) * 5), var(--ccs-accent--bg1) calc(var(--stop) * 5) calc(var(--stop) * 6), var(--ccs-accent) calc(var(--stop) * 6) calc(var(--stop) * 7), var(--ccs-accent--fg1) calc(var(--stop) * 7) calc(var(--stop) * 8), var(--ccs-accent--fg2) calc(var(--stop) * 8) calc(var(--stop) * 9), var(--ccs-accent--fg3) calc(var(--stop) * 9) calc(var(--stop) * 10), var(--ccs-accent--fg4) calc(var(--stop) * 10) calc(var(--stop) * 11), var(--ccs-accent--fg5) calc(var(--stop) * 11) calc(var(--stop) * 12), var(--ccs-accent--fg6) calc(var(--stop) * 12) calc(var(--stop) * 13)); - --accent-gradient--fade: linear-gradient(to right, var(--ccs-accent--bg6-fade) calc(var(--stop) * 0) calc(var(--stop) * 1), var(--ccs-accent--bg5-fade) calc(var(--stop) * 1) calc(var(--stop) * 2), var(--ccs-accent--bg4-fade) calc(var(--stop) * 2) calc(var(--stop) * 3), var(--ccs-accent--bg3-fade) calc(var(--stop) * 3) calc(var(--stop) * 4), var(--ccs-accent--bg2-fade) calc(var(--stop) * 4) calc(var(--stop) * 5), var(--ccs-accent--bg1-fade) calc(var(--stop) * 5) calc(var(--stop) * 6), var(--ccs-accent--fade) calc(var(--stop) * 6) calc(var(--stop) * 7), var(--ccs-accent--fg1-fade) calc(var(--stop) * 7) calc(var(--stop) * 8), var(--ccs-accent--fg2-fade) calc(var(--stop) * 8) calc(var(--stop) * 9), var(--ccs-accent--fg3-fade) calc(var(--stop) * 9) calc(var(--stop) * 10), var(--ccs-accent--fg4-fade) calc(var(--stop) * 10) calc(var(--stop) * 11), var(--ccs-accent--fg5-fade) calc(var(--stop) * 11) calc(var(--stop) * 12), var(--ccs-accent--fg6-fade) calc(var(--stop) * 12) calc(var(--stop) * 13)); - --neutral-gradient: linear-gradient(to right, var(--ccs-neutral--bg6) calc(var(--stop) * 0) calc(var(--stop) * 1), var(--ccs-neutral--bg5) calc(var(--stop) * 1) calc(var(--stop) * 2), var(--ccs-neutral--bg4) calc(var(--stop) * 2) calc(var(--stop) * 3), var(--ccs-neutral--bg3) calc(var(--stop) * 3) calc(var(--stop) * 4), var(--ccs-neutral--bg2) calc(var(--stop) * 4) calc(var(--stop) * 5), var(--ccs-neutral--bg1) calc(var(--stop) * 5) calc(var(--stop) * 6), var(--ccs-neutral) calc(var(--stop) * 6) calc(var(--stop) * 7), var(--ccs-neutral--fg1) calc(var(--stop) * 7) calc(var(--stop) * 8), var(--ccs-neutral--fg2) calc(var(--stop) * 8) calc(var(--stop) * 9), var(--ccs-neutral--fg3) calc(var(--stop) * 9) calc(var(--stop) * 10), var(--ccs-neutral--fg4) calc(var(--stop) * 10) calc(var(--stop) * 11), var(--ccs-neutral--fg5) calc(var(--stop) * 11) calc(var(--stop) * 12), var(--ccs-neutral--fg6) calc(var(--stop) * 12) calc(var(--stop) * 13)); - --neutral-gradient--fade: linear-gradient(to right, var(--ccs-neutral--bg6-fade) calc(var(--stop) * 0) calc(var(--stop) * 1), var(--ccs-neutral--bg5-fade) calc(var(--stop) * 1) calc(var(--stop) * 2), var(--ccs-neutral--bg4-fade) calc(var(--stop) * 2) calc(var(--stop) * 3), var(--ccs-neutral--bg3-fade) calc(var(--stop) * 3) calc(var(--stop) * 4), var(--ccs-neutral--bg2-fade) calc(var(--stop) * 4) calc(var(--stop) * 5), var(--ccs-neutral--bg1-fade) calc(var(--stop) * 5) calc(var(--stop) * 6), var(--ccs-neutral--fade) calc(var(--stop) * 6) calc(var(--stop) * 7), var(--ccs-neutral--fg1-fade) calc(var(--stop) * 7) calc(var(--stop) * 8), var(--ccs-neutral--fg2-fade) calc(var(--stop) * 8) calc(var(--stop) * 9), var(--ccs-neutral--fg3-fade) calc(var(--stop) * 9) calc(var(--stop) * 10), var(--ccs-neutral--fg4-fade) calc(var(--stop) * 10) calc(var(--stop) * 11), var(--ccs-neutral--fg5-fade) calc(var(--stop) * 11) calc(var(--stop) * 12), var(--ccs-neutral--fg6-fade) calc(var(--stop) * 12) calc(var(--stop) * 13)); -} - [data-ccs=root] { --ccs-fade-background--config: 10%; + --ccs-s-neutral--config: 5%; + --ccs-fade: 0.9; --ccs-mode--os: 1; - background: #f3f2f2; - color: #0d0c0d; } @media (prefers-color-scheme: dark) { [data-ccs=root] { --ccs-mode--os: -1; - background: #0d0c0d; + } +} + +[data-ccs-colors] { + background-color: #f3f2f2; + color: #0d0c0d; +} +@media (prefers-color-scheme: dark) { + [data-ccs-colors] { + background-color: #0d0c0d; color: #f3f2f2; } } +[data-ccs-colors=invert] { + --ccs-mode: calc(-1 * var(--ccs-mode--cascade, 1)); + background-color: #0d0c0d; + color: #f3f2f2; +} +@media (prefers-color-scheme: dark) { + [data-ccs-colors=invert] { + background-color: #f3f2f2; + color: #0d0c0d; + } +} + +[data-ccs-colors=light] { + --ccs-mode--html: 1; + background-color: #f3f2f2; + color: #0d0c0d; +} + +[data-ccs-colors=dark] { + --ccs-mode--html: -1; + background-color: #0d0c0d; + color: #f3f2f2; +} + [data-ccs-colors] { --ccs-h--prime: var(--ccs-prime--user, var(--ccs-prime--theme, var(--ccs-prime--config, 330))); --ccs-h--accent: var(--ccs-accent--theme, var(--ccs-accent--config, var(--ccs-h--prime))); - --ccs-h--neutral: var(--ccs-neutral--theme, var(--ccs-h--prime)); + --ccs-h--neutral: var(--ccs-neutral--theme, var(--ccs-neutral--config, var(--ccs-h--prime))); --ccs-contrast--user-percent: calc(var(--ccs-contrast--user) * 1%); --ccs-contrast: var(--ccs-contrast--user-percent, var(--ccs-contrast--theme, var(--ccs-contrast-config, 45%))); --ccs-l--user-percent: calc(var(--ccs-l--user) * 1%); --ccs-l: var(--ccs-l--user-percent, var(--ccs-l--theme, var(--ccs-lightness--config, 50%))); --ccs-l--fg-contrast: calc(var(--ccs-l) + var(--ccs-contrast) * var(--ccs-mode--invert)); --ccs-l--bg-contrast: calc(var(--ccs-l) + var(--ccs-contrast) * var(--ccs-mode)); + --ccs-fade-background: var(--ccs-fade-background--theme, var(--ccs-fade-background--config, 0%)); --ccs-s--user-percent: calc(var(--ccs-s--user) * 1%); --ccs-s: var(--ccs-s--user-percent, var(--ccs-s--theme, var(--ccs-saturation--config, 50%))); --ccs-s--fg-contrast: calc(var(--ccs-s) - var(--ccs-contrast) * 0.75); --ccs-s--bg-contrast: calc(var(--ccs-s--fg-contrast) - var(--ccs-fade-background)); + --ccs-s--neutral: var(--ccs-s-neutral--theme, var(--ccs-s-neutral--config, var(--ccs-s--bg-contrast))); --ccs-mode--cascade: var(--ccs-mode--user, var(--ccs-mode--html, var(--ccs-mode--os, 1))); --ccs-mode: var(--ccs-mode--cascade, 1); --ccs-mode--invert: calc(-1 * var(--ccs-mode)); @@ -383,6 +300,24 @@ category: legacy browsers var(--ccs-s--bg-contrast), var(--ccs-l--bg-contrast) ); + --ccs-prime--fade: hsla( + var(--ccs-h--prime), + var(--ccs-s), + var(--ccs-l), + var(--ccs-fade) + ); + --ccs-prime--fg-full-fade: hsla( + var(--ccs-h--prime), + var(--ccs-s--fg-contrast), + var(--ccs-l--fg-contrast), + var(--ccs-fade) + ); + --ccs-prime--bg-full-fade: hsla( + var(--ccs-h--prime), + var(--ccs-s--bg-contrast), + var(--ccs-l--bg-contrast), + var(--ccs-fade) + ); --ccs-accent: hsl( var(--ccs-h--accent), var(--ccs-s), @@ -398,33 +333,59 @@ category: legacy browsers var(--ccs-s--bg-contrast), var(--ccs-l--bg-contrast) ); + --ccs-accent--fade: hsla( + var(--ccs-h--accent), + var(--ccs-s), + var(--ccs-l), + var(--ccs-fade) + ); + --ccs-accent--fg-full-fade: hsla( + var(--ccs-h--accent), + var(--ccs-s--fg-contrast), + var(--ccs-l--fg-contrast), + var(--ccs-fade) + ); + --ccs-accent--bg-full-fade: hsla( + var(--ccs-h--accent), + var(--ccs-s--bg-contrast), + var(--ccs-l--bg-contrast), + var(--ccs-fade) + ); --ccs-neutral: hsl( var(--ccs-h--neutral), - var(--ccs-s--bg-contrast), + var(--ccs-s--neutral), var(--ccs-l) ); --ccs-neutral--fg-full: hsl( var(--ccs-h--neutral), - var(--ccs-s--fg-contrast), + var(--ccs-s--neutral), var(--ccs-l--fg-contrast) ); --ccs-neutral--bg-full: hsl( var(--ccs-h--neutral), - var(--ccs-s--bg-contrast), + var(--ccs-s--neutral), var(--ccs-l--bg-contrast) ); -} - -[data-ccs-colors=invert] { - --ccs-mode: calc(-1 * var(--ccs-mode--cascade, 1)); -} - -[data-ccs-colors=light] { - --ccs-mode--html: 1; -} - -[data-ccs-colors=dark] { - --ccs-mode--html: -1; + --ccs-neutral--fade: hsla( + var(--ccs-h--neutral), + var(--ccs-s--neutral), + var(--ccs-l), + var(--ccs-fade) + ); + --ccs-neutral--fg-full-fade: hsla( + var(--ccs-h--neutral), + var(--ccs-s--neutral), + var(--ccs-l--fg-contrast), + var(--ccs-fade) + ); + --ccs-neutral--bg-full-fade: hsla( + var(--ccs-h--neutral), + var(--ccs-s--neutral), + var(--ccs-l--bg-contrast), + var(--ccs-fade) + ); + background-color: var(--ccs-background, var(--ccs-neutral--bg-full)); + color: var(--ccs-color, var(--ccs-neutral--fg-full)); } [data-ccs-theme=complement] { @@ -444,31 +405,136 @@ category: legacy browsers --ccs-custom-contrast: none; } -[data-ccs-field=hue] { - display: var(--ccs-custom-hue, block); +[data-ccs-colors] { + --ccs-step: calc(var(--ccs-contrast) / 6); + --ccs-l--bg1: calc(var(--ccs-l) + var(--ccs-step) * 1 * var(--ccs-mode)); + --ccs-l--fg1: calc(var(--ccs-l) - var(--ccs-step) * 1 * var(--ccs-mode)); + --ccs-s--fg1: calc(var(--ccs-s) - var(--ccs-step) * 1); + --ccs-s--bg1: calc(var(--ccs-s) - var(--ccs-fade-background) - var(--ccs-step) * 1); + --ccs-prime--fg1: hsl(var(--ccs-h--prime), var(--ccs-s--fg1), var(--ccs-l--fg1)); + --ccs-prime--bg1: hsl(var(--ccs-h--prime), var(--ccs-s--bg1), var(--ccs-l--bg1)); + --ccs-prime--fg1-fade: hsla(var(--ccs-h--prime), var(--ccs-s--fg1), var(--ccs-l--fg1), var(--ccs-fade)); + --ccs-prime--bg1-fade: hsla(var(--ccs-h--prime), var(--ccs-s--bg1), var(--ccs-l--bg1), var(--ccs-fade)); + --ccs-accent--fg1: hsl(var(--ccs-h--accent), var(--ccs-s--fg1), var(--ccs-l--fg1)); + --ccs-accent--bg1: hsl(var(--ccs-h--accent), var(--ccs-s--bg1), var(--ccs-l--bg1)); + --ccs-accent--fg1-fade: hsla(var(--ccs-h--accent), var(--ccs-s--fg1), var(--ccs-l--fg1), var(--ccs-fade)); + --ccs-accent--bg1-fade: hsla(var(--ccs-h--accent), var(--ccs-s--bg1), var(--ccs-l--bg1), var(--ccs-fade)); + --ccs-neutral--fg1: hsl(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--fg1)); + --ccs-neutral--bg1: hsl(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--bg1)); + --ccs-neutral--fg1-fade: hsla(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--fg1), var(--ccs-fade)); + --ccs-neutral--bg1-fade: hsla(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--bg1), var(--ccs-fade)); + --ccs-l--bg2: calc(var(--ccs-l) + var(--ccs-step) * 2 * var(--ccs-mode)); + --ccs-l--fg2: calc(var(--ccs-l) - var(--ccs-step) * 2 * var(--ccs-mode)); + --ccs-s--fg2: calc(var(--ccs-s) - var(--ccs-step) * 2); + --ccs-s--bg2: calc(var(--ccs-s) - var(--ccs-fade-background) - var(--ccs-step) * 2); + --ccs-prime--fg2: hsl(var(--ccs-h--prime), var(--ccs-s--fg2), var(--ccs-l--fg2)); + --ccs-prime--bg2: hsl(var(--ccs-h--prime), var(--ccs-s--bg2), var(--ccs-l--bg2)); + --ccs-prime--fg2-fade: hsla(var(--ccs-h--prime), var(--ccs-s--fg2), var(--ccs-l--fg2), var(--ccs-fade)); + --ccs-prime--bg2-fade: hsla(var(--ccs-h--prime), var(--ccs-s--bg2), var(--ccs-l--bg2), var(--ccs-fade)); + --ccs-accent--fg2: hsl(var(--ccs-h--accent), var(--ccs-s--fg2), var(--ccs-l--fg2)); + --ccs-accent--bg2: hsl(var(--ccs-h--accent), var(--ccs-s--bg2), var(--ccs-l--bg2)); + --ccs-accent--fg2-fade: hsla(var(--ccs-h--accent), var(--ccs-s--fg2), var(--ccs-l--fg2), var(--ccs-fade)); + --ccs-accent--bg2-fade: hsla(var(--ccs-h--accent), var(--ccs-s--bg2), var(--ccs-l--bg2), var(--ccs-fade)); + --ccs-neutral--fg2: hsl(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--fg2)); + --ccs-neutral--bg2: hsl(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--bg2)); + --ccs-neutral--fg2-fade: hsla(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--fg2), var(--ccs-fade)); + --ccs-neutral--bg2-fade: hsla(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--bg2), var(--ccs-fade)); + --ccs-l--bg3: calc(var(--ccs-l) + var(--ccs-step) * 3 * var(--ccs-mode)); + --ccs-l--fg3: calc(var(--ccs-l) - var(--ccs-step) * 3 * var(--ccs-mode)); + --ccs-s--fg3: calc(var(--ccs-s) - var(--ccs-step) * 3); + --ccs-s--bg3: calc(var(--ccs-s) - var(--ccs-fade-background) - var(--ccs-step) * 3); + --ccs-prime--fg3: hsl(var(--ccs-h--prime), var(--ccs-s--fg3), var(--ccs-l--fg3)); + --ccs-prime--bg3: hsl(var(--ccs-h--prime), var(--ccs-s--bg3), var(--ccs-l--bg3)); + --ccs-prime--fg3-fade: hsla(var(--ccs-h--prime), var(--ccs-s--fg3), var(--ccs-l--fg3), var(--ccs-fade)); + --ccs-prime--bg3-fade: hsla(var(--ccs-h--prime), var(--ccs-s--bg3), var(--ccs-l--bg3), var(--ccs-fade)); + --ccs-accent--fg3: hsl(var(--ccs-h--accent), var(--ccs-s--fg3), var(--ccs-l--fg3)); + --ccs-accent--bg3: hsl(var(--ccs-h--accent), var(--ccs-s--bg3), var(--ccs-l--bg3)); + --ccs-accent--fg3-fade: hsla(var(--ccs-h--accent), var(--ccs-s--fg3), var(--ccs-l--fg3), var(--ccs-fade)); + --ccs-accent--bg3-fade: hsla(var(--ccs-h--accent), var(--ccs-s--bg3), var(--ccs-l--bg3), var(--ccs-fade)); + --ccs-neutral--fg3: hsl(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--fg3)); + --ccs-neutral--bg3: hsl(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--bg3)); + --ccs-neutral--fg3-fade: hsla(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--fg3), var(--ccs-fade)); + --ccs-neutral--bg3-fade: hsla(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--bg3), var(--ccs-fade)); + --ccs-l--bg4: calc(var(--ccs-l) + var(--ccs-step) * 4 * var(--ccs-mode)); + --ccs-l--fg4: calc(var(--ccs-l) - var(--ccs-step) * 4 * var(--ccs-mode)); + --ccs-s--fg4: calc(var(--ccs-s) - var(--ccs-step) * 4); + --ccs-s--bg4: calc(var(--ccs-s) - var(--ccs-fade-background) - var(--ccs-step) * 4); + --ccs-prime--fg4: hsl(var(--ccs-h--prime), var(--ccs-s--fg4), var(--ccs-l--fg4)); + --ccs-prime--bg4: hsl(var(--ccs-h--prime), var(--ccs-s--bg4), var(--ccs-l--bg4)); + --ccs-prime--fg4-fade: hsla(var(--ccs-h--prime), var(--ccs-s--fg4), var(--ccs-l--fg4), var(--ccs-fade)); + --ccs-prime--bg4-fade: hsla(var(--ccs-h--prime), var(--ccs-s--bg4), var(--ccs-l--bg4), var(--ccs-fade)); + --ccs-accent--fg4: hsl(var(--ccs-h--accent), var(--ccs-s--fg4), var(--ccs-l--fg4)); + --ccs-accent--bg4: hsl(var(--ccs-h--accent), var(--ccs-s--bg4), var(--ccs-l--bg4)); + --ccs-accent--fg4-fade: hsla(var(--ccs-h--accent), var(--ccs-s--fg4), var(--ccs-l--fg4), var(--ccs-fade)); + --ccs-accent--bg4-fade: hsla(var(--ccs-h--accent), var(--ccs-s--bg4), var(--ccs-l--bg4), var(--ccs-fade)); + --ccs-neutral--fg4: hsl(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--fg4)); + --ccs-neutral--bg4: hsl(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--bg4)); + --ccs-neutral--fg4-fade: hsla(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--fg4), var(--ccs-fade)); + --ccs-neutral--bg4-fade: hsla(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--bg4), var(--ccs-fade)); + --ccs-l--bg5: calc(var(--ccs-l) + var(--ccs-step) * 5 * var(--ccs-mode)); + --ccs-l--fg5: calc(var(--ccs-l) - var(--ccs-step) * 5 * var(--ccs-mode)); + --ccs-s--fg5: calc(var(--ccs-s) - var(--ccs-step) * 5); + --ccs-s--bg5: calc(var(--ccs-s) - var(--ccs-fade-background) - var(--ccs-step) * 5); + --ccs-prime--fg5: hsl(var(--ccs-h--prime), var(--ccs-s--fg5), var(--ccs-l--fg5)); + --ccs-prime--bg5: hsl(var(--ccs-h--prime), var(--ccs-s--bg5), var(--ccs-l--bg5)); + --ccs-prime--fg5-fade: hsla(var(--ccs-h--prime), var(--ccs-s--fg5), var(--ccs-l--fg5), var(--ccs-fade)); + --ccs-prime--bg5-fade: hsla(var(--ccs-h--prime), var(--ccs-s--bg5), var(--ccs-l--bg5), var(--ccs-fade)); + --ccs-accent--fg5: hsl(var(--ccs-h--accent), var(--ccs-s--fg5), var(--ccs-l--fg5)); + --ccs-accent--bg5: hsl(var(--ccs-h--accent), var(--ccs-s--bg5), var(--ccs-l--bg5)); + --ccs-accent--fg5-fade: hsla(var(--ccs-h--accent), var(--ccs-s--fg5), var(--ccs-l--fg5), var(--ccs-fade)); + --ccs-accent--bg5-fade: hsla(var(--ccs-h--accent), var(--ccs-s--bg5), var(--ccs-l--bg5), var(--ccs-fade)); + --ccs-neutral--fg5: hsl(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--fg5)); + --ccs-neutral--bg5: hsl(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--bg5)); + --ccs-neutral--fg5-fade: hsla(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--fg5), var(--ccs-fade)); + --ccs-neutral--bg5-fade: hsla(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--bg5), var(--ccs-fade)); + --ccs-l--bg6: calc(var(--ccs-l) + var(--ccs-step) * 6 * var(--ccs-mode)); + --ccs-l--fg6: calc(var(--ccs-l) - var(--ccs-step) * 6 * var(--ccs-mode)); + --ccs-s--fg6: calc(var(--ccs-s) - var(--ccs-step) * 6); + --ccs-s--bg6: calc(var(--ccs-s) - var(--ccs-fade-background) - var(--ccs-step) * 6); + --ccs-prime--fg6: hsl(var(--ccs-h--prime), var(--ccs-s--fg6), var(--ccs-l--fg6)); + --ccs-prime--bg6: hsl(var(--ccs-h--prime), var(--ccs-s--bg6), var(--ccs-l--bg6)); + --ccs-prime--fg6-fade: hsla(var(--ccs-h--prime), var(--ccs-s--fg6), var(--ccs-l--fg6), var(--ccs-fade)); + --ccs-prime--bg6-fade: hsla(var(--ccs-h--prime), var(--ccs-s--bg6), var(--ccs-l--bg6), var(--ccs-fade)); + --ccs-accent--fg6: hsl(var(--ccs-h--accent), var(--ccs-s--fg6), var(--ccs-l--fg6)); + --ccs-accent--bg6: hsl(var(--ccs-h--accent), var(--ccs-s--bg6), var(--ccs-l--bg6)); + --ccs-accent--fg6-fade: hsla(var(--ccs-h--accent), var(--ccs-s--fg6), var(--ccs-l--fg6), var(--ccs-fade)); + --ccs-accent--bg6-fade: hsla(var(--ccs-h--accent), var(--ccs-s--bg6), var(--ccs-l--bg6), var(--ccs-fade)); + --ccs-neutral--fg6: hsl(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--fg6)); + --ccs-neutral--bg6: hsl(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--bg6)); + --ccs-neutral--fg6-fade: hsla(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--fg6), var(--ccs-fade)); + --ccs-neutral--bg6-fade: hsla(var(--ccs-h--neutral), var(--ccs-s--neutral), var(--ccs-l--bg6), var(--ccs-fade)); + --stop: calc(100% / (6 * 2 + 1)); + --prime-gradient: linear-gradient(to right, var(--ccs-prime--bg6) calc(var(--stop) * 0) calc(var(--stop) * 1), var(--ccs-prime--bg5) calc(var(--stop) * 1) calc(var(--stop) * 2), var(--ccs-prime--bg4) calc(var(--stop) * 2) calc(var(--stop) * 3), var(--ccs-prime--bg3) calc(var(--stop) * 3) calc(var(--stop) * 4), var(--ccs-prime--bg2) calc(var(--stop) * 4) calc(var(--stop) * 5), var(--ccs-prime--bg1) calc(var(--stop) * 5) calc(var(--stop) * 6), var(--ccs-prime) calc(var(--stop) * 6) calc(var(--stop) * 7), var(--ccs-prime--fg1) calc(var(--stop) * 7) calc(var(--stop) * 8), var(--ccs-prime--fg2) calc(var(--stop) * 8) calc(var(--stop) * 9), var(--ccs-prime--fg3) calc(var(--stop) * 9) calc(var(--stop) * 10), var(--ccs-prime--fg4) calc(var(--stop) * 10) calc(var(--stop) * 11), var(--ccs-prime--fg5) calc(var(--stop) * 11) calc(var(--stop) * 12), var(--ccs-prime--fg6) calc(var(--stop) * 12) calc(var(--stop) * 13)); + --prime-gradient--fade: linear-gradient(to right, var(--ccs-prime--bg6-fade) calc(var(--stop) * 0) calc(var(--stop) * 1), var(--ccs-prime--bg5-fade) calc(var(--stop) * 1) calc(var(--stop) * 2), var(--ccs-prime--bg4-fade) calc(var(--stop) * 2) calc(var(--stop) * 3), var(--ccs-prime--bg3-fade) calc(var(--stop) * 3) calc(var(--stop) * 4), var(--ccs-prime--bg2-fade) calc(var(--stop) * 4) calc(var(--stop) * 5), var(--ccs-prime--bg1-fade) calc(var(--stop) * 5) calc(var(--stop) * 6), var(--ccs-prime--fade) calc(var(--stop) * 6) calc(var(--stop) * 7), var(--ccs-prime--fg1-fade) calc(var(--stop) * 7) calc(var(--stop) * 8), var(--ccs-prime--fg2-fade) calc(var(--stop) * 8) calc(var(--stop) * 9), var(--ccs-prime--fg3-fade) calc(var(--stop) * 9) calc(var(--stop) * 10), var(--ccs-prime--fg4-fade) calc(var(--stop) * 10) calc(var(--stop) * 11), var(--ccs-prime--fg5-fade) calc(var(--stop) * 11) calc(var(--stop) * 12), var(--ccs-prime--fg6-fade) calc(var(--stop) * 12) calc(var(--stop) * 13)); + --accent-gradient: linear-gradient(to right, var(--ccs-accent--bg6) calc(var(--stop) * 0) calc(var(--stop) * 1), var(--ccs-accent--bg5) calc(var(--stop) * 1) calc(var(--stop) * 2), var(--ccs-accent--bg4) calc(var(--stop) * 2) calc(var(--stop) * 3), var(--ccs-accent--bg3) calc(var(--stop) * 3) calc(var(--stop) * 4), var(--ccs-accent--bg2) calc(var(--stop) * 4) calc(var(--stop) * 5), var(--ccs-accent--bg1) calc(var(--stop) * 5) calc(var(--stop) * 6), var(--ccs-accent) calc(var(--stop) * 6) calc(var(--stop) * 7), var(--ccs-accent--fg1) calc(var(--stop) * 7) calc(var(--stop) * 8), var(--ccs-accent--fg2) calc(var(--stop) * 8) calc(var(--stop) * 9), var(--ccs-accent--fg3) calc(var(--stop) * 9) calc(var(--stop) * 10), var(--ccs-accent--fg4) calc(var(--stop) * 10) calc(var(--stop) * 11), var(--ccs-accent--fg5) calc(var(--stop) * 11) calc(var(--stop) * 12), var(--ccs-accent--fg6) calc(var(--stop) * 12) calc(var(--stop) * 13)); + --accent-gradient--fade: linear-gradient(to right, var(--ccs-accent--bg6-fade) calc(var(--stop) * 0) calc(var(--stop) * 1), var(--ccs-accent--bg5-fade) calc(var(--stop) * 1) calc(var(--stop) * 2), var(--ccs-accent--bg4-fade) calc(var(--stop) * 2) calc(var(--stop) * 3), var(--ccs-accent--bg3-fade) calc(var(--stop) * 3) calc(var(--stop) * 4), var(--ccs-accent--bg2-fade) calc(var(--stop) * 4) calc(var(--stop) * 5), var(--ccs-accent--bg1-fade) calc(var(--stop) * 5) calc(var(--stop) * 6), var(--ccs-accent--fade) calc(var(--stop) * 6) calc(var(--stop) * 7), var(--ccs-accent--fg1-fade) calc(var(--stop) * 7) calc(var(--stop) * 8), var(--ccs-accent--fg2-fade) calc(var(--stop) * 8) calc(var(--stop) * 9), var(--ccs-accent--fg3-fade) calc(var(--stop) * 9) calc(var(--stop) * 10), var(--ccs-accent--fg4-fade) calc(var(--stop) * 10) calc(var(--stop) * 11), var(--ccs-accent--fg5-fade) calc(var(--stop) * 11) calc(var(--stop) * 12), var(--ccs-accent--fg6-fade) calc(var(--stop) * 12) calc(var(--stop) * 13)); + --neutral-gradient: linear-gradient(to right, var(--ccs-neutral--bg6) calc(var(--stop) * 0) calc(var(--stop) * 1), var(--ccs-neutral--bg5) calc(var(--stop) * 1) calc(var(--stop) * 2), var(--ccs-neutral--bg4) calc(var(--stop) * 2) calc(var(--stop) * 3), var(--ccs-neutral--bg3) calc(var(--stop) * 3) calc(var(--stop) * 4), var(--ccs-neutral--bg2) calc(var(--stop) * 4) calc(var(--stop) * 5), var(--ccs-neutral--bg1) calc(var(--stop) * 5) calc(var(--stop) * 6), var(--ccs-neutral) calc(var(--stop) * 6) calc(var(--stop) * 7), var(--ccs-neutral--fg1) calc(var(--stop) * 7) calc(var(--stop) * 8), var(--ccs-neutral--fg2) calc(var(--stop) * 8) calc(var(--stop) * 9), var(--ccs-neutral--fg3) calc(var(--stop) * 9) calc(var(--stop) * 10), var(--ccs-neutral--fg4) calc(var(--stop) * 10) calc(var(--stop) * 11), var(--ccs-neutral--fg5) calc(var(--stop) * 11) calc(var(--stop) * 12), var(--ccs-neutral--fg6) calc(var(--stop) * 12) calc(var(--stop) * 13)); + --neutral-gradient--fade: linear-gradient(to right, var(--ccs-neutral--bg6-fade) calc(var(--stop) * 0) calc(var(--stop) * 1), var(--ccs-neutral--bg5-fade) calc(var(--stop) * 1) calc(var(--stop) * 2), var(--ccs-neutral--bg4-fade) calc(var(--stop) * 2) calc(var(--stop) * 3), var(--ccs-neutral--bg3-fade) calc(var(--stop) * 3) calc(var(--stop) * 4), var(--ccs-neutral--bg2-fade) calc(var(--stop) * 4) calc(var(--stop) * 5), var(--ccs-neutral--bg1-fade) calc(var(--stop) * 5) calc(var(--stop) * 6), var(--ccs-neutral--fade) calc(var(--stop) * 6) calc(var(--stop) * 7), var(--ccs-neutral--fg1-fade) calc(var(--stop) * 7) calc(var(--stop) * 8), var(--ccs-neutral--fg2-fade) calc(var(--stop) * 8) calc(var(--stop) * 9), var(--ccs-neutral--fg3-fade) calc(var(--stop) * 9) calc(var(--stop) * 10), var(--ccs-neutral--fg4-fade) calc(var(--stop) * 10) calc(var(--stop) * 11), var(--ccs-neutral--fg5-fade) calc(var(--stop) * 11) calc(var(--stop) * 12), var(--ccs-neutral--fg6-fade) calc(var(--stop) * 12) calc(var(--stop) * 13)); +} + +[data-ccs-field] { + display: var(--ccs-custom-display, var(--ccs-field-display, block)); } [data-ccs-field=hue] { - display: var(--ccs-custom-hue, block); + --ccs-custom-display: var(--ccs-custom-hue, block); } [data-ccs-field=lightness] { - display: var(--ccs-custom-lightness, block); + --ccs-custom-display: var(--ccs-custom-lightness, block); } [data-ccs-field=saturation] { - display: var(--ccs-custom-saturation, block); + --ccs-custom-display: var(--ccs-custom-saturation, block); } [data-ccs-field=contrast] { - display: var(--ccs-custom-contrast, block); + --ccs-custom-display: var(--ccs-custom-contrast, block); } [data-ccs-colors] { --ccs-neutral--theme: var(--ccs-h--accent); - --callout: var(--ccs-accent--bg5-fade); - background: var(--ccs-accent--bg-full); - color: var(--ccs-prime--fg-full); + --callout: var(--ccs-neutral--bg4-fade); } a { @@ -514,10 +580,6 @@ button:active { box-shadow: 2px 2px 0 var(--ccs-prime--bg4) inset; } -[data-ccs-field] { - display: block; -} - [data-label] { display: block; font-size: 0.75em; diff --git a/site/css/styles.css.map b/site/css/styles.css.map index f225fbb..75a1f2c 100644 --- a/site/css/styles.css.map +++ b/site/css/styles.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../../node_modules/cssremedy/css/remedy.css","../../sass/partials/_build.scss","../../sass/partials/_palettes.scss","../../sass/partials/_root.scss","../../sass/config/_colors.scss","../../sass/partials/_colors.scss","../../sass/partials/_modes.scss","../../sass/partials/_themes.scss","../../sass/partials/_menu.scss","../sass/_theme.scss","../sass/_menu.scss","../sass/_palette.scss","../sass/styles.scss"],"names":[],"mappings":"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","file":"styles.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../../node_modules/cssremedy/css/remedy.css","../../sass/partials/_root.scss","../../sass/partials/_modes.scss","../../sass/config/_colors.scss","../../sass/partials/_colors.scss","../../sass/partials/_themes.scss","../../sass/partials/_build.scss","../../sass/partials/_palettes.scss","../../sass/partials/_menu.scss","../sass/_theme.scss","../sass/_menu.scss","../sass/_palette.scss","../sass/styles.scss"],"names":[],"mappings":"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A;EACA;;AAGF;EAGE;EACA;;;AC3BJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;EACA;;;AAqCF;EACE;EACA;EACA;EACA;EACA;;AAnCA;EAsCE;EACA;EACA;EACA;EACA;EACA;;AAxCF;EAmCE;EACA;EACA;EACA;EACA;EACA;;AArCF;EAgCE;EACA;EACA;EACA;EACA;EACA;;AA/BF;EACE;EAkCA;EACA;EACA;EACA;EACA;EACA;EACA;;AArCF;EA+BE;EACA;EACA;EACA;EACA;EACA;EACA;;AAlCF;EA4BE;EACA;EACA;EACA;EACA;EACA;EACA;;;AArDF;EA2DE;;AAxDF;EAwDE;;AArDF;EAqDE;;;AA3DF;EAiEE;;AA9DF;EA8DE;;AA3DF;EA2DE;;;AAjEF;EAwEE;;AArEF;EAqEE;;AAlEF;EAkEE;;;AAxEF;EAkFE;EAEA;EACA;EACA;;AAnFF;EA+EE;EAEA;EACA;EACA;;AAhFF;EA4EE;EAEA;EACA;EACA;;;ACzIJ;EACE;EAaA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAQJ;EACE;EACA;EACA;EACA;;;AC3BF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA","file":"styles.css"} \ No newline at end of file diff --git a/site/sass/_ccs.scss b/site/sass/_ccs.scss index 5b73f97..28e8abd 100644 --- a/site/sass/_ccs.scss +++ b/site/sass/_ccs.scss @@ -2,6 +2,7 @@ $fade-background: 10%, $steps: 6, $fades: 0.9, + $neutral-saturation: 5%, $gradients: true, $build: true, ); diff --git a/site/sass/_menu.scss b/site/sass/_menu.scss index b6c43a8..1c41531 100644 --- a/site/sass/_menu.scss +++ b/site/sass/_menu.scss @@ -31,10 +31,6 @@ button { } } -[data-ccs-field] { - display: block; -} - [data-label] { display: block; font-size: 0.75em; diff --git a/site/sass/_theme.scss b/site/sass/_theme.scss index 24a4db8..a6504f1 100644 --- a/site/sass/_theme.scss +++ b/site/sass/_theme.scss @@ -4,9 +4,7 @@ // ------ [data-ccs-colors] { --ccs-neutral--theme: var(--ccs-h--accent); - --callout: var(--ccs-accent--bg#{ccs.$steps - 1}-fade); - background: var(--ccs-accent--bg-full); - color: var(--ccs-prime--fg-full); + --callout: var(--ccs-neutral--bg#{ccs.$steps - 2}-fade); }