Remove hardcoded warning color, add yellow and pink to ALF palette (#9911)

src/components/Admonition.tsx

@@ -9,10 +9,6 @@ import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons
 import {Text as BaseText, type TextProps} from '#/components/Typography'
 import {EmojiSad_Stroke2_Corner0_Rounded as EmojiSadIcon} from './icons/Emoji'
 
-export const colors = {
-  warning: '#FFC404',
-}
-
 type Context = {
   type: 'info' | 'tip' | 'warning' | 'error' | 'apology'
 }
@@ -35,7 +31,7 @@ export function Icon() {
   const fill = {
     info: t.atoms.text_contrast_medium.color,
     tip: t.palette.primary_500,
-    warning: colors.warning,
+    warning: t.palette.yellow,
     error: t.palette.negative_500,
     apology: t.atoms.text_contrast_medium.color,
   }[type]
@@ -110,7 +106,7 @@ export function Outer({
   const borderColor = {
     info: t.atoms.border_contrast_high.borderColor,
     tip: t.palette.primary_500,
-    warning: colors.warning,
+    warning: t.palette.yellow,
     error: t.palette.negative_500,
     apology: t.atoms.border_contrast_high.borderColor,
   }[type]

src/screens/PostThread/components/ThreadItemAnchor.tsx

@@ -38,7 +38,6 @@ import {
   REPLY_LINE_WIDTH,
 } from '#/screens/PostThread/const'
 import {atoms as a, useTheme} from '#/alf'
-import {colors} from '#/components/Admonition'
 import {Button} from '#/components/Button'
 import {DebugFieldDisplay} from '#/components/DebugFieldDisplay'
 import {CalendarClock_Stroke2_Corner0_Rounded as CalendarClockIcon} from '#/components/icons/CalendarClock'
@@ -647,8 +646,6 @@ function BackdatedPostIndicator({post}: {post: AppBskyFeedDefs.PostView}) {
 
   if (!isBackdated) return null
 
-  const orange = colors.warning
-
   return (
     <>
       <Button
@@ -675,7 +672,7 @@ function BackdatedPostIndicator({post}: {post: AppBskyFeedDefs.PostView}) {
                 paddingVertical: 3,
               },
             ]}>
-            <CalendarClockIcon fill={orange} size="sm" aria-hidden />
+            <CalendarClockIcon fill={t.palette.yellow} size="sm" aria-hidden />
             <Text
               style={[
                 a.text_xs,

src/screens/Profile/components/ProfileFeedHeader.tsx

@@ -259,7 +259,7 @@ export function ProfileFeedHeader({info}: {info: FeedSourceFeedInfo}) {
                             size="xs"
                             fill={
                               likeUri
-                                ? t.palette.like
+                                ? t.palette.pink
                                 : t.atoms.text_contrast_low.color
                             }
                           />
@@ -503,14 +503,13 @@ function DialogInner({
               disabled={isLikePending || isUnlikePending}
               label={_(msg`Like this feed`)}
               size="small"
-              variant="solid"
               color="secondary"
               onPress={onToggleLiked}
               style={[a.flex_1]}>
               {isLiked ? (
-                <HeartFilled size="sm" fill={t.palette.like} />
+                <HeartFilled size="sm" fill={t.palette.pink} />
               ) : (
-                <ButtonIcon icon={Heart} position="left" />
+                <ButtonIcon icon={Heart} />
               )}
 
               <ButtonText>
@@ -521,7 +520,6 @@ function DialogInner({
               disabled={isFeedStateChangePending}
               label={isPinned ? _(msg`Unpin feed`) : _(msg`Pin feed`)}
               size="small"
-              variant="solid"
               color={isPinned ? 'secondary' : 'primary'}
               onPress={onTogglePinned}
               style={[a.flex_1]}>

src/screens/Settings/AppPasswords.tsx

@@ -21,7 +21,7 @@ import {EmptyState} from '#/view/com/util/EmptyState'
 import {ErrorScreen} from '#/view/com/util/error/ErrorScreen'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useTheme} from '#/alf'
-import {Admonition, colors} from '#/components/Admonition'
+import {Admonition} from '#/components/Admonition'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {useDialogControl} from '#/components/Dialog'
 import {Growth_Stroke2_Corner0_Rounded as Growth} from '#/components/icons/Growth'
@@ -195,7 +195,7 @@ function AppPasswordCard({
       </View>
       {appPassword.privileged && (
         <View style={[a.flex_row, a.gap_sm, a.align_center, a.mt_md]}>
-          <WarningIcon style={[{color: colors.warning}]} />
+          <WarningIcon style={[{color: t.palette.yellow}]} />
           <Text style={t.atoms.text_contrast_high}>
             <Trans>Allows access to direct messages</Trans>
           </Text>