Fix Safari Finder render issue

In Safari (and perhaps other browsers?) `transparent` when used in
gradients are rendered with a strange dark fade instead of actually
being transparent. Using rgba with a 0 alpha fixes this. Specifically
this was noticed in the Finder (there's a truncation fade effect on the
right hand side), but could be else where in the app as well.

The fix was to add a new css variable: `--color-transparent` that
evaluates to `rgba(255, 255, 255, 0)` and use that in place of
`transparent` everywhere.

Author: hojberg

Diff for: src/css/definition-doc.css

@@ -42,7 +42,8 @@
   border-radius: var(--border-radius-base);
   margin-bottom: 1rem;
   scrollbar-width: auto;
-  scrollbar-color: var(--color-workspace-item-subtle-fg) transparent;
+  scrollbar-color: var(--color-workspace-item-subtle-fg)
+    var(--color-transparent);
   overflow: auto;
 }
 
@@ -64,7 +65,7 @@
 .definition-doc .source.example::-webkit-scrollbar-track,
 .definition-doc .source.eval::-webkit-scrollbar-track,
 .definition-doc .source.signatures .signature::-webkit-scrollbar-track {
-  background: transparent;
+  background: var(--color-transparent);
 }
 .definition-doc .source.code::-webkit-scrollbar-thumb,
 .definition-doc .sources .source::-webkit-scrollbar-thumb,

Diff for: src/css/elements/button.css

@@ -155,7 +155,7 @@ a.button:hover {
 
 /* -- Uncontained & Colors ------------------------------------------------- */
 .button.uncontained {
-  background: transparent;
+  background: var(--color-transparent);
 }
 
 .button.uncontained.default,

Diff for: src/css/elements/icon.css

@@ -48,19 +48,19 @@
 }
 
 .icon.animate.search .search-shine-trail-1 {
-  fill: var(--color-icon-2, transparent);
+  fill: var(--color-icon-2, var(--color-transparent, transparent));
   animation-delay: calc(0.1s + var(--icon-animation-delay, 0s));
   transition-delay: var(--icon-transition-delay, 0s);
 }
 
 .icon.animate.search .search-shine-trail-2 {
-  fill: var(--color-icon-3, transparent);
+  fill: var(--color-icon-3, var(--color-transparent, transparent));
   animation-delay: calc(0.2s + var(--icon-animation-delay, 0s));
   transition-delay: var(--icon-transition-delay, 0s);
 }
 
 .icon.animate.search .search-shine-trail-3 {
-  fill: var(--color-icon-4, transparent);
+  fill: var(--color-icon-4, var(--color-transparent, transparent));
   animation-delay: calc(0.3s + var(--icon-animation-delay, 0s));
   transition-delay: var(--icon-transition-delay, 0s);
 }

Diff for: src/css/elements/tooltip.css

@@ -59,7 +59,7 @@
 
 .tooltip-bubble:after,
 .tooltip-bubble:before {
-  border: solid transparent;
+  border: solid var(--color-transparent);
   content: "";
   height: 0;
   width: 0;

Diff for: src/css/finder.css

@@ -45,7 +45,7 @@
 
 #finder input {
   height: 2rem;
-  background: transparent;
+  background: var(--color-transparent);
   width: 100%;
   border-radius: 0;
   font-size: 1rem;
@@ -240,7 +240,11 @@
   right: 0;
   bottom: 0;
   width: 2rem;
-  background: linear-gradient(90deg, transparent, var(--color-modal-bg));
+  background: linear-gradient(
+    90deg,
+    var(--color-transparent),
+    var(--color-modal-bg)
+  );
 }
 
 #finder .definition-match .source code {
@@ -294,7 +298,11 @@
 }
 
 #finder .definition-match.focused .source:after {
-  background: linear-gradient(90deg, transparent, var(--color-modal-focus-bg));
+  background: linear-gradient(
+    90deg,
+    var(--color-transparent),
+    var(--color-modal-focus-bg)
+  );
 }
 
 /* hover */
@@ -308,5 +316,9 @@
 }
 
 #finder .definition-match:not(.focused):hover .source:after {
-  background: linear-gradient(90deg, transparent, var(--color-modal-mg));
+  background: linear-gradient(
+    90deg,
+    var(--color-transparent),
+    var(--color-modal-mg)
+  );
 }

Diff for: src/css/themes/unison/colors.css

@@ -1,4 +1,11 @@
 :root {
+  /* `transparent` sometimes renders as a dark shade when used
+   * in gradients in some browsers.  Having a variable based
+   * on rgba fixes this and makes it convienient to use
+   * everywhere.
+   */
+  --color-transparent: rgba(255, 255, 255, 0);
+
   /* Brand colors */
   --color-brand-bright-red: #ff4756;
   --color-brand-orange: #ff8800;

Diff for: src/css/themes/unison/light.css

@@ -15,7 +15,7 @@
   --color-main-focus-bg: var(--color-blue-2);
   --color-main-alert: var(--color-pink-1);
   --color-main-mark-fg: var(--color-blue-2);
-  --color-main-mark-bg: transparent;
+  --color-main-mark-bg: var(--color-transparent);
 
   --color-main-header-fg: var(--color-gray-lighten-100);
   --color-main-header-bg: var(--color-gray-darken-10);
@@ -33,10 +33,10 @@
   --color-sidebar-fg: var(--color-gray-lighten-50);
   --color-sidebar-fg-em: var(--color-gray-lighten-100);
   --color-sidebar-bg: var(--color-gray-darken-20);
-  --color-sidebar-border: transparent;
+  --color-sidebar-border: var(--color-transparent);
   --color-sidebar-subtle-fg: var(--color-gray-lighten-20);
   --color-sidebar-subtle-fg-em: var(--color-gray-lighten-30);
-  --color-sidebar-subtle-bg: transparent;
+  --color-sidebar-subtle-bg: var(--color-transparent);
   --color-sidebar-focus-fg: var(--color-gray-lighten-60);
   --color-sidebar-focus-bg: var(--color-gray-darken-10);
   --color-sidebar-keyboard-shortcut-key-fg: var(--color-gray-lighten-30);
@@ -74,12 +74,12 @@
     255,
     0.5
   ); /* 50% gray-lighten-100 */
