Fix up switch to CSS variables

Thibaut · Thibaut · commit 01bc31859bc3 · 2018-10-08T18:08:02.000-04:00
diff --git a/assets/stylesheets/components/_prism.scss b/assets/stylesheets/components/_prism.scss
@@ -6,7 +6,7 @@ html {
   --prismFunction: #dd4a68;
   --prismVariable: #e90;
 }
-html.dark {
+html._theme-dark {
   --prismValue: #eb8160;
   --prismText: #ddcf88;
   --prismOperator: #b1c676;
diff --git a/assets/stylesheets/global/_classes.scss b/assets/stylesheets/global/_classes.scss
@@ -152,7 +152,7 @@
     background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iIzMzNzdjMCIgZD0iTTE1LDE1SDJWNmgyLjU5NWMwLDAsMC42ODktMC44OTYsMi4xNy0ySDFDMC40NDcsNCwwLDQuNDQ5LDAsNXYxMWMwLDAuNTUzLDAuNDQ3LDEsMSwxaDE1YzAuNTUzLDAsMS0wLjQ0NywxLTF2LTMuNzQ2IGwtMiwxLjY0NVYxNXogTTEzLjM2MSw4LjA1djMuNTUxTDIwLDYuNGwtNi42MzktNC45OTl2My4xMzFDNS4zLDQuNTMyLDUuMywxMi41LDUuMywxMi41QzcuNTgyLDguNzUyLDguOTg2LDguMDUsMTMuMzYxLDguMDV6Ii8+PC9zdmc+);
   }
 }
-html.dark %external-link {
+html._theme-dark %external-link {
   background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iI2NiZDBkMCIgZD0iTTE1LDE1SDJWNmgyLjU5NWMwLDAsMC42ODktMC44OTYsMi4xNy0ySDFDMC40NDcsNCwwLDQuNDQ5LDAsNXYxMWMwLDAuNTUzLDAuNDQ3LDEsMSwxaDE1YzAuNTUzLDAsMS0wLjQ0NywxLTF2LTMuNzQ2IGwtMiwxLjY0NVYxNXogTTEzLjM2MSw4LjA1djMuNTUxTDIwLDYuNGwtNi42MzktNC45OTl2My4xMzFDNS4zLDQuNTMyLDUuMywxMi41LDUuMywxMi41QzcuNTgyLDguNzUyLDguOTg2LDguMDUsMTMuMzYxLDguMDV6Ii8+PC9zdmc+);
 }
 
diff --git a/assets/stylesheets/pages/_bash.scss b/assets/stylesheets/pages/_bash.scss
@@ -5,7 +5,7 @@
   }
 
   th[align=left] {
-    border-left: 1px solid $boxBorder;
+    border-left: 1px solid var(--boxBorder);
   }
 
   code { @extend %label; }
diff --git a/assets/stylesheets/pages/_dart.scss b/assets/stylesheets/pages/_dart.scss
@@ -6,7 +6,7 @@
 
     .features {
       float: right;
-      color: $textColorLight;
+      color: var(--textColorLight);
     }
   }
 }
diff --git a/assets/stylesheets/pages/_qt.scss b/assets/stylesheets/pages/_qt.scss
@@ -4,6 +4,6 @@
   // Function headers
   h3.fn > code {
     float: right;
-    color: $textColorLight;
+    color: var(--textColorLight);
   }
 }
diff --git a/test/app_test.rb b/test/app_test.rb
@@ -55,6 +55,18 @@ def app
       get '/'
       assert_includes last_response.body, '<body class="foo">'
     end
