Skip to content

Commit 368366a

Browse files
JayPanozJayPanoz
committed
Update theming properties
1 parent 581a263 commit 368366a

15 files changed

+207
-26
lines changed

‎css/src/ReadiumCSS-after-cjk-horizontal.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@
44
@import "modules/ReadiumCSS-scroll.css";
55
@import "modules/ReadiumCSS-night_mode.css";
66
@import "modules/ReadiumCSS-sepia_mode.css";
7-
@import "modules/ReadiumCSS-theming.css";
87
@import "modules/ReadiumCSS-os_a11y.css";
8+
@import "modules/user-settings-submodules/ReadiumCSS-customColors_pref.css";
9+
@import "modules/user-settings-submodules/ReadiumCSS-theming.css";
910
@import "modules/user-settings-submodules/ReadiumCSS-colNumber_pref.css";
1011
@import "modules/user-settings-submodules/ReadiumCSS-lineLength_pref.css";
11-
@import "modules/user-settings-submodules/ReadiumCSS-customColors_pref.css";
1212
@import "modules/user-settings-submodules/ReadiumCSS-fontFamily_pref.css";
1313
@import "modules/user-settings-submodules/ReadiumCSS-fontSize_pref.css";
1414
@import "modules/user-settings-submodules/ReadiumCSS-lineHeight_pref.css";

‎css/src/ReadiumCSS-after-cjk-vertical.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@
44
@import "modules/ReadiumCSS-scroll-vertical.css";
55
@import "modules/ReadiumCSS-night_mode.css";
66
@import "modules/ReadiumCSS-sepia_mode.css";
7-
@import "modules/ReadiumCSS-theming.css";
87
@import "modules/ReadiumCSS-os_a11y.css";
9-
@import "modules/user-settings-submodules/ReadiumCSS-lineLength-vertical_pref.css";
108
@import "modules/user-settings-submodules/ReadiumCSS-customColors_pref.css";
9+
@import "modules/user-settings-submodules/ReadiumCSS-theming.css";
10+
@import "modules/user-settings-submodules/ReadiumCSS-lineLength-vertical_pref.css";
1111
@import "modules/user-settings-submodules/ReadiumCSS-fontFamily_pref.css";
1212
@import "modules/user-settings-submodules/ReadiumCSS-fontSize_pref.css";
1313
@import "modules/user-settings-submodules/ReadiumCSS-lineHeight_pref.css";

‎css/src/ReadiumCSS-after-rtl.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@
44
@import "modules/ReadiumCSS-scroll.css";
55
@import "modules/ReadiumCSS-night_mode.css";
66
@import "modules/ReadiumCSS-sepia_mode.css";
7-
@import "modules/ReadiumCSS-theming.css";
87
@import "modules/ReadiumCSS-os_a11y.css";
8+
@import "modules/user-settings-submodules/ReadiumCSS-customColors_pref.css";
9+
@import "modules/user-settings-submodules/ReadiumCSS-theming.css";
910
@import "modules/user-settings-submodules/ReadiumCSS-colNumber_pref.css";
1011
@import "modules/user-settings-submodules/ReadiumCSS-lineLength_pref.css";
11-
@import "modules/user-settings-submodules/ReadiumCSS-customColors_pref.css";
1212
@import "modules/user-settings-submodules/ReadiumCSS-textAlign_pref.css";
1313
@import "modules/user-settings-submodules/ReadiumCSS-fontFamily_pref.css";
1414
@import "modules/user-settings-submodules/ReadiumCSS-fontSize_pref.css";

‎css/src/ReadiumCSS-after.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@
44
@import "modules/ReadiumCSS-scroll.css";
55
@import "modules/ReadiumCSS-night_mode.css";
66
@import "modules/ReadiumCSS-sepia_mode.css";
7-
@import "modules/ReadiumCSS-theming.css";
87
@import "modules/ReadiumCSS-os_a11y.css";
8+
@import "modules/user-settings-submodules/ReadiumCSS-customColors_pref.css";
9+
@import "modules/user-settings-submodules/ReadiumCSS-theming.css";
910
@import "modules/user-settings-submodules/ReadiumCSS-colNumber_pref.css";
1011
@import "modules/user-settings-submodules/ReadiumCSS-lineLength_pref.css";
11-
@import "modules/user-settings-submodules/ReadiumCSS-customColors_pref.css";
1212
@import "modules/user-settings-submodules/ReadiumCSS-textAlign_pref.css";
1313
@import "modules/user-settings-submodules/ReadiumCSS-bodyHyphens_pref.css";
1414
@import "modules/user-settings-submodules/ReadiumCSS-fontFamily_pref.css";

