Merge pull request #194 from readium/modes-removal

Modes removal

Author: JayPanoz

_includes/toc.html

@@ -12,7 +12,7 @@
     <li><a href="CSS10-libre_fonts.html">Open Source and Libre Fonts We Can Recommend</a></li>
     <li><a href="CSS10b-variable_fonts.html">Variable fonts</a></li>
     <li><a href="CSS11-overrides_classification.html">User Overrides’ Classification</a></li>
-    <li><a href="CSS12-user_prefs.html">User Settings, Reading Modes and Themes</a></li>
+    <li><a href="CSS12-user_prefs.html">User Settings and Themes</a></li>
     <li><a href="CSS13-a11y_settings_baseline.html">Baseline for a11y-related user settings</a></li>
     <li><a href="CSS14-user_settings_recs.html">Recommendations for User Settings Management</a></li>
     <li><a href="CSS15-user_pref_insights.html">User Preferences’ insights</a></li>

backstop.json

@@ -92,20 +92,6 @@
       "selectors": ["document"],
       "misMatchThreshold" : 0.1
     },
-    {
-      "label": "Sepia mode pref",
-      "url": "http://localhost:8000/tests/sepia.html",
-      "delay": 0,
-      "selectors": ["document"],
-      "misMatchThreshold" : 0.1
-    },
-    {
-      "label": "Night mode pref",
-      "url": "http://localhost:8000/tests/night.html",
-      "delay": 0,
-      "selectors": ["document"],
-      "misMatchThreshold" : 0.1
-    },
     {
       "label": "Theming (Reading System)",
       "url": "http://localhost:8000/tests/theming.html",

css/ReadMe.md

@@ -5,8 +5,7 @@ Readium CSS is a set of reference stylesheets for EPUB Reading Systems. It provi
 - a CSS normalize for EPUB contents;
 - paged and scrolled views;
 - default styles;
-- reading modes (night, sepia, etc.);
-- themes;
+- theming;
 - user settings.
 
 **Note:** Readium CSS stylesheets were not designed and should not be used for fixed-layout EPUB, nor other file formats like FB2, PRC, Mobi, TEI, etc.
@@ -48,23 +47,17 @@ In order to provide this customization, we use custom selectors, which will hope
 
 ### Flags for user settings
 
-By default, we are using flags in the form of CSS variables to manage reading modes and user settings. But you might want to customize those flags in order to use custom attributes (`data-*`) or good old CSS classes.
+By default, we are using flags in the form of CSS variables to manage user settings. But you might want to customize those flags in order to use custom attributes (`data-*`) or good old CSS classes.
 
 A complete list of flags can be found in the [User preferences doc](../docs/CSS12-user_prefs.md).
 
-As an example, if you want to use a CSS class for night mode, it could look like: 
-
-```
-@custom-selector :--night-mode .night-mode;
-```
-
-And if you want to use custom attributes for advanced settings, it could look like:
+As an example, if you want to use custom attributes for advanced settings, it could look like:
 
 ```
 @custom-selector :--advanced-settings [data-settings="advanced"];
 ```
 
-Both would then have to be appended to `html` at runtime.
+It would then have to be appended to `html` at runtime.
 
 Once again, you must rebuild `dist` stylesheets.
 
@@ -175,14 +168,6 @@ root.style.setProperty("--USER__bodyHyphens", "auto");
 
 Of course this example is simplistic. You could for instance create an helper to set multiple properties at once.
 
-#### Apply sepia mode
-
-To apply the sepia mode, you can use a flag that will apply preset values.
-
-```
-root.style.setProperty("--USER__appearance", "readium-sepia-on");
-```
-
 ## Create Themes
 
 In Readium CSS model, themes are a set of user settings you can store and retrieve. Add the properties to `html` and you get a theme.
@@ -191,10 +176,11 @@ Depending on the prefix you are using, `--RS__` or `--USER__`, your theme will o
 
 Check the [User Preferences doc](../docs/CSS12-user_prefs.md) for a list of available user variables.
 
-You can also retrieve ReadiumCSS presets for font-stacks and modes by adding it as a package, then importing its exposed json files. For instance in JS/TS:
+You can also retrieve ReadiumCSS presets for font-stacks, colors and pagination by adding it as a package, then importing its exposed json files. For instance in JS/TS:
 
 ```
-import sepiaMode from "readium-css/css/vars/sepia.json";
+import defaultColors from "readium-css/css/vars/colors.json";
 
-const sepiaBackground = sepiaMode.sepiaMode.RS__backgroundColor;
+const backgroundColor = defaultColors.RS__backgroundColor;
+const textColor = defaultColors.RS__color;
 ```

css/ReadiumCSS-config.css

@@ -1,8 +1,7 @@
 /* Readium CSS 
    Config module
 
-   A file allowing implementers to customize flags for reading modes,
-   user settings, etc.
+   A file allowing implementers to customize flags for user settings, etc.
 
    Repo: https://github.com/readium/css */
 
@@ -21,10 +20,6 @@
 /* Font-size normalization for engines that don’t support zoom */
 @custom-selector :--fs-normalize [style*="readium-normalize-on"];
 
-/* Reading Modes */
-@custom-selector :--sepia-mode [style*="readium-sepia-on"];
-@custom-selector :--night-mode [style*="readium-night-on"];
-
 /* Filters (images) */
 @custom-selector :--blend-filter [style*="readium-blend-on"];
 @custom-selector :--darken-filter [style*="readium-darken-on"];

css/demo/index.html

@@ -29,7 +29,7 @@
       -moz-user-select: none;
       -ms-user-select: none;
       user-select: none;
-      /* May help later with Reading modes so that bg can be applied to whole page
+      /* May help later with theming so that bg can be applied to whole page
          You need to allowtransparency on the iframe though (and sanitize authors’ CSS) */
       background-color: transparent;
     }