+
+    it "sets the <html> theme from cookie" do
+      get '/'
+      assert_match %r{<html [^>]*class="[^\"]*_theme-default}, last_response.body
+      refute_includes last_response.body, '_theme-dark'
+
+      set_cookie('dark=1')
+
+      get '/'
+      assert_match %r{<html [^>]*class="[^\"]*_theme-dark}, last_response.body
+      refute_includes last_response.body, '_theme-default'
+    end
   end
 
   describe "/[static-page]" do
@@ -110,19 +122,6 @@ def app
       refute_includes last_response.body, 'foo'
     end
 
-    it "has the word 'default' when no 'dark' cookie is set" do
-      get '/manifest.appcache'
-      assert_includes last_response.body, '# default'
-      refute_includes last_response.body, '# dark'
-    end
-
-    it "has the word 'dark' when the cookie is set" do
-      set_cookie('dark=1')
-      get '/manifest.appcache'
-      assert_includes last_response.body, '# dark'
-      refute_includes last_response.body, '# default'
-    end
-
     it "sets default size" do
       get '/manifest.appcache'
       assert_includes last_response.body, '20rem'

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@ html {`
`6`	`6`	`--prismFunction: #dd4a68;`
`7`	`7`	`--prismVariable: #e90;`
`8`	`8`	`}`
`9`		`-html.dark {`
	`9`	`+html._theme-dark {`
`10`	`10`	`--prismValue: #eb8160;`
`11`	`11`	`--prismText: #ddcf88;`
`12`	`12`	`--prismOperator: #b1c676;`
Original file line number	Diff line number	Diff line change
`@@ -152,7 +152,7 @@`
`152`	`152`	`background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iIzMzNzdjMCIgZD0iTTE1LDE1SDJWNmgyLjU5NWMwLDAsMC42ODktMC44OTYsMi4xNy0ySDFDMC40NDcsNCwwLDQuNDQ5LDAsNXYxMWMwLDAuNTUzLDAuNDQ3LDEsMSwxaDE1YzAuNTUzLDAsMS0wLjQ0NywxLTF2LTMuNzQ2IGwtMiwxLjY0NVYxNXogTTEzLjM2MSw4LjA1djMuNTUxTDIwLDYuNGwtNi42MzktNC45OTl2My4xMzFDNS4zLDQuNTMyLDUuMywxMi41LDUuMywxMi41QzcuNTgyLDguNzUyLDguOTg2LDguMDUsMTMuMzYxLDguMDV6Ii8+PC9zdmc+);`
`153`	`153`	`}`
`154`	`154`	`}`
`155`		`-html.dark %external-link {`
	`155`	`+html._theme-dark %external-link {`
`156`	`156`	`background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbD0iI2NiZDBkMCIgZD0iTTE1LDE1SDJWNmgyLjU5NWMwLDAsMC42ODktMC44OTYsMi4xNy0ySDFDMC40NDcsNCwwLDQuNDQ5LDAsNXYxMWMwLDAuNTUzLDAuNDQ3LDEsMSwxaDE1YzAuNTUzLDAsMS0wLjQ0NywxLTF2LTMuNzQ2IGwtMiwxLjY0NVYxNXogTTEzLjM2MSw4LjA1djMuNTUxTDIwLDYuNGwtNi42MzktNC45OTl2My4xMzFDNS4zLDQuNTMyLDUuMywxMi41LDUuMywxMi41QzcuNTgyLDguNzUyLDguOTg2LDguMDUsMTMuMzYxLDguMDV6Ii8+PC9zdmc+);`
`157`	`157`	`}`
`158`	`158`
Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@`
`5`	`5`	`}`
`6`	`6`
`7`	`7`	`th[align=left] {`
`8`		`- border-left: 1px solid $boxBorder;`
	`8`	`+ border-left: 1px solid var(--boxBorder);`
`9`	`9`	`}`
`10`	`10`
`11`	`11`	`code { @extend %label; }`
Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@`
`6`	`6`
`7`	`7`	`.features {`
`8`	`8`	`float: right;`
`9`		`- color: $textColorLight;`
	`9`	`+ color: var(--textColorLight);`
`10`	`10`	`}`
`11`	`11`	`}`
`12`	`12`	`}`
Original file line number	Diff line number	Diff line change
`@@ -4,6 +4,6 @@`
`4`	`4`	`// Function headers`
`5`	`5`	`h3.fn > code {`
`6`	`6`	`float: right;`
`7`		`- color: $textColorLight;`
	`7`	`+ color: var(--textColorLight);`
`8`	`8`	`}`
`9`	`9`	`}`