Renaming opacity to text-opacity in code

docs/examples/basic.css

@@ -4,18 +4,18 @@
 
  * {
     transition: color 300ms linear, background 300ms linear;
-} 
+}
 
 
 *:hover {
-  /* tint: 30% red;  
+  /* tint: 30% red;
   /* outline: heavy red; */
 }
 
 App > Screen {
-    
+
   background: $surface;
-  color: $text-surface; 
+  color: $text-surface;
   layers: base sidebar;
 
   color: $text-background;
@@ -23,12 +23,12 @@ App > Screen {
   layout: vertical;
 
   overflow: hidden;
-  
+
 }
 
 #tree-container {
   overflow-y: auto;
-  height: 20; 
+  height: 20;
   margin: 1 3;
   background: $panel;
   padding: 1 2;
@@ -37,7 +37,7 @@ App > Screen {
 DirectoryTree {
     padding: 0 1;
     height: auto;
-   
+
 }
 
 
@@ -46,10 +46,10 @@ DirectoryTree {
 DataTable {
   /*border:heavy red;*/
   /* tint: 10% green; */
-  /* opacity: 50%; */
+  /* text-opacity: 50%; */
   padding: 1;
-  margin: 1 2;  
-  height: 24;  
+  margin: 1 2;
+  height: 24;
 }
 
 #sidebar {
@@ -59,7 +59,7 @@ DataTable {
   width: 30;
   margin-bottom: 1;
   offset-x: -100%;
-  
+
   transition: offset 500ms in_out_cubic;
   layer: sidebar;
 }
@@ -97,8 +97,8 @@ DataTable {
 Tweet {
   height:12;
   width: 100%;
-  margin: 0 2; 
-  
+  margin: 0 2;
+
   background: $panel;
   color: $text-panel;
   layout: vertical;
@@ -121,9 +121,9 @@ Tweet {
   layout: vertical;
 }
 
-.code {  
+.code {
   height: auto;
-  
+
 }
 
 
@@ -133,12 +133,12 @@ TweetHeader {
   color: $text-accent
 }
 
-TweetBody {  
+TweetBody {
   width: 100%;
   background: $panel;
   color: $text-panel;
-  height: auto; 
-  padding: 0 1 0 0; 
+  height: auto;
+  padding: 0 1 0 0;
 }
 
 Tweet.scroll-horizontal TweetBody {
@@ -158,7 +158,7 @@ Tweet.scroll-horizontal TweetBody {
   /* padding: 1 0 0 0 ; */
 
   transition: background 400ms in_out_cubic, color 400ms in_out_cubic;
- 
+
 }
 
 .button:hover {
@@ -178,7 +178,7 @@ Tweet.scroll-horizontal TweetBody {
   color: $text-accent;
   background: $accent;
   height: 1;
-  
+
   content-align: center middle;
   dock:bottom;
 }
@@ -213,7 +213,7 @@ Error {
   color: $text-error;
   border-top: tall $error-darken-2;
   border-bottom: tall $error-darken-2;
-  
+
   padding: 0;
   text-style: bold;
   align-horizontal: center;
@@ -226,21 +226,21 @@ Warning {
   color: $text-warning-fade-1;
   border-top: tall $warning-darken-2;
   border-bottom: tall $warning-darken-2;
-  
+
   text-style: bold;
   align-horizontal: center;
 }
 
 Success {
   width: 100%;
-  
-  height:auto;  
+
+  height:auto;
   box-sizing: border-box;
   background: $success;
-  color: $text-success-fade-1;  
-  
+  color: $text-success-fade-1;
+
   border-top: hkey $success-darken-2;
-  border-bottom: hkey $success-darken-2; 
+  border-bottom: hkey $success-darken-2;
 
   text-style: bold ;
 

docs/examples/introduction/stopwatch.css

@@ -9,12 +9,12 @@ Stopwatch {
 
 TimeDisplay {
     content-align: center middle;
-    opacity: 60%;
+    text-opacity: 60%;
     height: 3;
 }
 
 Button {
-    width: 16;    
+    width: 16;
 }
 
 #start {
@@ -30,14 +30,14 @@ Button {
     dock: right;
 }
 
-.started {   
+.started {
     text-style: bold;
     background: $success;
     color: $text-success;
 }
 
 .started TimeDisplay {
-    opacity: 100%;
+    text-opacity: 100%;
 }
 
 .started #start {

docs/examples/introduction/stopwatch03.css

@@ -8,12 +8,12 @@ Stopwatch {
 
 TimeDisplay {
     content-align: center middle;
-    opacity: 60%;
+    text-opacity: 60%;
     height: 3;
 }
 
 Button {
-    width: 16;    
+    width: 16;
 }
 
 #start {

docs/examples/introduction/stopwatch04.css

@@ -9,12 +9,12 @@ Stopwatch {
 
 TimeDisplay {
     content-align: center middle;
-    opacity: 60%;
+    text-opacity: 60%;
     height: 3;
 }
 
 Button {
-    width: 16;    
+    width: 16;
 }
 
 #start {
@@ -30,14 +30,14 @@ Button {
     dock: right;
 }
 
-.started {   
+.started {
     text-style: bold;
     background: $success;
     color: $text-success;
 }
 
 .started TimeDisplay {
-    opacity: 100%;
+    text-opacity: 100%;
 }
 
 .started #start {