colors for accessibility, knowls, assemblages

Author: davidfarmer

Diff for: colors_default.css

@@ -1,12 +1,13 @@
 
 /*
- There are four main choices that define a color scheme in the
+ There are five main choices that define a color scheme in the
  HTML output of PreTeXt:
  1) A dark color for the title on each page
  2) A dark color for highlighted words in the body
+ 3) A dark color for other highlighted words in the body
 
- In the CSS those are called 'documenttitle' and 'bodytitle'.
- Often those are equal.
+ In the CSS those are called 'documenttitle', 'bodytitle',
+ and 'bodysubtitle'.
 
  The other two choices appear in the ToC.
 
@@ -37,8 +38,15 @@
 
 :root {
   --documenttitle: #932919;
-  --bodytitle: #932919;
-  --bodyverylight: #ffdfcf;
+  --bodytitle: #A62E1C;  /* often a darker version of documenttitle  */
+  --bodysubtitle: #2B5F82;  /* can be the same as bodytitle  */
+  --bodytitlehighlight: #e0e9ff;  /* light, and contrasting to bodytitle  */
+  --bodysubtitlehighlight: #fce5e4;  /* light, and contrasting to bodysubtitle  */
+     /*
+       The bodytitle and bodysubtitle colors must have at least a 3:1 contrast
+       ratio with black, and at least 5:1 ratio with with the corresponding highlight.
+       (The second condition will guarantee an adequate contrast with white.)
+     */
 
   --chaptertoc: #3572a0;
   --chaptertoctext: white;
@@ -53,5 +61,11 @@
   --highlighttoc: #671d12;
   --highlighttoctext: white;
   --highlighttocborder: var(--chaptertoc);
+
+  --assemblageborder: #5B2F82;
+  --assemblagebackground: #f5f8ff;
+
+  --knowlborder: #e0e9ff;
+  --knowlbackground: var(--assemblagebackground);
 }
 

Diff for: colors_pastel_blue_orange.css

@@ -3,8 +3,10 @@
 
 :root {
   --documenttitle: #2a5ea4;
-  --bodytitle: #932c1c;
-  --bodyverylight: #ffdfcf;
+  --bodytitle: #A62E1C;
+  --bodysubtitle: #2B5F82;
+  --bodytitlehighlight: #e0e9ff;
+  --bodysubtitlehighlight: #FCE5E4;
 
   --chaptertoc: #dbf5ff;
   --chaptertoctext: #444444;
@@ -19,5 +21,12 @@
   --highlighttoc: #fac793;
   --highlighttoctext: #321a0c;
   --highlighttocborder: #ec704b;
+
+  --assemblageborder: #1100aa;
+  --assemblagebackground: #f4f4fe;
+
+  --knowlborder: #e0e9ff;
+  --knowlbackground: #f5f8ff;
+
 }
 

Diff for: pretext_add_on.css

@@ -396,7 +396,7 @@ article > [data-knowl]::after, article > [data-knowl]:hover::after, article > [d
    color: red;
    border-bottom: 0;
 }
-.knowl-output {
+.XXknowl-output {
     background: #f5f5ff;
     border-top: 10px solid #ddf;
     border-left: 10px solid #ddf;
@@ -407,19 +407,29 @@ article > [data-knowl]::after, article > [data-knowl]:hover::after, article > [d
     border-bottom-right-radius: 10px;
     border-top-right-radius: 10px;
     display: none;
-    display: none;
     padding: 0px;
     margin-top: 10px;
 /*
     margin-bottom: 0px;
 */
     margin-right: 0px;
-
 }
+.knowl-output {
+    background: #f5f5ff;
+    border: 10px solid #ddf;
+    border-radius: 10px;
+    display: none;
+    padding: 0;
+    margin-top: 10px;
+}
+
+
+/*
 .knowl-output .knowl-output, .knowl-output .knowl-output.loading {
     margin-left: 0;
     margin-right: 0;
 }
+*/
 .knowl-output .knowl-output {
     border-width: 6px;
     background: #fffff5;
@@ -429,10 +439,11 @@ article > [data-knowl]::after, article > [data-knowl]:hover::after, article > [d
     margin-right: -7px;
 }
 .knowl-output .knowl-output .knowl-output {
-    background: #fff5fe;
+    background: #f0f0ff;
+    background: #fff5ff;
 }
 .knowl-output .knowl-output .knowl-output .knowl-output {
-    background: #ffffff;
+    background: #fafffa;
 }
 .knowl-footer {
   position: relative;
@@ -2184,6 +2195,9 @@ from Jiří Lebl */
     margin-left: 0;
     margin-right: 0;
 }
+.pretext-content a .code-inline {
+    background: #f6f6f6;
+}
 
 .pretext-content .sagecell_sessionOutput pre {
     font-family: 'Inconsolata', monospace;
@@ -3221,6 +3235,13 @@ and condider having this replace line 3338 of the general code (which uses .head
     background-color: #ffd;
 }
 
+.pretext-content a.internal:hover,
+.pretext-content a.external:hover,
+.pretext-content a.internal:focus,
+.pretext-content a.external:focus {
+    text-decoration: underline;
+}
+
 /* style for poems */
 
 .pretext-content .poem {

Diff for: setcolors.css

@@ -80,6 +80,36 @@
     color: var(--bodytitle);
 }
 .pretext-content [data-knowl]:hover, .pretext-content [data-knowl]:active, .pretext-content [data-knowl].active {
-    background: var(--bodyverylight);
+    background: var(--bodytitlehighlight);
 }
 
+/* next two groups concern accessibility, so check when making changes */
+.pretext-content a.internal {
+    color: var(--bodytitle);
+}
+.pretext-content a.external {
+    color: var(--bodysubtitle);
+}
+.pretext-content a.internal:hover, .pretext-content a.internal:hover *,
+.pretext-content a.internal:focus, .pretext-content a.internal:focus * {
+    background-color: var(--bodytitlehighlight);
+}
+.pretext-content a.external:hover, .pretext-content a.external:hover *,
+.pretext-content a.external:focus, .pretext-content a.external:focus * {
+    background-color: var(--bodysubtitlehighlight);
+}
+
+.pretext-content .assemblage-like {
+    border: 2px solid var(--assemblageborder);
+    background: var(--assemblagebackground);
+}
+
+.knowl-output {
+    border: 10px solid var(--knowlborder);
+    background: var(--knowlbackground);
+}
+.knowl-footer {
+    background: var(--knowlborder);
+}
+
+