Fix muted text (#28822)

* fix button icon text

* fix menu toggle bg

* fix more muted text

apps/studio/components/layouts/ProjectLayout/NavigationBar/NavigationBar.tsx

@@ -341,7 +341,7 @@ const NavigationBar = () => {
                   <DropdownMenuGroup>
                     <DropdownMenuItem className="flex gap-2" asChild>
                       <Link href="/account/me">
-                        <Settings size={14} strokeWidth={1.5} className="text-foreground-muted" />
+                        <Settings size={14} strokeWidth={1.5} className="text-foreground-lighter" />
                         Account preferences
                       </Link>
                     </DropdownMenuItem>
@@ -350,7 +350,11 @@ const NavigationBar = () => {
                       onClick={() => snap.setShowFeaturePreviewModal(true)}
                       onSelect={() => snap.setShowFeaturePreviewModal(true)}
                     >
-                      <FlaskConical size={14} strokeWidth={1.5} className="text-foreground-muted" />
+                      <FlaskConical
+                        size={14}
+                        strokeWidth={1.5}
+                        className="text-foreground-lighter"
+                      />
                       Feature previews
                     </DropdownMenuItem>
                     <DropdownMenuSeparator />

apps/studio/components/layouts/ProjectLayout/NavigationBar/NavigationIconButton.tsx

@@ -23,7 +23,7 @@ export const NavigationIconButton = forwardRef<
         props.className
       )}
     >
-      <div className="absolute left-2 text-foreground-muted">{icon}</div>
+      <div className="absolute left-2 text-foreground-lighter">{icon}</div>
       <span
         className={cn(
           'absolute left-7 group-data-[state=expanded]:left-10',

apps/www/components/Nav/HamburgerMenu.tsx

@@ -13,7 +13,7 @@ const HamburgerButton = (props: HamburgerButtonProps) => (
   >
     <button
       className={cn(
-        'text-foreground-lighter focus:ring-brand bg-background hover:bg-surface-100 inline-flex items-center justify-center rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-inset'
+        'text-foreground-lighter focus:ring-brand bg-transparent hover:text-foreground-light transition-colors hover:bg-overlay inline-flex items-center justify-center rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-inset'
       )}
       aria-expanded="false"
     >

apps/www/components/Nav/MobileMenu.tsx

@@ -53,7 +53,7 @@ const MobileMenu = ({ open, setOpen, isDarkMode, menu }: Props) => {
           {menuItem.subMenu['navigation'].map((column: any) => (
             <div key={column.label} className="flex flex-col gap-3">
               {column.label !== 'Developers' && (
-                <label className="text-muted text-xs uppercase tracking-widest font-mono mt-4">
+                <label className="text-foreground-lighter text-xs uppercase tracking-widest font-mono mt-4">
                   {column.label}
                 </label>
               )}
@@ -150,7 +150,7 @@ const MobileMenu = ({ open, setOpen, isDarkMode, menu }: Props) => {
               <button
                 onClick={() => setOpen(false)}
                 type="button"
-                className="inline-flex items-center justify-center p-2 rounded-md text-foreground-lighter focus:ring-brand bg-surface-100 hover:bg-surface-200 focus:outline-none focus:ring-2 focus:ring-inset"
+                className="inline-flex items-center justify-center p-2 rounded-md text-foreground-lighter focus:ring-brand hover:text-foreground-light transition-colors focus:outline-none focus:ring-2 focus:ring-inset"
               >
                 <span className="sr-only">Close menu</span>
                 <svg

packages/ui-patterns/TweetCard/index.tsx

@@ -43,7 +43,7 @@ export function TweetCard(props: TweetCard) {
         </div>
       </div>
 
-      <p className="text-foreground-muted mt-3 text-base">"{props.quote}"</p>
+      <p className="text-foreground-lighter mt-3 text-base">"{props.quote}"</p>
     </div>
   )
 }

packages/ui/src/components/Button/Button.tsx

@@ -170,13 +170,13 @@ const IconContainerVariants = cva('', {
     },
     type: {
       primary: 'text-brand-600',
-      default: 'text-foreground-muted',
+      default: 'text-foreground-lighter',
       secondary: 'text-border-muted',
-      alternative: 'text-foreground-muted',
-      outline: 'text-foreground-muted',
-      dashed: 'text-foreground-muted',
+      alternative: 'text-foreground-lighter',
+      outline: 'text-foreground-lighter',
+      dashed: 'text-foreground-lighter',
       link: 'text-brand-600',
-      text: 'text-foreground-muted',
+      text: 'text-foreground-lighter',
       danger: 'text-destructive-600',
       warning: 'text-warning-600',
     },
@@ -188,11 +188,11 @@ const loadingVariants = cva('', {
   variants: {
     type: {
       primary: 'text-brand-600',
-      default: 'text-foreground-muted',
+      default: 'text-foreground-lighter',
       secondary: 'text-border-muted',
-      alternative: 'text-foreground-muted',
-      outline: 'text-foreground-muted',
-      dashed: 'text-foreground-muted',
+      alternative: 'text-foreground-lighter',
+      outline: 'text-foreground-lighter',
+      dashed: 'text-foreground-lighter',
       link: 'text-brand-600',
       text: 'text-foreground-muted',
       danger: 'text-destructive-600',