chore(uds): organize classes

agrc · Dec 4, 2024 · 11ef292 · 11ef292
1 parent bfee8db
commit 11ef292
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 11 deletions.
diff --git a/packages/utah-design-system/src/components/Button.tsx b/packages/utah-design-system/src/components/Button.tsx
@@ -13,17 +13,17 @@ export interface ButtonProps extends RACButtonProps {
 
 let button = tv({
   extend: focusRing,
-  base: 'cursor-default border border-black/10 text-center text-sm shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)] transition dark:border-white/10 dark:shadow-none',
+  base: 'cursor-default border border-black/10 text-center text-sm shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)] transition forced-color-adjust-none dark:border-white/10 dark:shadow-none forced-colors:border-[ButtonBorder] [&:has(svg:only-child)]:min-h-0 [&:has(svg:only-child)]:p-0.5',
   variants: {
     variant: {
       primary:
-        'rounded-full bg-primary-900 text-white hover:enabled:bg-primary-700 pressed:bg-primary-800',
+        'rounded-full bg-primary-900 text-white hover:bg-primary-700 pressed:bg-primary-800',
       secondary:
-        'rounded-full bg-secondary-800 text-white hover:enabled:bg-secondary-600 pressed:bg-secondary-700',
+        'rounded-full bg-secondary-800 text-white hover:bg-secondary-600 pressed:bg-secondary-700',
       accent:
-        'rounded-full bg-accent-500 text-zinc-900 hover:enabled:bg-accent-300 pressed:bg-accent-400',
+        'rounded-full bg-accent-500 text-zinc-900 hover:bg-accent-300 pressed:bg-accent-400',
       destructive:
-        'rounded-full bg-rose-700 text-white hover:enabled:bg-rose-800 pressed:bg-rose-900',
+        'rounded-full bg-rose-700 text-white hover:bg-rose-800 pressed:bg-rose-900',
       icon: 'flex items-center justify-center border-0 p-1 text-zinc-900 hover:bg-black/5 pressed:bg-black/10 disabled:bg-transparent dark:text-zinc-300 dark:hover:bg-white/10 dark:pressed:bg-white/20',
     },
     size: {
@@ -34,7 +34,7 @@ let button = tv({
       extraLarge: 'min-h-[3.125rem] px-10 text-xl',
     },
     isDisabled: {
-      true: 'border-black/20 bg-zinc-100 text-zinc-500 dark:border-white/20 dark:bg-zinc-500 dark:text-zinc-100',
+      true: 'border-black/20 bg-zinc-100 text-zinc-500 dark:border-white/20 dark:bg-zinc-500 dark:text-zinc-100 forced-colors:text-[GrayText]',
     },
   },
   defaultVariants: {

diff --git a/packages/utah-design-system/src/components/Checkbox.tsx b/packages/utah-design-system/src/components/Checkbox.tsx
@@ -38,7 +38,7 @@ export function CheckboxGroup(props: CheckboxGroupProps) {
 }
 
 const checkboxStyles = tv({
-  base: 'group flex items-center gap-2 text-sm transition',
+  base: 'group flex items-center gap-2 text-sm transition pressed:bg-blue-100',
   variants: {
     isDisabled: {
       false: 'text-gray-800 dark:text-zinc-200',

diff --git a/packages/utah-design-system/src/components/HomeButton.stories.tsx b/packages/utah-design-system/src/components/HomeButton.stories.tsx
@@ -47,7 +47,7 @@ export const Example = {
       <>
         <div
           ref={viewDivRef}
-          className="border rounded-lg size-96 overflow-hidden"
+          className="size-96 overflow-hidden rounded-lg border"
         >
           {ready && <Component view={view.current!} />}
         </div>

diff --git a/packages/utah-design-system/src/components/HomeButton.tsx b/packages/utah-design-system/src/components/HomeButton.tsx
@@ -18,16 +18,16 @@ export const HomeButton = ({
   return (
     <div
       ref={uiPosition}
-      className="group flex items-center justify-center size-[32px] bg-white shadow-[0_1px_2px_#0000004d]"
+      className="group flex size-[32px] items-center justify-center bg-white shadow-[0_1px_2px_#0000004d]"
     >
       <Button
         variant="icon"
-        className="focus:min-h-0 focus:outline-offset-[-2px] will-change-transform transition-colors duration-150 ease-in-out p-0 size-full stroke-[4] group-hover:bg-[#f3f3f3]"
+        className="size-full stroke-[4] p-0 transition-colors duration-150 ease-in-out will-change-transform group-hover:bg-[#f3f3f3] focus:min-h-0 focus:outline-offset-[-2px]"
         aria-label="Default extent"
         onPress={() => goHome()}
       >
         <HomeIcon
-          className="will-change-transform transition-colors duration-150 ease-in-out size-5 text-[#6e6e6e] group-hover:text-[#151515] stroke-[1.5]"
+          className="size-5 stroke-[1.5] text-[#6e6e6e] transition-colors duration-150 ease-in-out will-change-transform group-hover:text-[#151515]"
           aria-hidden
         />
         <span className="sr-only">Go Home</span>