fix: tweak colors for blurhash sensitive media button/text (#1389)

src/routes/_components/status/StatusMediaAttachments.html

@@ -7,7 +7,8 @@
           class="status-sensitive-media-button"
           aria-label="Hide sensitive media" >
     <div class="svg-wrapper">
-      <SvgIcon className="status-sensitive-media-svg" href="#fa-eye-slash" />
+      <SvgIcon className={sensitiveMediaIconClass}
+               href="#fa-eye-slash" />
     </div>
   </button>
   {:else}
@@ -22,7 +23,7 @@
         </div>
       </div>
       <div class="svg-wrapper">
-        <SvgIcon className="status-sensitive-media-svg" href="#fa-eye" />
+        <SvgIcon className={sensitiveMediaIconClass} href="#fa-eye" />
       </div>
     </button>
   {/if}
@@ -126,6 +127,7 @@
     background: var(--mask-bg);
     padding: 10px;
     border-radius: 6px;
+    color: var(--blurhash-sensitive-text-color);
   }
 
   .status-sensitive-media-container .svg-wrapper {
@@ -164,6 +166,11 @@
     fill: var(--deemphasized-text-color);
     background: var(--mask-opaque-bg);
   }
+  :global(.status-sensitive-media-container.status-sensitive-media-hidden
+    .status-sensitive-media-svg.status-sensitive-media-svg-transparent) {
+    fill: var(--blurhash-sensitive-text-color);
+    background: var(--mask-bg);
+  }
 </style>
 <script>
   import MediaAttachments from './MediaAttachments.html'
@@ -206,6 +213,10 @@
       customWarningClass: ({ canUseBlurhash }) => classname(
         'status-sensitive-media-warning',
         canUseBlurhash ? 'status-sensitive-media-warning-transparent' : 'status-sensitive-media-warning-opaque'
+      ),
+      sensitiveMediaIconClass: ({ canUseBlurhash }) => classname(
+        'status-sensitive-media-svg',
+        canUseBlurhash && 'status-sensitive-media-svg-transparent'
       )
     },
     methods: {

src/scss/themes/_base.scss

@@ -127,4 +127,6 @@
   --focal-bg-drag: #{rgba($toast-bg, 0.9)};
   --focal-bg-hover: #{lighten(rgba($toast-bg, 0.8), 5%)};
   --focal-color: #{$secondary-text-color};
+
+  --blurhash-sensitive-text-color: #{lighten($deemphasized-color, 40%)};
 }

src/scss/themes/_dark.scss

@@ -48,4 +48,6 @@
   --toast-anchor-color: #{$anchor-color};
 
   --length-indicator-color: var(--action-button-fill-color);
+
+  --blurhash-sensitive-text-color: #{lighten($deemphasized-color, 15%)};
 }