‎css/src/modules/ReadiumCSS-day_mode.css

+2
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@
1717
color: var(--RS__textColor) !important;
1818
}
1919

20+
/* Note: We’re not defining colors of links cos’ the selector specificity with :link and :visited could override publishers’ styles */
21+
2022
/* Note: Though `::selection` was present in drafts of CSS Selectors Level 3, it was removed during the Candidate Recommendation phase because its behavior was under-specified (especially with nested elements) and interoperability wasn’t achieved. Source: https://developer.mozilla.org/en-US/docs/Web/CSS/::selection */
2123

2224
::-moz-selection {

‎css/src/modules/ReadiumCSS-theming.css ‎css/src/modules/user-settings-submodules/ReadiumCSS-theming.css

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,34 @@
11
/* Readium CSS
22
Theming module
33
4-
A stylesheet to enforce link colors and image filters
4+
A stylesheet to enforce link colors
55
This is intended to make it easier to create custom themes
66
without having to rely on preset modes as a base to override
77
88
Repo: https://github.com/readium/readium-css */
99

1010
/* Color of links (:link + :visited) */
1111

12-
:root[style*="--RS__linkColor"] a:link,
13-
:root[style*="--RS__linkColor"] a:link * {
12+
:root[style*="--USER__linkColor"] a:link,
13+
:root[style*="--USER__linkColor"] a:link * {
1414
color: var(--RS__linkColor) !important;
1515
}
1616

17-
:root[style*="--RS__visitedColor"] a:visited,
18-
:root[style*="--RS__visitedColor"] a:visited * {
17+
:root[style*="--USER__visitedColor"] a:visited,
18+
:root[style*="--USER__visitedColor"] a:visited * {
1919
color: var(--RS__visitedColor) !important;
2020
}
2121

2222
/* Color of ::selection */
2323
/* This differs from the implementation inherited in (default) day mode
2424
as it is using !important and will override authors’ styles. */
2525

26-
:root[style*="--RS__selectionBackgroundColor"][style*="--RS__selectionTextColor"] ::-moz-selection {
26+
:root[style*="--USER__selectionBackgroundColor"][style*="--USER__selectionTextColor"] ::-moz-selection {
2727
background-color: var(--RS__selectionBackgroundColor) !important;
2828
color: var(--RS__selectionTextColor) !important;
2929
}
3030

31-
:root[style*="--RS__selectionBackgroundColor"][style*="--RS__selectionTextColor"] ::selection {
31+
:root[style*="--USER__selectionBackgroundColor"][style*="--USER__selectionTextColor"] ::selection {
3232
background-color: var(--RS__selectionBackgroundColor) !important;
3333
color: var(--RS__selectionTextColor) !important;
3434
}

‎css/vars/day.json

+2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
{
22
"RS__backgroundColor": "#FFFFFF",
33
"RS__textColor": "#121212",
4+
"RS__linkColor": "#0000EE",
5+
"RS__visitedColor": "#551A8B",
46
"RS__selectionBackgroundColor": "#b4d8fe",
57
"RS__selectionTextColor": "inherit"
68
}

‎docs/CSS12-user_prefs.md

+14-3
Original file line numberDiff line numberDiff line change
@@ -213,17 +213,28 @@ Override class: Chrome advanced (optional but should be applied by any means nec
213213

214214
To reset, remove the variable.
215215

216-
### Themes (background and text colors)
216+
### Themes
217217

218-
The user can set a `background-color` and `color`.
218+
The user can set at least a `background-color` and `color`.
219219

220-
The following two variables must be used together.
220+
At minimal, the following two variables should therefore must be used together.
221221

222222
```
223223
--USER__backgroundColor
224224
--USER__textColor
225225
```
226226

227+
You can use 4 other properties to handle the color of links and selection:
228+
229+
```
230+
--USER__linkColor
231+
--USER__visitedColor
232+
--USER__selectionBackgroundColor
233+
--USER__selectionTextColor
234+
```
235+
236+
It’s up to implementers to decide whether they want to expose these as user settings i.e. for power/advanced users, or set them after deriving the value from background and text color (e.g. a contrast algorithm).
237+
227238
Possible values: Color HEX (e.g. `#FFFFFF`), `rgb(a)`, `hsl`.
228239

229240
Required flag: none

‎docs/CSS19-api.md

+81-1
Original file line numberDiff line numberDiff line change
@@ -699,7 +699,87 @@ The `color` for textual contents.
699699

700700
Scope: `html`
701701

702-
It impacts all elements but headings and `pre` in the DOM.
702+
It impacts all elements in the DOM.
703+
704+
Possible values: Color HEX (e.g. `#FFFFFF`), `rgb(a)`, `hsl`.
705+
706+
Required flag: none
707+
708+
Override class: Chrome advanced (optional but should be applied by any means necessary if provided to users)
709+
710+
To reset, remove the CSS variable.
711+
712+
* * *
713+
714+
```
715+
--USER__linkColor
716+
```
717+
718+
The `color` for links.
719+
720+
Scope: `html`
721+
722+
It impacts all anchor elements in the DOM that have not been visited yet.
723+
724+
Possible values: Color HEX (e.g. `#FFFFFF`), `rgb(a)`, `hsl`.
725+
726+
Required flag: none
727+
728+
Override class: Chrome advanced (optional but should be applied by any means necessary if provided to users)
729+
730+
To reset, remove the CSS variable.
731+
732+
* * *
733+
734+
```
735+
--USER__visitedColor
736+
```
737+
738+
The `color` for visited links.
739+
740+
Scope: `html`
741+
742+
It impacts all anchor elements in the DOM that have already been visited.
743+
744+
Possible values: Color HEX (e.g. `#FFFFFF`), `rgb(a)`, `hsl`.
745+
746+
Required flag: none
747+
748+
Override class: Chrome advanced (optional but should be applied by any means necessary if provided to users)
749+
750+
To reset, remove the CSS variable.
751+
752+
* * *
753+
754+
```
755+
--USER__selectionBackgroundColor
756+
```
757+
758+
The `background-color` for selected text.
759+
760+
Scope: `html`
761+
762+
It impacts all elements in the DOM.
763+
764+
Possible values: Color HEX (e.g. `#FFFFFF`), `rgb(a)`, `hsl`.
765+
766+
Required flag: none
767+
768+
Override class: Chrome advanced (optional but should be applied by any means necessary if provided to users)
769+
770+
To reset, remove the CSS variable.
771+
772+
* * *
773+
774+
```
775+
--USER__selectionTextColor
776+
```
777+
778+
The `color` for selected text.
779+
780+
Scope: `html`
781+
782+
It impacts all elements in the DOM.
703783

704784
Possible values: Color HEX (e.g. `#FFFFFF`), `rgb(a)`, `hsl`.
705785

‎docs/ReadiumCSS-user_variables.css

+4
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,10 @@
1212

1313
--USER__backgroundColor: ; /* Custom color (not preset mode) */
1414
--USER__textColor: ; /* Custom color (not preset mode) */
15+
--USER__linkColor: ; /* Custom color (not preset mode) */
16+
--USER__visitedColor: ; /* Custom color (not preset mode) */
17+
--USER__selectionBackgroundColor: ; /* Custom color (not preset mode) */
18+
--USER__selectionTextColor: ; /* Custom color (not preset mode) */
1519

1620
--USER__textAlign: ; /* left, justify */
1721
--USER__bodyHyphens: ; /* none, auto */

‎docs/ReadiumCSS_docs.epub

206 Bytes
Binary file not shown.

‎docs/ReadiumCSS_docs/OEBPS/Text/Section-012.xhtml

+15-5
Original file line numberDiff line numberDiff line change
@@ -235,14 +235,24 @@ root.style.setProperty("name of var", "");</code></pre>
235235
</section>
236236
</section>
237237

238-
<section id="themes-background-and-text-colors" class="level3">
239-
<h3 class="sigil_not_in_toc">Themes (background and text colors)</h3>
238+
<section id="themes" class="level3">
239+
<h3 class="sigil_not_in_toc">Themes</h3>
240240

241-
<p>The user can set a <code>background-color</code> and <code>color</code>.</p>
241+
<p>The user can set at least a <code>background-color</code> and <code>color</code>.</p>
242242

243-
<p>The following two variables must be used together.</p>
243+
<p>At minimal, the following two variables should therefore must be used together.</p>
244244

245-
<pre><code>--USER__backgroundColor --USER__textColor</code></pre>
245+
<pre><code>--USER__backgroundColor
246+
--USER__textColor</code></pre>
247+
248+
<p>You can use 4 other properties to handle the color of links and selection:</p>
249+
250+
<pre><code>--USER__linkColor
251+
--USER__visitedColor
252+
--USER__selectionBackgroundColor
253+
--USER__selectionTextColor</code></pre>
254+
255+
<p>It’s up to implementers to decide whether they want to expose these as user settings i.e. for power/advanced users, or set them after deriving the value from background and text color (e.g. a contrast algorithm).</p>
246256

247257
<p>Possible values: Color HEX (e.g. <code>#FFFFFF</code>), <code>rgb(a)</code>, <code>hsl</code>.</p>
248258

‎docs/ReadiumCSS_docs/OEBPS/Text/Section-019.xhtml

+72
Original file line numberDiff line numberDiff line change
@@ -632,6 +632,78 @@
632632

633633
<hr/>
634634

635+
<pre><code>--USER__linkColor</code></pre>
636+
637+
<p>The <code>color</code> for links.</p>
638+
639+
<p>Scope: <code>html</code></p>
640+
641+
<p>It impacts all anchor elements in the DOM that have not been visited yet.</p>
642+
643+
<p>Possible values: Color HEX (e.g. <code>#FFFFFF</code>), <code>rgb(a)</code>, <code>hsl</code>.</p>
644+
645+
<p>Required flag: none</p>
646+
647+
<p>Override class: Chrome advanced (optional but should be applied by any means necessary if provided to users)</p>
648+
649+
<p>To reset, remove the CSS variable.</p>
650+
651+
<hr/>
652+
653+
<pre><code>--USER__visitedLink</code></pre>
654+
655+
<p>The <code>color</code> for visited links.</p>
656+
657+
<p>Scope: <code>html</code></p>
658+
659+
<p>It impacts all anchor elements in the DOM that have been already visited.</p>
660+
661+
<p>Possible values: Color HEX (e.g. <code>#FFFFFF</code>), <code>rgb(a)</code>, <code>hsl</code>.</p>
662+
663+
<p>Required flag: none</p>
664+
665+
<p>Override class: Chrome advanced (optional but should be applied by any means necessary if provided to users)</p>
666+
667+
<p>To reset, remove the CSS variable.</p>
668+
669+
<hr/>
670+
671+
<pre><code>--USER__selectionBackgroundColor</code></pre>
672+
673+
<p>The <code>background-color</code> for selected text.</p>
674+
675+
<p>Scope: <code>html</code></p>
676+
677+
<p>It impacts all elements in the DOM.</p>
678+
679+
<p>Possible values: Color HEX (e.g. <code>#FFFFFF</code>), <code>rgb(a)</code>, <code>hsl</code>.</p>
680+
681+
<p>Required flag: none</p>
682+
683+
<p>Override class: Chrome advanced (optional but should be applied by any means necessary if provided to users)</p>
684+
685+
<p>To reset, remove the CSS variable.</p>
686+
687+
<hr/>
688+
689+
<pre><code>--USER__selectionTextColor</code></pre>
690+
691+
<p>The <code>color</code> for selected text.</p>
692+
693+
<p>Scope: <code>html</code></p>
694+
695+
<p>It impacts all elements in the DOM.</p>
696+
697+
<p>Possible values: Color HEX (e.g. <code>#FFFFFF</code>), <code>rgb(a)</code>, <code>hsl</code>.</p>
698+
699+
<p>Required flag: none</p>
700+
701+
<p>Override class: Chrome advanced (optional but should be applied by any means necessary if provided to users)</p>
702+
703+
<p>To reset, remove the CSS variable.</p>
704+
705+
<hr/>
706+
635707
<pre><code>--USER__textAlign</code></pre>
636708

637709
<p>The alignment (<code>text-align</code>) the user prefers.</p>

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@readium/css",
33
"description": "A set of reference stylesheets for EPUB Reading Systems",
4-
"version": "2.0.0-beta.1",
4+
"version": "2.0.0-beta.2",
55
"homepage": "https://github.com/readium/readium-css",
66
"license": "BSD-3-Clause",
77
"keywords": [

‎tests/theming.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!doctype html>
2-
<html style="--USER__view: readium-scroll-on; --RS__backgroundColor: grey; --RS__textColor: white; --RS__linkColor: red;">
2+
<html style="--USER__view: readium-scroll-on; --USER__backgroundColor: grey; --USER__textColor: white; --USER__linkColor: red;">
33
<head>
44
<title>Test</title>
55
<meta charset="UTF-8" />

0 commit comments

Comments
 (0)