Fix disabled: Tailwind variant (#2302)

* fix disabled variant in the tw config

* eliminate svg: variant

* delete unused between: variant

Author: david-crespo

app/components/Sidebar.tsx

@@ -15,7 +15,7 @@ import { Button } from '~/ui/lib/Button'
 import { Truncate } from '~/ui/lib/Truncate'
 
 const linkStyles =
-  'flex h-7 items-center rounded px-2 text-sans-md hover:bg-hover svg:mr-2 svg:text-quinary text-secondary'
+  'flex h-7 items-center rounded px-2 text-sans-md hover:bg-hover [&>svg]:mr-2 [&>svg]:text-quinary text-secondary'
 
 // TODO: this probably doesn't go to the docs root. maybe it even opens a
 // menu with links to several relevant docs for the page
@@ -97,7 +97,7 @@ export const NavLinkItem = (props: {
         to={props.to}
         className={({ isActive }) =>
           cn(linkStyles, {
-            'text-accent !bg-accent-secondary hover:!bg-accent-secondary-hover svg:!text-accent-tertiary':
+            'text-accent !bg-accent-secondary hover:!bg-accent-secondary-hover [&>svg]:!text-accent-tertiary':
               isActive || currentPathIsCreateForm,
             'pointer-events-none text-disabled': props.disabled,
           })

app/ui/lib/Button.tsx

@@ -19,10 +19,10 @@ export type ButtonSize = (typeof buttonSizes)[number]
 export type Variant = (typeof variants)[number]
 
 const sizeStyle: Record<ButtonSize, string> = {
-  sm: 'h-8 px-3 text-mono-sm svg:w-4',
+  sm: 'h-8 px-3 text-mono-sm [&>svg]:w-4',
   // meant for buttons that only contain a single icon
-  icon: 'h-8 w-8 text-mono-sm svg:w-4',
-  base: 'h-10 px-4 text-mono-sm svg:w-5',
+  icon: 'h-8 w-8 text-mono-sm [&>svg]:w-4',
+  base: 'h-10 px-4 text-mono-sm [&>svg]:w-5',
 }
 
 type ButtonStyleProps = {

app/ui/lib/Message.tsx

@@ -84,7 +84,9 @@ export const Message = ({
         className
       )}
     >
-      <div className="mt-[2px] flex svg:h-3 svg:w-3">{icon || defaultIcon[variant]}</div>
+      <div className="mt-[2px] flex [&>svg]:h-3 [&>svg]:w-3">
+        {icon || defaultIcon[variant]}
+      </div>
       <div className="flex-1 pl-2.5">
         {title && <div className="text-sans-semi-md">{title}</div>}
         <div

app/ui/lib/TipIcon.tsx

@@ -19,7 +19,7 @@ export function TipIcon({ children, className }: TipIconProps) {
   return (
     <Tooltip content={children} placement="top">
       <button
-        className={cn('inline-flex svg:pointer-events-none', className)}
+        className={cn('inline-flex [&>svg]:pointer-events-none', className)}
         type="button"
       >
         <Question12Icon className="text-quinary" />

app/ui/lib/Toast.tsx

@@ -93,7 +93,7 @@ export const Toast = ({
         textColor[variant]
       )}
     >
-      <div className="mt-[2px] flex svg:h-3 svg:w-3">{icon[variant]}</div>
+      <div className="mt-[2px] flex [&>svg]:h-3 [&>svg]:w-3">{icon[variant]}</div>
       <div className="flex-1 pl-2.5">
         <div className="text-sans-semi-md">{title || defaultTitle[variant]}</div>
         <div className={cn('text-sans-md', secondaryTextColor[variant])}>{content}</div>

tailwind.config.js

@@ -65,13 +65,9 @@ module.exports = {
   },
   plugins: [
     plugin(({ addVariant, addUtilities, variants }) => {
-      // imitation of the twin.macro svg: variant. svg:text-green-500 puts green
-      // on an SVG that's an immediate child of the element
-      addVariant('svg', '& > svg')
       addVariant('children', '& > *')
-      addVariant('between', '& > * + *')
       addVariant('selected', '.is-selected &')
-      addVariant('disabled', '&.visually-disabled, &:disabled')
+      addVariant('disabled', ['&.visually-disabled', '&:disabled'])
       addUtilities(
         Array.from({ length: 12 }, (_, i) => i)
           .map((i) => ({