actually..... do it in tailwind with group. yowza

Author: david-crespo

app/components/HL.tsx

@@ -7,5 +7,11 @@
  */
 import { classed } from '~/util/classed'
 
-// ox-highlight needed for CSS ensuring the HL color matches the container
-export const HL = classed.span`ox-highlight text-sans-md text-default`
+// note parent with secondary text color must have 'group' on it for
+// this to work. see Toast for an example
+export const HL = classed.span`
+  text-sans-md text-default 
+  group-[.text-accent-secondary]:text-accent
+  group-[.text-error-secondary]:text-error
+  group-[.text-info-secondary]:text-info
+`

app/ui/lib/Toast.tsx

@@ -100,7 +100,10 @@ export const Toast = ({
         {(title || variant !== 'success') && (
           <div className="text-sans-semi-md">{title || defaultTitle[variant]}</div>
         )}
-        <div className={cn('text-sans-md', secondaryTextColor[variant])}>{content}</div>
+        {/* 'group' is necessary for HL color trick to work. see HL.tsx */}
+        <div className={cn('group text-sans-md', secondaryTextColor[variant])}>
+          {content}
+        </div>
 
         {cta && (
           <Link

app/ui/styles/components/highlight.css

@@ -30,7 +30,6 @@
 @import './components/loading-bar.css';
 @import './components/Tabs.css';
 @import './components/form.css';
-@import './components/highlight.css';
 @import './components/login-page.css';
 @import './components/mini-table.css';
 @import './components/properties-table.css';