eliminate HLs by using CSS instead

app/components/AttachEphemeralIpModal.tsx

@@ -11,7 +11,7 @@ import { useForm } from 'react-hook-form'
 
 import { useApiMutation, useApiQueryClient, usePrefetchedApiQuery } from '~/api'
 import { ListboxField } from '~/components/form/fields/ListboxField'
-import { HLs } from '~/components/HL'
+import { HL } from '~/components/HL'
 import { useInstanceSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
 import { Modal } from '~/ui/lib/Modal'
@@ -32,7 +32,7 @@ export const AttachEphemeralIpModal = ({ onDismiss }: { onDismiss: () => void })
   const instanceEphemeralIpAttach = useApiMutation('instanceEphemeralIpAttach', {
     onSuccess(ephemeralIp) {
       queryClient.invalidateQueries('instanceExternalIpList')
-      addToast(<>IP <HLs>{ephemeralIp.ip}</HLs> attached</>) // prettier-ignore
+      addToast(<>IP <HL>{ephemeralIp.ip}</HL> attached</>) // prettier-ignore
       onDismiss()
     },
     onError: (err) => {

app/components/AttachFloatingIpModal.tsx

@@ -10,7 +10,7 @@ import { useForm } from 'react-hook-form'
 
 import { useApiMutation, useApiQueryClient, type FloatingIp, type Instance } from '~/api'
 import { ListboxField } from '~/components/form/fields/ListboxField'
-import { HLs } from '~/components/HL'
+import { HL } from '~/components/HL'
 import { addToast } from '~/stores/toast'
 import { Message } from '~/ui/lib/Message'
 import { Modal } from '~/ui/lib/Modal'
@@ -49,7 +49,7 @@ export const AttachFloatingIpModal = ({
     onSuccess(floatingIp) {
       queryClient.invalidateQueries('floatingIpList')
       queryClient.invalidateQueries('instanceExternalIpList')
-      addToast(<>IP <HLs>{floatingIp.name}</HLs> attached</>) // prettier-ignore
+      addToast(<>IP <HL>{floatingIp.name}</HL> attached</>) // prettier-ignore
       onDismiss()
     },
     onError: (err) => {

app/components/HL.tsx

@@ -7,13 +7,5 @@
  */
 import { classed } from '~/util/classed'
 
-export const HL = classed.span`text-sans-md text-default`
-
-/** HL with "success"-colored text */
-export const HLs = classed.span`text-sans-md text-accent children:text-accent`
-
-// HL with "error"-colored text
-export const HLe = classed.span`text-sans-md text-error children:text-error`
-
-// HL with "info"-colored text
-export const HLi = classed.span`text-sans-md text-notice children:text-notice`
+// ox-highlight needed for CSS ensuring the HL color matches the container
+export const HL = classed.span`ox-highlight text-sans-md text-default`

app/forms/disk-create.tsx

@@ -28,7 +28,7 @@ import { ListboxField } from '~/components/form/fields/ListboxField'
 import { NameField } from '~/components/form/fields/NameField'
 import { RadioField } from '~/components/form/fields/RadioField'
 import { SideModalForm } from '~/components/form/SideModalForm'
-import { HLs } from '~/components/HL'
+import { HL } from '~/components/HL'
 import { useProjectSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
 import { FormDivider } from '~/ui/lib/Divider'
@@ -77,7 +77,7 @@ export function CreateDiskSideModalForm({
   const createDisk = useApiMutation('diskCreate', {
     onSuccess(data) {
       queryClient.invalidateQueries('diskList')
-      addToast(<>Disk <HLs>{data.name}</HLs> created</>) // prettier-ignore
+      addToast(<>Disk <HL>{data.name}</HL> created</>) // prettier-ignore
       onSuccess?.(data)
       onDismiss(navigate)
     },

app/forms/firewall-rules-create.tsx

@@ -18,7 +18,7 @@ import {
 } from '@oxide/api'
 
 import { SideModalForm } from '~/components/form/SideModalForm'
-import { HLs } from '~/components/HL'
+import { HL } from '~/components/HL'
 import { getVpcSelector, useVpcSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
 import { ALL_ISH } from '~/util/consts'
@@ -78,7 +78,7 @@ export function CreateFirewallRuleForm() {
     onSuccess(updatedRules) {
       const newRule = updatedRules.rules[updatedRules.rules.length - 1]
       queryClient.invalidateQueries('vpcFirewallRulesView')
-      addToast(<>Firewall rule <HLs>{newRule.name}</HLs> created</>) // prettier-ignore
+      addToast(<>Firewall rule <HL>{newRule.name}</HL> created</>) // prettier-ignore
       navigate(pb.vpcFirewallRules(vpcSelector))
     },
   })

app/forms/firewall-rules-edit.tsx

@@ -18,7 +18,7 @@ import {
 
 import { trigger404 } from '~/components/ErrorBoundary'
 import { SideModalForm } from '~/components/form/SideModalForm'
-import { HLs } from '~/components/HL'
+import { HL } from '~/components/HL'
 import {
   getFirewallRuleSelector,
   useFirewallRuleSelector,
@@ -74,7 +74,7 @@ export function EditFirewallRuleForm() {
       onDismiss()
       queryClient.invalidateQueries('vpcFirewallRulesView')
       const updatedRule = body.rules[body.rules.length - 1]
-      addToast(<>Firewall rule <HLs>{updatedRule.name}</HLs> updated</>) // prettier-ignore
+      addToast(<>Firewall rule <HL>{updatedRule.name}</HL> updated</>) // prettier-ignore
     },
   })
 

app/forms/floating-ip-create.tsx

@@ -23,7 +23,7 @@ import { toIpPoolItem } from '~/components/form/fields/ip-pool-item'
 import { ListboxField } from '~/components/form/fields/ListboxField'
 import { NameField } from '~/components/form/fields/NameField'
 import { SideModalForm } from '~/components/form/SideModalForm'
-import { HLs } from '~/components/HL'
+import { HL } from '~/components/HL'
 import { useProjectSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
 import { Message } from '~/ui/lib/Message'
@@ -49,7 +49,7 @@ export function CreateFloatingIpSideModalForm() {
     onSuccess(floatingIp) {
       queryClient.invalidateQueries('floatingIpList')
       queryClient.invalidateQueries('ipPoolUtilizationView')
-      addToast(<>Floating IP <HLs>{floatingIp.name}</HLs> created</>) // prettier-ignore
+      addToast(<>Floating IP <HL>{floatingIp.name}</HL> created</>) // prettier-ignore
       navigate(pb.floatingIps(projectSelector))
     },
   })

app/forms/floating-ip-edit.tsx

@@ -18,7 +18,7 @@ import {
 import { DescriptionField } from '~/components/form/fields/DescriptionField'
 import { NameField } from '~/components/form/fields/NameField'
 import { SideModalForm } from '~/components/form/SideModalForm'
-import { HLs } from '~/components/HL'
+import { HL } from '~/components/HL'
 import { getFloatingIpSelector, useFloatingIpSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
 import { pb } from 'app/util/path-builder'
@@ -48,7 +48,7 @@ export function EditFloatingIpSideModalForm() {
   const editFloatingIp = useApiMutation('floatingIpUpdate', {
     onSuccess(_floatingIp) {
       queryClient.invalidateQueries('floatingIpList')
-      addToast(<>Floating IP <HLs>{_floatingIp.name}</HLs> updated</>) // prettier-ignore
+      addToast(<>Floating IP <HL>{_floatingIp.name}</HL> updated</>) // prettier-ignore
       onDismiss()
     },
   })

app/forms/idp/create.tsx

@@ -15,7 +15,7 @@ import { FileField } from '~/components/form/fields/FileField'
 import { NameField } from '~/components/form/fields/NameField'
 import { TextField } from '~/components/form/fields/TextField'
 import { SideModalForm } from '~/components/form/SideModalForm'
-import { HLs } from '~/components/HL'
+import { HL } from '~/components/HL'
 import { useSiloSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
 import { readBlobAsBase64 } from '~/util/file'
@@ -54,7 +54,7 @@ export function CreateIdpSideModalForm() {
   const createIdp = useApiMutation('samlIdentityProviderCreate', {
     onSuccess(idp) {
       queryClient.invalidateQueries('siloIdentityProviderList')
-      addToast(<>IdP <HLs>{idp.name}</HLs> created</>) // prettier-ignore
+      addToast(<>IdP <HL>{idp.name}</HL> created</>) // prettier-ignore
       onDismiss()
     },
   })

app/forms/image-from-snapshot.tsx

@@ -21,7 +21,7 @@ import { DescriptionField } from '~/components/form/fields/DescriptionField'
 import { NameField } from '~/components/form/fields/NameField'
 import { TextField } from '~/components/form/fields/TextField'
 import { SideModalForm } from '~/components/form/SideModalForm'
-import { HLs } from '~/components/HL'
+import { HL } from '~/components/HL'
 import { getProjectSnapshotSelector, useProjectSnapshotSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
 import { PropertiesTable } from '~/ui/lib/PropertiesTable'
@@ -57,7 +57,7 @@ export function CreateImageFromSnapshotSideModalForm() {
   const createImage = useApiMutation('imageCreate', {
     onSuccess(image) {
       queryClient.invalidateQueries('imageList')
-      addToast(<>Image <HLs>{image.name}</HLs> created</>) // prettier-ignore
+      addToast(<>Image <HL>{image.name}</HL> created</>) // prettier-ignore
       onDismiss()
     },
   })

app/forms/instance-create.tsx

@@ -56,7 +56,7 @@ import { SshKeysField } from '~/components/form/fields/SshKeysField'
 import { TextField } from '~/components/form/fields/TextField'
 import { Form } from '~/components/form/Form'
 import { FullPageForm } from '~/components/form/FullPageForm'
-import { HL, HLs } from '~/components/HL'
+import { HL } from '~/components/HL'
 import { getProjectSelector, useProjectSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
 import { Button } from '~/ui/lib/Button'
@@ -184,7 +184,7 @@ export function CreateInstanceForm() {
         { path: { instance: instance.name }, query: { project } },
         instance
       )
-      addToast(<>Instance <HLs>{instance.name}</HLs> created</>) // prettier-ignore
+      addToast(<>Instance <HL>{instance.name}</HL> created</>) // prettier-ignore
       navigate(pb.instance({ project, instance: instance.name }))
     },
   })

app/forms/ip-pool-create.tsx

@@ -13,7 +13,7 @@ import { useApiMutation, useApiQueryClient, type IpPoolCreate } from '@oxide/api
 import { DescriptionField } from '~/components/form/fields/DescriptionField'
 import { NameField } from '~/components/form/fields/NameField'
 import { SideModalForm } from '~/components/form/SideModalForm'
-import { HLs } from '~/components/HL'
+import { HL } from '~/components/HL'
 import { addToast } from '~/stores/toast'
 import { Message } from '~/ui/lib/Message'
 import { pb } from '~/util/path-builder'
@@ -32,7 +32,7 @@ export function CreateIpPoolSideModalForm() {
   const createPool = useApiMutation('ipPoolCreate', {
     onSuccess(_pool) {
       queryClient.invalidateQueries('ipPoolList')
-      addToast(<>IP pool <HLs>{_pool.name}</HLs> created</>) // prettier-ignore
+      addToast(<>IP pool <HL>{_pool.name}</HL> created</>) // prettier-ignore
       navigate(pb.ipPools())
     },
   })

app/forms/ip-pool-edit.tsx

@@ -18,7 +18,7 @@ import {
 import { DescriptionField } from '~/components/form/fields/DescriptionField'
 import { NameField } from '~/components/form/fields/NameField'
 import { SideModalForm } from '~/components/form/SideModalForm'
-import { HLs } from '~/components/HL'
+import { HL } from '~/components/HL'
 import { getIpPoolSelector, useIpPoolSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
 import { pb } from '~/util/path-builder'
@@ -44,7 +44,7 @@ export function EditIpPoolSideModalForm() {
     onSuccess(updatedPool) {
       queryClient.invalidateQueries('ipPoolList')
       navigate(pb.ipPool({ pool: updatedPool.name }))
-      addToast(<>IP pool <HLs>{updatedPool.name}</HLs> updated</>) // prettier-ignore
+      addToast(<>IP pool <HL>{updatedPool.name}</HL> updated</>) // prettier-ignore
 
       // Only invalidate if we're staying on the same page. If the name
       // _has_ changed, invalidating ipPoolView causes an error page to flash

app/forms/network-interface-edit.tsx

@@ -20,7 +20,7 @@ import { DescriptionField } from '~/components/form/fields/DescriptionField'
 import { NameField } from '~/components/form/fields/NameField'
 import { TextFieldInner } from '~/components/form/fields/TextField'
 import { SideModalForm } from '~/components/form/SideModalForm'
-import { HLs } from '~/components/HL'
+import { HL } from '~/components/HL'
 import { useInstanceSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
 import { FormDivider } from '~/ui/lib/Divider'
@@ -46,7 +46,7 @@ export function EditNetworkInterfaceForm({
   const editNetworkInterface = useApiMutation('instanceNetworkInterfaceUpdate', {
     onSuccess(nic) {
       queryClient.invalidateQueries('instanceNetworkInterfaceList')
-      addToast(<>Network interface <HLs>{nic.name}</HLs> updated</>) // prettier-ignore
+      addToast(<>Network interface <HL>{nic.name}</HL> updated</>) // prettier-ignore
       onDismiss()
     },
   })

app/forms/project-create.tsx

@@ -13,7 +13,7 @@ import { useApiMutation, useApiQueryClient, type ProjectCreate } from '@oxide/ap
 import { DescriptionField } from '~/components/form/fields/DescriptionField'
 import { NameField } from '~/components/form/fields/NameField'
 import { SideModalForm } from '~/components/form/SideModalForm'
-import { HLs } from '~/components/HL'
+import { HL } from '~/components/HL'
 import { addToast } from '~/stores/toast'
 import { pb } from '~/util/path-builder'
 
@@ -34,7 +34,7 @@ export function CreateProjectSideModalForm() {
       queryClient.invalidateQueries('projectList')
       // avoid the project fetch when the project page loads since we have the data
       queryClient.setQueryData('projectView', { path: { project: project.name } }, project)
-      addToast(<>Project <HLs>{project.name}</HLs> created</>) // prettier-ignore
+      addToast(<>Project <HL>{project.name}</HL> created</>) // prettier-ignore
       navigate(pb.project({ project: project.name }))
     },
   })

app/forms/project-edit.tsx

@@ -18,7 +18,7 @@ import {
 import { DescriptionField } from '~/components/form/fields/DescriptionField'
 import { NameField } from '~/components/form/fields/NameField'
 import { SideModalForm } from '~/components/form/SideModalForm'
-import { HLs } from '~/components/HL'
+import { HL } from '~/components/HL'
 import { getProjectSelector, useProjectSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
 import { pb } from '~/util/path-builder'
@@ -46,7 +46,7 @@ export function EditProjectSideModalForm() {
       queryClient.invalidateQueries('projectList')
       // avoid the project fetch when the project page loads since we have the data
       queryClient.setQueryData('projectView', { path: { project: project.name } }, project)
-      addToast(<>Project <HLs>{project.name}</HLs> updated</>) // prettier-ignore
+      addToast(<>Project <HL>{project.name}</HL> updated</>) // prettier-ignore
       onDismiss()
     },
   })

app/forms/silo-create.tsx

@@ -19,7 +19,7 @@ import { RadioField } from '~/components/form/fields/RadioField'
 import { TextField } from '~/components/form/fields/TextField'
 import { TlsCertsField } from '~/components/form/fields/TlsCertsField'
 import { SideModalForm } from '~/components/form/SideModalForm'
-import { HLs } from '~/components/HL'
+import { HL } from '~/components/HL'
 import { addToast } from '~/stores/toast'
 import { FormDivider } from '~/ui/lib/Divider'
 import { FieldLabel } from '~/ui/lib/FieldLabel'
@@ -58,7 +58,7 @@ export function CreateSiloSideModalForm() {
     onSuccess(silo) {
       queryClient.invalidateQueries('siloList')
       queryClient.setQueryData('siloView', { path: { silo: silo.name } }, silo)
-      addToast(<>Silo <HLs>{silo.name}</HLs> created</>) // prettier-ignore
+      addToast(<>Silo <HL>{silo.name}</HL> created</>) // prettier-ignore
       onDismiss()
     },
   })

app/forms/snapshot-create.tsx

@@ -22,7 +22,7 @@ import { ComboboxField } from '~/components/form/fields/ComboboxField'
 import { DescriptionField } from '~/components/form/fields/DescriptionField'
 import { NameField } from '~/components/form/fields/NameField'
 import { SideModalForm } from '~/components/form/SideModalForm'
-import { HLs } from '~/components/HL'
+import { HL } from '~/components/HL'
 import { useProjectSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
 import { toComboboxItems } from '~/ui/lib/Combobox'
@@ -55,7 +55,7 @@ export function CreateSnapshotSideModalForm() {
   const createSnapshot = useApiMutation('snapshotCreate', {
     onSuccess(snapshot) {
       queryClient.invalidateQueries('snapshotList')
-      addToast(<>Snapshot <HLs>{snapshot.name}</HLs> created</>) // prettier-ignore
+      addToast(<>Snapshot <HL>{snapshot.name}</HL> created</>) // prettier-ignore
       onDismiss()
     },
   })

app/forms/ssh-key-create.tsx

@@ -14,7 +14,7 @@ import { DescriptionField } from '~/components/form/fields/DescriptionField'
 import { NameField } from '~/components/form/fields/NameField'
 import { TextField } from '~/components/form/fields/TextField'
 import { SideModalForm } from '~/components/form/SideModalForm'
-import { HLs } from '~/components/HL'
+import { HL } from '~/components/HL'
 import { addToast } from '~/stores/toast'
 import { pb } from '~/util/path-builder'
 
@@ -39,7 +39,7 @@ export function CreateSSHKeySideModalForm({ onDismiss, message }: Props) {
     onSuccess(sshKey) {
       queryClient.invalidateQueries('currentUserSshKeyList')
       handleDismiss()
-      addToast(<>SSH key <HLs>{sshKey.name}</HLs> created</>) // prettier-ignore
+      addToast(<>SSH key <HL>{sshKey.name}</HL> created</>) // prettier-ignore
     },
   })
   const form = useForm({ defaultValues })

app/forms/subnet-create.tsx

@@ -20,7 +20,7 @@ import {
   useCustomRouterItems,
 } from '~/components/form/fields/useItemsList'
 import { SideModalForm } from '~/components/form/SideModalForm'
-import { HLs } from '~/components/HL'
+import { HL } from '~/components/HL'
 import { useVpcSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
 import { FormDivider } from '~/ui/lib/Divider'
@@ -47,7 +47,7 @@ export function CreateSubnetForm() {
     onSuccess(subnet) {
       queryClient.invalidateQueries('vpcSubnetList')
       onDismiss()
-      addToast(<>Subnet <HLs>{subnet.name}</HLs> created</>) // prettier-ignore
+      addToast(<>Subnet <HL>{subnet.name}</HL> created</>) // prettier-ignore
     },
   })
 

app/forms/subnet-edit.tsx

@@ -25,7 +25,7 @@ import {
   useCustomRouterItems,
 } from '~/components/form/fields/useItemsList'
 import { SideModalForm } from '~/components/form/SideModalForm'
-import { HLs } from '~/components/HL'
+import { HL } from '~/components/HL'
 import { getVpcSubnetSelector, useVpcSubnetSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
 import { FormDivider } from '~/ui/lib/Divider'
@@ -55,7 +55,7 @@ export function EditSubnetForm() {
   const updateSubnet = useApiMutation('vpcSubnetUpdate', {
     onSuccess(subnet) {
       queryClient.invalidateQueries('vpcSubnetList')
-      addToast(<>Subnet <HLs>{subnet.name}</HLs> updated</>) // prettier-ignore
+      addToast(<>Subnet <HL>{subnet.name}</HL> updated</>) // prettier-ignore
       onDismiss()
     },
   })

app/forms/vpc-create.tsx

@@ -14,7 +14,7 @@ import { DescriptionField } from '~/components/form/fields/DescriptionField'
 import { NameField } from '~/components/form/fields/NameField'
 import { TextField } from '~/components/form/fields/TextField'
 import { SideModalForm } from '~/components/form/SideModalForm'
-import { HLs } from '~/components/HL'
+import { HL } from '~/components/HL'
 import { useProjectSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
 import { pb } from '~/util/path-builder'
@@ -39,7 +39,7 @@ export function CreateVpcSideModalForm() {
         { path: { vpc: vpc.name }, query: projectSelector },
         vpc
       )
-      addToast(<>VPC <HLs>{vpc.name}</HLs> created</>) // prettier-ignore
+      addToast(<>VPC <HL>{vpc.name}</HL> created</>) // prettier-ignore
       navigate(pb.vpc({ vpc: vpc.name, ...projectSelector }))
     },
   })