css/demo/page.xhtml

@@ -41,7 +41,7 @@
   <p>Call me Ishmael. Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people’s hats off—then, I account it high time to get to sea as soon as I can. This is my substitute for pistol and ball. With a philosophical flourish Cato throws himself upon his sword; I quietly take to the ship. There is nothing surprising in this. If they but knew it, almost all men in their degree, some time or other, cherish very nearly the same feelings towards the ocean with me.</p>
 
   <figure>
-    <img alt="test if mix blend mode works in sepia, and invert in night mode" class="gaiji" src="assets/white.jpg" />
+    <img alt="test if gaiji work" class="gaiji" src="assets/white.jpg" />
   </figure>
 
   <p>There now is your insular city of the Manhattoes, belted round by wharves as Indian isles by coral reefs—commerce surrounds it with her surf. Right and left, the streets take you waterward. Its extreme downtown is the battery, where that noble mole is washed by waves, and cooled by breezes, which a few hours previous were out of sight of land. Look at the crowds of water-gazers there.</p>

css/dist/ReadiumCSS-after.css

@@ -1,5 +1,5 @@
 /*!
- * Readium CSS v.2.0.0-beta.18
+ * Readium CSS v.2.0.0-beta.19
  * Copyright (c) 2017–2025. Readium Foundation. All rights reserved.
  * Use of this source code is governed by a BSD-style license which is detailed in the
  * LICENSE file present in the project repository where this source code is maintained.
@@ -140,145 +140,6 @@ body{
   padding-right:var(--RS__scrollPaddingRight) !important;
 }
 
-:root[style*="readium-night-on"]{
-
-  --RS__selectionTextColor:inherit;
-
-  --RS__selectionBackgroundColor:#b4d8fe;
-
-  --RS__visitedColor:#0099E5;
-
-  --RS__linkColor:#63caff;
-
-  --RS__textColor:#FEFEFE;
-
-  --RS__backgroundColor:#000000;
-}
-
-:root[style*="readium-night-on"] *:not(a){
-  color:inherit !important;
-  background-color:transparent !important;
-  border-color:currentcolor !important;
-}
-
-:root[style*="readium-night-on"] svg text{
-  fill:currentcolor !important;
-  stroke:none !important;
-}
-
-:root[style*="readium-night-on"] a:link,
-:root[style*="readium-night-on"] a:link *{
-  color:var(--RS__linkColor) !important;
-}
-
-:root[style*="readium-night-on"] a:visited,
-:root[style*="readium-night-on"] a:visited *{
-  color:var(--RS__visitedColor) !important;
-}
-
-:root[style*="readium-night-on"] img[class*="gaiji"],
-:root[style*="readium-night-on"] *[epub\:type~="titlepage"] img:only-child,
-:root[style*="readium-night-on"] *[epub|type~="titlepage"] img:only-child{
-  -webkit-filter:invert(100%);
-  filter:invert(100%);
-}
-
-:root[style*="readium-sepia-on"]{
-
-  --RS__selectionTextColor:inherit;
-
-  --RS__selectionBackgroundColor:#b4d8fe;
-
-  --RS__visitedColor:#551A8B;
-
-  --RS__linkColor:#0000EE;
-
-  --RS__textColor:#121212;
-
-  --RS__backgroundColor:#faf4e8;
-}
-
-:root[style*="readium-sepia-on"] *:not(a){
-  color:inherit !important;
-  background-color:transparent !important;
-}
-
-:root[style*="readium-sepia-on"] a:link,
-:root[style*="readium-sepia-on"] a:link *{
-  color:var(--RS__linkColor);
-}
-
-:root[style*="readium-sepia-on"] a:visited,
-:root[style*="readium-sepia-on"] a:visited *{
-  color:var(--RS__visitedColor);
-}
-
-@media screen and (-ms-high-contrast: active){
-
-  :root{
-    color:windowText !important;
-    background-color:window !important;
-  }
-
-  :root :not(#\#):not(#\#):not(#\#),
-  :root :not(#\#):not(#\#):not(#\#) :not(#\#):not(#\#):not(#\#)
-  :root :not(#\#):not(#\#):not(#\#) :not(#\#):not(#\#):not(#\#) :not(#\#):not(#\#):not(#\#){
-    color:inherit !important;
-    background-color:inherit !important;
-  }
-
-  .readiumCSS-mo-active-default{
-    color:highlightText !important;
-    background-color:highlight !important;
-  }
-}
-
-@media screen and (-ms-high-contrast: white-on-black){
-
-  :root[style*="readium-night-on"] img[class*="gaiji"],
-  :root[style*="readium-night-on"] *[epub\:type~="titlepage"] img:only-child,
-  :root[style*="readium-night-on"] *[epub|type~="titlepage"] img:only-child{
-    -webkit-filter:none !important;
-    filter:none !important;
-  }
-
-  :root[style*="readium-night-on"][style*="readium-invert-on"] img{
-    -webkit-filter:none !important;
-    filter:none !important;
-  }
-
-  :root[style*="readium-night-on"][style*="readium-darken-on"][style*="readium-invert-on"] img{
-    -webkit-filter:brightness(80%);
-    filter:brightness(80%);
-  }
-}
-
-@media screen and (inverted-colors){
-
-  :root[style*="readium-night-on"] img[class*="gaiji"],
-  :root[style*="readium-night-on"] *[epub\:type~="titlepage"] img:only-child,
-  :root[style*="readium-night-on"] *[epub|type~="titlepage"] img:only-child{
-    -webkit-filter:none !important;
-    filter:none !important;
-  }
-
-  :root[style*="readium-night-on"][style*="readium-invert-on"] img{
-    -webkit-filter:none !important;
-    filter:none !important;
-  }
-
-  :root[style*="readium-night-on"][style*="readium-darken-on"][style*="readium-invert-on"] img{
-    -webkit-filter:brightness(80%);
-    filter:brightness(80%);
-  }
-}
-
-@media screen and (monochrome){
-}
-
-@media screen and (prefers-reduced-motion){
-}
-
 :root[style*="--USER__backgroundColor"]{
   background-color:var(--USER__backgroundColor) !important;
 }

css/dist/ReadiumCSS-before.css

@@ -1,5 +1,5 @@
 /*!
- * Readium CSS v.2.0.0-beta.18
+ * Readium CSS v.2.0.0-beta.19
  * Copyright (c) 2017–2025. Readium Foundation. All rights reserved.
  * Use of this source code is governed by a BSD-style license which is detailed in the
  * LICENSE file present in the project repository where this source code is maintained.

css/dist/ReadiumCSS-default.css

@@ -1,5 +1,5 @@
 /*!
- * Readium CSS v.2.0.0-beta.18
+ * Readium CSS v.2.0.0-beta.19
  * Copyright (c) 2017–2025. Readium Foundation. All rights reserved.
  * Use of this source code is governed by a BSD-style license which is detailed in the
  * LICENSE file present in the project repository where this source code is maintained.