Remove unused CSS variables from Social Highlighter, refactor hard-coded colors in Social Highlighter and Embed to use theme variables

Author: webstackdev

src/components/Social/Highlighter/index.css

@@ -1,37 +1,16 @@
 mark {
-  background-color: yellow;
-}
-
-share-highlight {
-  /* default state */
-  --share-highlight-text-color: inherit;
-  --share-highlight-bg-color: hsl(180deg 40% 85%);
-
-  /* hover/focus state */
-  --share-highlight-text-color-active: inherit;
-  --share-highlight-bg-color-active: hsl(180deg 40% 75%);
-
-  /* tooltip */
-  --share-highlight-tooltip-text-color: hsl(0deg 0% 100%);
-  --share-highlight-tooltip-bg-color: hsl(0deg 0% 0%);
+  background-color: var(--color-warning-inverse);
 }
 
 :where(highlighter-element) {
   cursor: pointer;
   display: inline-block;
   position: relative;
-
-  --highlight-bg: #bfdbfe;
-  --highlight-bg-hover: #93c5fd;
-  --highlight-text: inherit;
-  --dialog-bg: #fff;
-  --dialog-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);
-  --button-hover: #f3f4f6;
 }
 
 :where(highlighter-element):hover,
 :where(highlighter-element):focus-within {
-  outline: 2px solid var(--highlight-bg-hover);
+  outline: 2px solid var(--color-blue-300);
   outline-offset: 2px;
 }
 
@@ -54,23 +33,22 @@ share-highlight {
 }
 
 :where(highlighter-element) .highlighter__content {
-  background-color: var(--highlight-bg);
+  background-color: var(--color-content-inverse-active);
   border-radius: 0.25rem;
-  color: var(--highlight-text);
+  color: inherit;
   padding: 0.125rem 0.25rem;
   transition: background-color 0.2s ease;
 }
 
 :where(highlighter-element):hover .highlighter__content,
 :where(highlighter-element):focus-within .highlighter__content {
-  background-color: var(--highlight-bg-hover);
+  background-color: var(--color-blue-300);
 }
 
 :where(highlighter-element) .share-dialog {
-  background-color: var(--dialog-bg);
+  background-color: var(--color-white);
   border-radius: 0.5rem;
   bottom: calc(100% + 0.75rem);
-  box-shadow: var(--dialog-shadow);
   display: none;
   left: 50%;
   padding: 0.5rem;
@@ -105,7 +83,7 @@ share-highlight {
 }
 
 :where(highlighter-element) .share-button:hover {
-  background-color: var(--button-hover);
+  background-color: var(--color-page-base);
   transform: translateY(-1px);
 }
 
@@ -114,7 +92,7 @@ share-highlight {
 }
 
 :where(highlighter-element) .share-button:focus-visible {
-  outline: 2px solid #3b82f6;
+  outline: 2px solid var(--color-blue-600);
   outline-offset: 2px;
 }
 
@@ -125,15 +103,15 @@ share-highlight {
 }
 
 :where(highlighter-element) .copy-button {
-  border-left: 1px solid #e5e7eb;
+  border-left: 1px solid var(--color-page-base-offset);
   margin-left: 0.25rem;
   padding-left: 0.75rem;
 }
 
 :where(highlighter-element) .share-dialog__arrow {
   border-left: 0.5rem solid transparent;
   border-right: 0.5rem solid transparent;
-  border-top: 0.5rem solid var(--dialog-bg);
+  border-top: 0.5rem solid var(--color-white);
   bottom: -0.375rem;
   height: 0;
   left: 50%;
@@ -143,10 +121,29 @@ share-highlight {
 }
 
 @media (prefers-color-scheme: dark) {
-  :where(highlighter-element) {
-    --highlight-bg: #1e40af;
-    --highlight-bg-hover: #1e3a8a;
-    --dialog-bg: #1f2937;
-    --button-hover: #374151;
+  :where(highlighter-element):hover,
+  :where(highlighter-element):focus-within {
+    outline-color: var(--color-blue-900);
+  }
+
+  :where(highlighter-element) .highlighter__content {
+    background-color: var(--color-blue-800);
+  }
+
+  :where(highlighter-element):hover .highlighter__content,
+  :where(highlighter-element):focus-within .highlighter__content {
+    background-color: var(--color-blue-900);
+  }
+
+  :where(highlighter-element) .share-dialog {
+    background-color: var(--color-gray-800);
+  }
+
+  :where(highlighter-element) .share-button:hover {
+    background-color: var(--color-gray-700);
+  }
+
+  :where(highlighter-element) .share-dialog__arrow {
+    border-top-color: var(--color-gray-800);
   }
 }

src/lib/markdown/plugins/rehype-tailwind/index.ts

@@ -327,19 +327,6 @@ export function rehypeTailwindClasses() {
           'text-xs',
         ])
       }
-
-      // Share highlight custom element
-      if (node.tagName === 'share-highlight') {
-        node.properties = node.properties || {}
-        node.properties['className'] = ((node.properties['className'] as string[]) || []).concat([
-          '[--share-highlight-text-color:var(--color-gray-800)]',
-          '[--share-highlight-bg-color:var(--color-gray-200)]',
-          '[--share-highlight-text-color-active:var(--color-white)]',
-          '[--share-highlight-bg-color-active:var(--color-blue-600)]',
-          '[--share-highlight-tooltip-text-color:var(--color-white)]',
-          '[--share-highlight-tooltip-bg-color:var(--color-gray-800)]',
-        ])
-      }
     })
   }
 }