Update docs

Remove all instances of sepia, night, and reading modes

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>

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

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>

docs/CSS01-readiumcss_fundamentals.md

@@ -12,7 +12,7 @@ Indeed, EPUB is not supported natively so we must build on top of web browsers
 
 With such a role comes great responsibility: we must try to behave like browsers are behaving – i.e. be liberal in what we accept from authors –, and find a sensible balance between authors’ stylesheets and users’ overrides.
 
-Authors and users have expectations though, and we had to take those into account. For instance, they are used to having EPUB contents laid out in a paged view, with reading modes (paper, sepia, night) and a minimal set of common settings.
+Authors and users have expectations though, and we had to take those into account. For instance, they are used to having EPUB contents laid out in a paged view and a minimal set of common settings.
 
 By serving as a User Agent, we must make sure:
 
@@ -36,7 +36,7 @@ CSS has a lot to offer nowadays, and it can help solve complex issues in simpler
 Readium CSS has been be designed following 4 core principles:
 
 1. **Modularity:** Readium CSS is not a monolithic stylesheet but a set of modules;
-2. **Separation of Reading System’s Concerns:** those modules are task-oriented e.g. paginate, apply default styles, intercept styles for reading modes or user settings, apply a reading mode or user setting, apply a theme, etc.;
+2. **Separation of Reading System’s Concerns:** those modules are task-oriented e.g. paginate, apply default styles, intercept styles for user settings, apply a user setting or theme, etc.;
 3. **Daisy-chainability:** those modules can be loaded and daisy-chained (cascade) depending on conditions;
 4. **Customization:** modules can be customized either before or during runtime (CSS variables), which implies themes can be generated within minutes.
 

docs/CSS02-quickstart.md

@@ -7,8 +7,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.
@@ -50,14 +49,14 @@ 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: 
+As an example, if you want to use custom attributes for advanced settings, it could look like:
 
 ```
-@custom-selector :--night-mode .night-mode;
+@custom-selector :--advanced-settings [data-settings="advanced"];
 ```
 
 It would then have to be appended to `html` at runtime.
@@ -170,15 +169,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.
@@ -187,10 +177,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 dependency, 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 dependency, 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;
 ```

docs/CSS03-injection_and_pagination.md

@@ -22,7 +22,7 @@ Finally, on larger screens, you’ll have to set dimensions on this container so
 
 ### Background color
 
-Please note you must deal with the `background-color` outside this container, especially as the user can set reading modes (night, sepia, etc.). In other words, it must be synced with this user setting so that the entire screen is the same `background-color`.
+Please note you must deal with the `background-color` outside this container, especially as the user could set an arbitrary color through theming. In other words, it must be synced with this user setting so that the entire screen is the same `background-color`.
 
 As a friendly reminder, you can allow transparency for the iframe if you’re using one. That should help deal with `background-color` at the global level.
 

docs/CSS04-multicolumn_layout.md

@@ -217,11 +217,7 @@ What is important to remark is that:
 
 ## Reflow
 
-CSS multicol relies on a complex (fragmentation) logic, and this logic varies for each browser. 
-
-In Blink and Webkit for instance, a reflow won’t happen for the document (`:root`) if we don’t force a reflow at the `body` level. As a consequence, we’re using the `--RS__defaultLineLength` CSS variable to force this reflow and slightly alter its value whenever needed e.g. “pagination to scroll” in vertical writing, `mix-blend-mode` in sepia mode, “number of columns” user setting, etc. 
-
-This will recalc the `body`’s `max-width`, causing a reflow which will propagate to the column layout we set for `:root`.
+CSS multicol relies on a complex (fragmentation) logic, and this logic varies for each browser. In some cases, it can be necessary to force a reflow or recalc to update the layout.
 
 ## Notorious limitations
 

docs/CSS08-defaults.md

@@ -2,12 +2,10 @@
 
 [Implementers’ doc] [Authors’ info]
 
-Defaults is currently made of 5 stylesheets:
+Defaults is currently made of 2 stylesheets:
 
 - 1 base stylesheet for all ebooks;
-- 1 default reading mode stylesheet for all ebooks;
-- 1 default stylesheet for unstyled ebooks;
-- 1 stylesheet to deal with the OS’ a11y modes.
+- 1 default stylesheet for unstyled ebooks.
 
 **Note:** The default stylesheet should not be appended if there are author styles in the EPUB file.
 
@@ -341,15 +339,4 @@ An optional primary accentuation `color` you could use for headings or any other
 --RS__secondaryColor
 ```
 
-An optional secondary accentuation `color` you could use for any element of your choice.
-
-## OS’ a11y modes
-
-This stylesheet is intended to deal with a11y settings users can set at the OS level, whenever possible: 
-
-- high-contrast mode;
-- inverted colors;
-- monochrome;
-- reduced motion.
-
-For `monochrome`, we’ll have to adjust reading modes (night, sepia, etc.) in their specific stylesheet; we’ll see if we can at least manage some more global settings in there.
+An optional secondary accentuation `color` you could use for any element of your choice.