-  --color-workspace-item-source-bg: transparent;
+  --color-workspace-item-source-bg: var(--color-transparent);
   --color-workspace-item-subtle-fg: var(--color-gray-lighten-30);
   --color-workspace-item-subtle-bg: var(--color-gray-lighten-60);
   --color-workspace-item-bg-em: var(--color-gray-lighten-55);
   --color-workspace-item-content-border: var(--color-gray-lighten-55);
-  --color-workspace-item-border: transparent;
+  --color-workspace-item-border: var(--color-transparent);
   --color-workspace-item-info-item-fg: var(--color-gray-lighten-30);
   --color-workspace-item-info-item-subtle-fg: var(--color-gray-lighten-30);
   --color-workspace-item-info-item-hover-fg: var(--color-gray-darken-30);
@@ -89,7 +89,7 @@
   --color-workspace-item-focus-subtle-fg: var(--color-gray-lighten-30);
   --color-workspace-item-focus-subtle-bg: var(--color-gray-lighten-50);
   --color-workspace-item-focus-mg: var(--color-gray-lighten-55);
-  --color-workspace-item-focus-source-bg: transparent;
+  --color-workspace-item-focus-source-bg: var(--color-transparent);
   --color-workspace-item-focus-bg: var(--color-gray-lighten-60);
   --color-workspace-item-focus-bg-faded: rgba(
     250,
@@ -140,7 +140,7 @@
   --color-modal-separator: var(--color-gray-lighten-55);
   --color-modal-shadow: rgba(24, 24, 28, 0.2); /* 20% gray-darken-30 */
   --color-modal-overlay: rgba(24, 24, 28, 0.5); /* 50% gray-darken-30 */
-  --color-modal-border: transparent;
+  --color-modal-border: var(--color-transparent);
   --color-modal-subtle-fg: var(--color-main-subtle-fg);
   --color-modal-subtle-fg-em: var(--color-gray-lighten-20);
   --color-modal-subtle-mg: var(--color-gray-lighten-55);
@@ -150,9 +150,9 @@
   --color-modal-focus-subtle-fg: var(--color-gray-base);
   --color-modal-focus-subtle-bg: var(--color-gray-lighten-50);
   --color-modal-title-fg: var(--color-gray-lighten-20);
-  --color-modal-title-bg: transparent;
+  --color-modal-title-bg: var(--color-transparent);
   --color-modal-mark-fg: var(--color-blue-2);
-  --color-modal-mark-bg: transparent;
+  --color-modal-mark-bg: var(--color-transparent);
   --color-modal-error-fg: var(--color-pink-1);
 
   /* Icons */
@@ -168,7 +168,7 @@
   /* FoldToggle */
 
   --color-fold-toggle-fg: var(--color-gray-lighten-30);
-  --color-fold-toggle-bg: transparent;
+  --color-fold-toggle-bg: var(--color-transparent);
   --color-fold-toggle-hover-fg: var(--color-gray-base);
   --color-fold-toggle-hover-bg: var(--color-gray-lighten-45);
 
@@ -209,7 +209,7 @@
   --color-option-badge-icon: var(--color-gray-lighten-30);
   --color-option-badge-hover-icon: var(--color-gray-100);
   --color-option-badge-bg: var(--color-gray-darken-30);
-  --color-option-badge-border: transparent;
+  --color-option-badge-border: var(--color-transparent);
 
   /* Tooltips */
   --color-tooltip-fg: var(--color-gray-lighten-60);
@@ -238,7 +238,7 @@
   /* ActionMenu (should probably be moved out of tooltip) */
   --color-tooltip-item-fg: var(--color-gray-lighten-60);
   --color-tooltip-item-subtle-fg: var(--color-gray-lighten-20);
-  --color-tooltip-item-bg: transparent;
+  --color-tooltip-item-bg: var(--color-transparent);
   --color-tooltip-item-hover-fg: var(--color-gray-lighten-60);
   --color-tooltip-item-hover-subtle-fg: var(--color-gray-lighten-30);
   --color-tooltip-item-hover-bg: var(--color-gray-darken-10);

Diff for: src/css/workspace-item.css

@@ -238,7 +238,7 @@
     0deg,
     var(--color-workspace-item-bg) 20%,
     var(--color-workspace-item-bg-faded) 80%,
-    rgba(255, 255, 255, 0)
+    var(--color-transparent)
   );
 }
 
@@ -262,7 +262,8 @@
   width: var(--workspace-content-width);
   overflow: auto;
   scrollbar-width: auto;
-  scrollbar-color: var(--color-workspace-item-subtle-fg) transparent;
+  scrollbar-color: var(--color-workspace-item-subtle-fg)
+    var(--color-transparent);
 }
 
 .workspace-item .content .definition-source .fold-toggle {
@@ -277,7 +278,7 @@
 }
 
 .workspace-item .content .definition-source::-webkit-scrollbar-track {
-  background: transparent;
+  background: var(--color-transparent);
 }
 
 .workspace-item .content .definition-source::-webkit-scrollbar-thumb {