digraphs: dark backgrounds for scripts and character types

diff --git a/charset.plp b/charset.plp
index bbab1d6b83868e67e4619e94db05b88e67d8ce65..f5b934cbd68f164ead19a2a16457673bc8214aaf 100644 (file)
--- a/charset.plp
+++ b/charset.plp
@@ -15,7 +15,7 @@ Html({
                charset codepage unicode ascii utf8 latin glyph character encoding
                reference common overview table
        '],
-       (stylesheet => [qw'light']) x !$mode,
+       (stylesheet => [qw'light dark']) x !$mode,
        data => [qw(
                charset.inc.pl charset-encoding.inc.pl
                charset-unicode.inc.pl charset-ucplanes.inc.pl charset-utf8.inc.pl

diff --git a/digraphs.plp b/digraphs.plp
index 7eac2058bfed5c6f9f1b903fe067e09d7bfcddd1..0fb9223267cdf23fc448a79ee0630b76f17eb40b 100644 (file)
--- a/digraphs.plp
+++ b/digraphs.plp
@@ -18,7 +18,7 @@ Html({
                digraph mnemonic compose composition pair
                character char glyph table unicode vim
        '],
-       stylesheet => [qw'light'],
+       stylesheet => [qw'light dark'],
        data => ["data/$include.json"],
 });
 

diff --git a/style/_base.scss b/style/_base.scss
index e7d5fddcbacbb8901964bea5794eca0bdc98c13c..9555a2849f47938f9037accea289bf52d8be03a4 100644 (file)
--- a/style/_base.scss
+++ b/style/_base.scss
@@ -567,6 +567,7 @@ table.dimap {
 
 /* hover effects */
 .X:hover {cursor: help}
+body { // precedence in dark
 .X:hover > span                            {background: #FFF} /* whitespace marker */
 .Greek:hover, .Armenian:hover              {background: #FA8}
 .Cyrillic:hover                            {background: #FB7}
@@ -601,6 +602,7 @@ table.dimap {
 .l3:hover                                  {background: #FF8}
 .l4:hover                                  {background: #CF8}
 .l5:hover                                  {background: #8F8}
+}
 .u-l4:hover    {outline: 1px solid #080}
 .u-l5:hover    {outline: 1px solid #8F0}
 .u-l2:hover    {outline: 1px solid #800}

diff --git a/style/_dark.scss b/style/_dark.scss
index 6f56f8614078749e4cd68c2e3ad424adbee9d54f..e92f0f9ca16d4317f635d301bf4a482def1372e9 100644 (file)
--- a/style/_dark.scss
+++ b/style/_dark.scss
@@ -52,8 +52,44 @@ th, td {
 }
 
 .X  {background: #000} /* unidentified */
-.Xr {background: #111} /* reverse */
-.Co, .Xi.Co {background: #322} /* private */
+.X > span {background: #898; background: rgba(255, 255, 255, .25)} /* invisible contents */
+
+/* letter scripts */
+.Armenian,
+.Greek    {background: #532}
+.Cyrillic {background: #420}
+.Latin    {background: #440}
+.Aramaic,
+.Hebrew   {background: #452}
+.Arabic   {background: #343}
+.African  {background: #434}
+.Brahmic  {background: #411} /* same as number */
+.Khmer    {background: #410}
+.Hangul,
+.Syllabic {background: #230}
+.Katakana {background: #240}
+.Hiragana {background: #241}
+.Bopomofo {background: #041}
+.Han      {background: #143}
+.Alpha    {background: #020} /* other scripts */
+
+/* other categories */
+.Nd, .Nl, .No         {background: #411} /* number */
+.Sc                   {background: #401} /* currency */
+.Sm                   {background: #303} /* math */
+.So                   {background: #204} /* symbol */
+.Pd, .Po, .Pc         {background: #124} /* punctuation */
+.Ps, .Pe, .Pi, .Pf    {background: #024} /* quote */
+.Lm, .Sk              {background: #044} /* spacing modifier */
+.Mn                   {background: #022} /* modifier */
+.Cc, .Cf {color: #AAA; background: #556} /* control */
+.Zs                   {background: #142} /* space */
+.Co, .Xi.Co           {background: #322} /* private */
+.Xi, .Cs              {background: #444} /* invalid */
+.Xd                   {color: #844} /* deprecated */
+.Xr                   {color: #888} /* reserved (digraph reverse or proposal) */
+.dimap .Xr            {background: #333} /* reversed digraph */
+.ccmap .Xr {opacity:.4}
 
 /* implementation-based alternatives */
 .l1 {background: #411} /* bmp */
@@ -65,6 +101,12 @@ th, td {
 .ex {     color: #777} /* disfavoured */
 .u-invalid {background: #333} /* impossible */
 
+/* foreground representation */
+#digraphs .u-l4 {color: #4A4} /* partial */
+#digraphs .u-l5 {color: #6C4} /* experimental */
+#digraphs .u-l2 {color: #A44; color: rgba(191, 127, 127, .8)} /* unofficial */
+#digraphs .u-l1 {color: #D00; color: rgba(255, 63, 63, .8)} /* missing */
+
 .p4::after {color: #F44}
 .p3::after {color: #E66}
 .p2::after {color: #C88}