Merge pull request #3 from mirisuzanne/fix-modes

Fix broken HTML modes

Author: mirisuzanne

.sassdocrc

@@ -10,6 +10,8 @@ groups:
   Getting Started:
     import: Import CSS or Sass
     config: Global Settings
+    fallbacks: Fallback Colors & Modes
+    modes: Dynamic Modes
   'Sass (optional)':
     palettes: Color Palettes
     tools: Additional Tools

CHANGELOG.md

@@ -1,8 +1,17 @@
 # Changelog
 
+## 0.1.0-beta.10 - 2019/12/5
+
+- BUGFIX: Source & cascade order was causing HTML modes to fail
+- BREAKING: Rename `--ccs-mode--invert` to `--ccs-invert`,
+  and `--ccs-mode--invert-zero` to `--ccs-invert--zero`
+- BREAKING: Remove `prefers-color-scheme` media-query from fallback colors,
+  since more browsers support variables than color-scheme queries
+- DOCS: Added documentation of fallback and mode settings
+
 ## 0.1.0-beta.9 - 2019/11/29
 
-- NEW: `--ccs-mode--zero` and `--ccs-mode--invert-zero`
+- NEW: `--ccs-mode--zero` and `--ccs-invert--zero`
   provide mode values of `0` (dark) or `1` (light),
   rather than `-1` (dark) and `1` (light)
 - NEW: `if-mode($light, $dark)` function returns a CSS `calc()` toggle

README.md

@@ -148,7 +148,7 @@ to generate a larger palette:
 - `--ccs-mode`:
   the calculated light (`1`) or dark (`-1`) mode
   (user, theme, html, or system preference)
-- `--ccs-mode--invert` the opposite of CCS-mode
+- `--ccs-invert` the opposite of CCS-mode
 
 You can pass explicit light/dark mode overrides in html
 by including a value with the attribute:

css/ccs.css

@@ -104,6 +104,12 @@ <h2 data-ccs-colors="invert">accent</h2>
       <h2 data-ccs-colors="invert">neutral</h2>
       <div style="--show: var(--neutral-gradient), var(--neutral-gradient--fade)"></div>
     </section>
+
+    <ul class="modes" role="presentation">
+      <li data-ccs-colors="light">light</li>
+      <li data-ccs-colors="invert">"invert"</li>
+      <li data-ccs-colors="dark">dark</li>
+    </ul>
   </main>
 
   <footer>

css/ccs.css.map

@@ -1,6 +1,6 @@
 {
   "name": "cascading-color-systems",
-  "version": "0.1.0-beta.9",
+  "version": "0.1.0-beta.10",
   "description": "generate dynamic color palettes with custom properties",
   "main": "dist.js",
   "module": "index.js",

index.html

@@ -13,7 +13,7 @@
   // initial lightness values
   --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--fg-contrast: calc(var(--ccs-l) + var(--ccs-contrast) * var(--ccs-invert));
   --ccs-l--bg-contrast: calc(var(--ccs-l) + var(--ccs-contrast) * var(--ccs-mode));
 
   // initial saturation values
@@ -24,16 +24,9 @@
   --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)));
-  --ccs-mode: var(--ccs-mode--cascade, 1);
-  --ccs-mode--zero: calc((var(--ccs-mode) + 1) * 0.5);
-  --ccs-mode--invert: calc(-1 * var(--ccs-mode));
-  --ccs-mode--invert-zero: calc((var(--ccs-mode--invert) + 1) * 0.5);
-
   // full contrast colors, foreground and background
   --ccs--bg-full: hsl(0, 0%, calc(100% * var(--ccs-mode)));
-  --ccs--fg-full: hsl(0, 0%, calc(100% * var(--ccs-mode--invert)));
+  --ccs--fg-full: hsl(0, 0%, calc(100% * var(--ccs-invert)));
 
   @each $color in ('prime', 'accent', 'neutral') {
     $s: if($color == 'neutral', '--neutral', null);

package.json

@@ -0,0 +1,29 @@
+@use '../config';
+
+/// # Fallback Colors & Modes
+/// fallback values, in case variables are not supported.
+/// Since variables have better support than `prefers-color-scheme`,
+/// there is no need for a media-query in the fallback modes.
+/// @group fallbacks
+
+/// The default is a "light" background theme,
+/// which can also be called explicitly.
+/// @name light modes
+/// @group fallbacks
+[data-ccs-colors],
+[data-ccs-colors='light'] {
+  background-color: config.$fallback-light;
+  color: config.$fallback-dark;
+}
+
+/// "Dark" background and "invert" modes
+/// reverse the default colors.
+/// Since dynamic inversion would increase specificity,
+/// the fallback for "invert" has to be static.
+/// @name dark modes
+/// @group fallbacks
+[data-ccs-colors='invert'],
+[data-ccs-colors='dark'] {
+  background-color: config.$fallback-dark;
+  color: config.$fallback-light;
+}

sass/partials/_colors.scss

@@ -4,8 +4,9 @@
 
 // setup
 @forward 'root';
-@forward 'modes';
+@forward 'fallbacks';
 @forward 'colors';
+@forward 'modes';
 @forward 'themes';
 
 // build