From 4ecef0696583396bac7e5b3c94de37c3d2ffa258 Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Tue, 29 Oct 2024 16:07:42 -0500
Subject: [PATCH] actually..... do it in tailwind with group. yowza

---
 app/components/HL.tsx                  | 10 ++++++++--
 app/ui/lib/Toast.tsx                   |  5 ++++-
 app/ui/styles/components/highlight.css | 17 -----------------
 app/ui/styles/index.css                |  1 -
 4 files changed, 12 insertions(+), 21 deletions(-)
 delete mode 100644 app/ui/styles/components/highlight.css

diff --git a/app/components/HL.tsx b/app/components/HL.tsx
index da6659356d..9a5ca1e1b1 100644
--- a/app/components/HL.tsx
+++ b/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
+`
diff --git a/app/ui/lib/Toast.tsx b/app/ui/lib/Toast.tsx
index 4b55cd4eab..05d3cd8dbd 100644
--- a/app/ui/lib/Toast.tsx
+++ b/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
diff --git a/app/ui/styles/components/highlight.css b/app/ui/styles/components/highlight.css
deleted file mode 100644
index 8991c03d60..0000000000
--- a/app/ui/styles/components/highlight.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, you can obtain one at https://mozilla.org/MPL/2.0/.
- *  
- * Copyright Oxide Computer Company
- */
-
-.text-accent-secondary .ox-highlight {
-  @apply text-accent;
-}
-.text-error-secondary .ox-highlight {
-  @apply text-error;
-}
-.text-info-secondary .ox-highlight {
-  @apply text-info;
-}
diff --git a/app/ui/styles/index.css b/app/ui/styles/index.css
index 83cf57071b..5746fa8af6 100644
--- a/app/ui/styles/index.css
+++ b/app/ui/styles/index.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';