refactor: redo theme and branding to fit catsky instead of bsky (#28)

* refactor: remove useTheme colour coupling

makes re-colouring easier

* refactor: like button theming

* refactor: okay alf is based

* refactor: style background overflow

* feat: determine base background by alf

* chore: editorconfig css

* refactor: lfgggg

finalised retheme and replaced logo

* refactor: provide temporary trending topics style

.editorconfig

···
 [*.{kt,kts}]
 indent_size=2
 
-[*.{ts,tsx}]
+[*.{ts,tsx,css}]
 indent_size=2

src/alf/themes.ts

···
 import {atoms} from '#/alf/atoms'
+import {mocha} from '#/alf/catppuccin/palette'
 import {type Palette, type Theme} from '#/alf/types'
 import {
   BLUE_HUE,
···
   GREEN_HUE,
   RED_HUE,
 } from '#/alf/util/colorGeneration'
+import {fade} from '#/alf/util/colors'
 
 const themes = createThemes({
   hues: {
···
   dark: Theme
   dim: Theme
 } {
+  const accent = mocha.mauve
   const color = {
     like: '#ec4899',
     trueBlack: '#000000',
···
     red_200: `hsl(${hues.negative}, 91%, 80%)`,
     red_300: `hsl(${hues.negative}, 91%, 70%)`,
     red_400: `hsl(${hues.negative}, 91%, 60%)`,
-    red_500: `hsl(${hues.negative}, 91%, 50%)`,
+    red_500: mocha.red,
     red_600: `hsl(${hues.negative}, 91%, 42%)`,
     red_700: `hsl(${hues.negative}, 91%, 34%)`,
     red_800: `hsl(${hues.negative}, 91%, 26%)`,
···
   } as const
 
   const darkPalette: Palette = {
-    white: color.gray_25,
+    white: mocha.text,
     black: color.trueBlack,
     like: color.like,
 
···
 
   const dimPalette: Palette = {
     ...darkPalette,
-    black: `hsl(${hues.primary}, 28%, ${dimScale[0]}%)`,
-    like: color.like,
+    black: mocha.base,
+    like: mocha.red,
 
-    contrast_25: `hsl(${hues.primary}, 28%, ${dimScale[1]}%)`,
-    contrast_50: `hsl(${hues.primary}, 28%, ${dimScale[2]}%)`,
-    contrast_100: `hsl(${hues.primary}, 28%, ${dimScale[3]}%)`,
-    contrast_200: `hsl(${hues.primary}, 28%, ${dimScale[4]}%)`,
+    contrast_25: mocha.mantle,
+    contrast_50: mocha.mantle,
+    contrast_100: mocha.surface1,
+    contrast_200: mocha.surface1,
     contrast_300: `hsl(${hues.primary}, 24%, ${dimScale[5]}%)`,
     contrast_400: `hsl(${hues.primary}, 24%, ${dimScale[6]}%)`,
     contrast_500: `hsl(${hues.primary}, 20%, ${dimScale[7]}%)`,
···
     contrast_975: `hsl(${hues.primary}, 20%, ${dimScale[13]}%)`,
 
     primary_25: `hsl(${hues.primary}, 50%, ${dimScale[1]}%)`,
-    primary_50: `hsl(${hues.primary}, 60%, ${dimScale[2]}%)`,
+    primary_50: fade(accent, 15),
     primary_100: `hsl(${hues.primary}, 70%, ${dimScale[3]}%)`,
     primary_200: `hsl(${hues.primary}, 82%, ${dimScale[4]}%)`,
     primary_300: `hsl(${hues.primary}, 90%, ${dimScale[5]}%)`,
     primary_400: `hsl(${hues.primary}, 95%, ${dimScale[6]}%)`,
-    primary_500: `hsl(${hues.primary}, 99%, ${dimScale[7]}%)`,
+    primary_500: accent,
     primary_600: `hsl(${hues.primary}, 99%, ${dimScale[8]}%)`,
     primary_700: `hsl(${hues.primary}, 99%, ${dimScale[9]}%)`,
     primary_800: `hsl(${hues.primary}, 99%, ${dimScale[10]}%)`,
···
     positive_100: `hsl(${hues.positive}, 70%, ${dimScale[3]}%)`,
     positive_200: `hsl(${hues.positive}, 82%, ${dimScale[4]}%)`,
     positive_300: `hsl(${hues.positive}, 82%, ${dimScale[5]}%)`,
-    positive_400: `hsl(${hues.positive}, 82%, ${dimScale[6]}%)`,
-    positive_500: `hsl(${hues.positive}, 82%, ${dimScale[7]}%)`,
-    positive_600: `hsl(${hues.positive}, 82%, ${dimScale[8]}%)`,
+    positive_400: mocha.green,
+    positive_500: mocha.green,
+    positive_600: mocha.green,
     positive_700: `hsl(${hues.positive}, 82%, ${dimScale[9]}%)`,
     positive_800: `hsl(${hues.positive}, 82%, ${dimScale[10]}%)`,
     positive_900: `hsl(${hues.positive}, 82%, ${dimScale[11]}%)`,
···
     negative_100: `hsl(${hues.negative}, 84%, ${dimScale[3]}%)`,
     negative_200: `hsl(${hues.negative}, 88%, ${dimScale[4]}%)`,
     negative_300: `hsl(${hues.negative}, 91%, ${dimScale[5]}%)`,
-    negative_400: `hsl(${hues.negative}, 91%, ${dimScale[6]}%)`,
-    negative_500: `hsl(${hues.negative}, 91%, ${dimScale[7]}%)`,
-    negative_600: `hsl(${hues.negative}, 91%, ${dimScale[8]}%)`,
+    negative_400: mocha.red,
+    negative_500: mocha.red,
+    negative_600: mocha.red,
     negative_700: `hsl(${hues.negative}, 91%, ${dimScale[9]}%)`,
     negative_800: `hsl(${hues.negative}, 91%, ${dimScale[10]}%)`,
     negative_900: `hsl(${hues.negative}, 91%, ${dimScale[11]}%)`,
···
       shadow_lg: {
         ...atoms.shadow_lg,
         shadowColor: lightPalette.black,
+      }, // TODO: probably delete this when we shift to setting CTP colours.
+      trending_hot: {
+        color: '#FFFFFF',
+        backgroundColor: 'red',
+      },
+      trending_new: {
+        color: '#FFFFFF',
+        backgroundColor: 'green',
       },
     },
   }
···
         shadowOpacity: 0.7,
         shadowColor: color.trueBlack,
       },
+      // TODO: probably delete this when we shift to setting CTP colours.
+      trending_hot: {
+        color: '#FFFFFF',
+        backgroundColor: 'red',
+      },
+      trending_new: {
+        color: '#FFFFFF',
+        backgroundColor: 'green',
+      },
     },
   }
 
···
     atoms: {
       ...dark.atoms,
       text: {
-        color: dimPalette.white,
+        color: mocha.text,
       },
       text_contrast_low: {
-        color: dimPalette.contrast_400,
+        color: mocha.overlay0,
       },
       text_contrast_medium: {
-        color: dimPalette.contrast_600,
+        color: mocha.overlay2,
       },
       text_contrast_high: {
-        color: dimPalette.contrast_900,
+        color: mocha.subtext0,
       },
       text_inverted: {
-        color: dimPalette.black,
+        color: mocha.crust,
       },
       bg: {
         backgroundColor: dimPalette.black,
···
         ...atoms.shadow_lg,
         shadowOpacity: 0.7,
         shadowColor: `hsl(${hues.primary}, 28%, 6%)`,
+      },
+      trending_hot: {
+        color: mocha.crust,
+        backgroundColor: mocha.red,
+      },
+      trending_new: {
+        color: mocha.crust,
+        backgroundColor: mocha.green,
       },
     },
   }

src/alf/types.ts

···
     elevation: number
     shadowColor: string
   }
+  trending_hot: {
+    color: string
+    backgroundColor: string
+  }
+  trending_new: {
+    color: string
+    backgroundColor: string
+  }
 }
 export type Theme = {
   scheme: 'light' | 'dark' // for library support

src/alf/util/useColorModeTheme.ts

···
     // remove any other color mode classes
     html.className = html.className.replace(/(theme)--\w+/g, '')
     html.classList.add(`theme--${theme}`)
+    html.style.backgroundColor = getBackgroundColor(theme)
     // set color to 'theme-color' meta tag
     meta?.setAttribute('content', getBackgroundColor(theme))
   }

src/components/Button.tsx

···
     if (variant === 'solid') {
       if (color === 'primary') {
         if (!disabled) {
-          baseStyles.push({color: t.palette.white})
+          baseStyles.push(t.atoms.text_inverted)
         } else {
           baseStyles.push({
             color: select(t.name, {

src/lib/custom-animations/CountWheel.tsx

···
 } from 'react-native-reanimated'
 
 import {decideShouldRoll} from '#/lib/custom-animations/util'
-import {s} from '#/lib/styles'
 import {Text} from '#/view/com/util/text/Text'
 import {atoms as a, useTheme} from '#/alf'
 import {useFormatPostStatCount} from '#/components/PostControls/util'
···
                 big ? a.text_md : a.text_sm,
                 a.user_select_none,
                 isLiked
-                  ? [a.font_bold, s.likeColor]
+                  ? [a.font_bold, {color: t.palette.like}]
                   : {color: t.palette.contrast_500},
               ]}>
               {formattedCount}
···
                   big ? a.text_md : a.text_sm,
                   a.user_select_none,
                   isLiked
-                    ? [a.font_bold, s.likeColor]
+                    ? [a.font_bold, {color: t.palette.like}]
                     : {color: t.palette.contrast_500},
                 ]}>
                 {formattedPrevCount}

src/lib/custom-animations/CountWheel.web.tsx

···
 import {useReducedMotion} from 'react-native-reanimated'
 
 import {decideShouldRoll} from '#/lib/custom-animations/util'
-import {s} from '#/lib/styles'
 import {Text} from '#/view/com/util/text/Text'
 import {atoms as a, useTheme} from '#/alf'
 import {useFormatPostStatCount} from '#/components/PostControls/util'
···
             big ? a.text_md : a.text_sm,
             a.user_select_none,
             isLiked
-              ? [a.font_bold, s.likeColor]
+              ? [a.font_bold, {color: t.palette.like}]
               : {color: t.palette.contrast_500},
           ]}>
           {formattedCount}
···
               big ? a.text_md : a.text_sm,
               a.user_select_none,
               isLiked
-                ? [a.font_bold, s.likeColor]
+                ? [a.font_bold, {color: t.palette.like}]
                 : {color: t.palette.contrast_500},
             ]}>
             {formattedPrevCount}

src/lib/custom-animations/LikeIcon.tsx

···
   useReducedMotion,
 } from 'react-native-reanimated'
 
-import {s} from '#/lib/styles'
 import {useTheme} from '#/alf'
 import {
   Heart2_Filled_Stroke2_Corner0_Rounded as HeartIconFilled,
···
         {isLiked ? (
           <Animated.View
             entering={shouldAnimate ? keyframe.duration(300) : undefined}>
-            <HeartIconFilled style={s.likeColor} width={size} />
+            <HeartIconFilled style={{color: t.palette.like}} width={size} />
           </Animated.View>
         ) : (
           <HeartIconOutline
···
               entering={circle1Keyframe.duration(300)}
               style={{
                 position: 'absolute',
-                backgroundColor: s.likeColor.color,
+                backgroundColor: t.palette.like,
                 top: 0,
                 left: 0,
                 width: size,

src/lib/custom-animations/LikeIcon.web.tsx

···
 import {View} from 'react-native'
 import {useReducedMotion} from 'react-native-reanimated'
 
-import {s} from '#/lib/styles'
 import {useTheme} from '#/alf'
 import {
   Heart2_Filled_Stroke2_Corner0_Rounded as HeartIconFilled,
···
       {isLiked ? (
         // @ts-expect-error is div
         <View ref={likeIconRef}>
-          <HeartIconFilled style={s.likeColor} width={size} />
+          <HeartIconFilled style={{color: t.palette.like}} width={size} />
         </View>
       ) : (
         <HeartIconOutline
···
         ref={circle1Ref}
         style={{
           position: 'absolute',
-          backgroundColor: s.likeColor.color,
+          backgroundColor: t.palette.like,
           top: 0,
           left: 0,
           width: size,

src/lib/hooks/useColorSchemeStyle.ts

···
-import {useTheme} from '#/lib/ThemeContext'
+import {useColorModeTheme} from '#/alf/util/useColorModeTheme'
 
 export function useColorSchemeStyle<T>(lightStyle: T, darkStyle: T) {
-  const colorScheme = useTheme().colorScheme
-  return colorScheme === 'dark' ? darkStyle : lightStyle
+  const colorMode = useColorModeTheme()
+  return colorMode === 'dark' ? darkStyle : lightStyle
 }

src/screens/Search/modules/ExploreTrendingTopics.tsx

···
     }
     case 'hot': {
       Icon = FlameIcon
-      color =
-        t.scheme === 'light' ? t.palette.negative_500 : t.palette.negative_950
-      backgroundColor =
-        t.scheme === 'light' ? t.palette.negative_50 : t.palette.negative_200
+      color = t.atoms.trending_hot.color
+      backgroundColor = t.atoms.trending_hot.backgroundColor
       text = _(msg`Hot`)
       break
     }
     case 'new': {
       Icon = TrendingIcon
       text = _(msg`New`)
-      color = t.palette.positive_700
-      backgroundColor = t.palette.positive_50
+      color = t.atoms.trending_new.color
+      backgroundColor = t.atoms.trending_new.backgroundColor
       break
     }
     default: {

src/style.css

···
   --background: white;
   --backgroundLight: hsl(211, 20%, 95%);
 }
+
 @media (prefers-color-scheme: dark) {
   :root {
     color-scheme: dark;
···
   --text: black;
   --background: white;
   --backgroundLight: hsl(211, 20%, 95%);
-  background-color: white;
 }
+
 html.theme--dark {
   color-scheme: dark;
-  background-color: black;
   --text: white;
   --background: black;
   --backgroundLight: hsl(211, 20%, 20%);
 }
+
 html.theme--dim {
   color-scheme: dark;
-  background-color: hsl(211, 28%, 12%);
   --text: white;
   --background: hsl(211, 20%, 4%);
   --backgroundLight: hsl(211, 20%, 10%);
···
   background: var(--background);
   color: var(--text);
 }
+
 /* Force left-align date/time inputs on iOS mobile */
 input::-webkit-date-and-time-value {
   text-align: left;
···
 a {
   color: inherit;
 }
+
 a[role='link']:hover {
   text-decoration: underline;
 }
+
 a[role='link'][data-no-underline='1']:hover {
   text-decoration: none;
 }
···
 *[data-word-wrap] {
   word-break: break-word;
 }
+
 *[data-stable-gutters] {
   scrollbar-gutter: stable both-edges;
 }
···
 .ProseMirror {
   min-height: inherit;
 }
+
 .ProseMirror-dark {
   color: white;
 }
+
 .ProseMirror p {
   margin: 0;
 }
+
 .ProseMirror p.is-editor-empty:first-child::before {
   color: #8d8e96;
   content: attr(data-placeholder);
···
   height: 0;
   pointer-events: none;
 }
+
 .ProseMirror .mention {
   color: #0085ff;
 }
+
 .ProseMirror a,
 .ProseMirror .autolink {
   color: #0085ff;
 }
+
 /* OLLIE: TODO -- this is not accessible */
 /* Remove focus state on inputs */
 .ProseMirror-focused {
   outline: 0;
 }
+
 textarea:focus,
 input:focus {
   outline: 0;
 }
+
 .tippy-content .items {
   width: fit-content;
 }
···
   position: relative;
   z-index: 10;
 }
+
 [data-tooltip]::after {
   content: attr(data-tooltip);
   display: none;
···
   font-size: 12px;
   z-index: 10;
 }
+
 [data-tooltip]::before {
   content: '';
   display: none;
···
   transform: translateY(100%) translateY(2px) translateX(-50%);
   z-index: 10;
 }
+
 [data-tooltip]:hover::after,
 [data-tooltip]:hover::before {
   display: block;
···
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }
 }
+
 .rotate-500ms {
   position: absolute;
   inset: 0;
···
   from {
     opacity: 0;
   }
+
   to {
     opacity: 1;
   }
···
   from {
     opacity: 1;
   }
+
   to {
     opacity: 0;
   }
···
   from {
     transform: scale(0.95);
   }
+
   to {
     transform: scale(1);
   }
···
   from {
     transform: translateX(-100%);
   }
+
   to {
     transform: translateX(0);
   }
···
   from {
     transform: translateX(0);
   }
+
   to {
     transform: translateX(-100%);
   }
···
 .dropdown-menu-transform-origin > * {
   transform-origin: var(--radix-dropdown-menu-content-transform-origin);
 }
+
 .dropdown-menu-constrain-size > * {
   max-height: var(--radix-dropdown-menu-content-available-height);
 }
···
   cursor: pointer;
   border: 1px solid transparent;
 }
+
 .EmojiReactionPicker__Pressable:focus {
   outline: none;
   border-color: var(--text);
 }
+
 .EmojiReactionPicker__Pressable:hover {
   outline: none;
   transform: scale(1.1);
   border-color: transparent;
 }
+
 .EmojiReactionPicker__Pressable:not(.__selected).__disabled {
   transform: scale(1) !important;
   border-color: transparent !important;
   opacity: 0.7;
 }
+
 .EmojiReactionPicker__Pressable ~ button {
   cursor: pointer;
   border: 1px solid transparent;
 }
+
 .EmojiReactionPicker__Pressable ~ button:focus {
   outline: none;
   border-color: var(--text);
 }
+
 .EmojiReactionPicker__Pressable ~ button:hover {
   outline: none;
   background-color: var(--backgroundLight);
···
   animation-timing-function: cubic-bezier(0.17, 0.73, 0.14, 1);
   will-change: transform, opacity;
 }
+
 .radix-popover-content[data-state='open'][data-side='top'] {
   animation-name: radixPopoverSlideUpAndFade;
 }
+
 .radix-popover-content[data-state='open'][data-side='bottom'] {
   animation-name: radixPopoverSlideDownAndFade;
 }
+
 @keyframes radixPopoverSlideUpAndFade {
   from {
     opacity: 0;
     transform: translateY(2px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
   }
 }
+
 @keyframes radixPopoverSlideDownAndFade {
   from {
     opacity: 0;
     transform: translateY(-2px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);
···
   from {
     opacity: 0;
   }
+
   to {
     opacity: 1;
   }
 }
+
 @keyframes toastFadeOut {
   from {
     opacity: 1;
   }
+
   to {
     opacity: 0;
   }

src/view/com/composer/text-input/TextInput.tsx

···
 import {isUriImage} from '#/lib/media/util'
 import {cleanError} from '#/lib/strings/errors'
 import {getMentionAt, insertMentionAt} from '#/lib/strings/mention-manip'
-import {useTheme} from '#/lib/ThemeContext'
 import {isAndroid, isNative} from '#/platform/detection'
 import {
   type LinkFacetMatch,
···
 } from '#/view/com/composer/text-input/text-input-util'
 import {atoms as a, useAlf} from '#/alf'
 import {normalizeTextStyles} from '#/alf/typography'
+import {useColorModeTheme} from '#/alf/util/useColorModeTheme'
 import {Autocomplete} from './mobile/Autocomplete'
 import {type TextInputProps} from './TextInput.types'
 
···
   const {theme: t, fonts} = useAlf()
   const textInput = useRef<PasteInputRef>(null)
   const textInputSelection = useRef<Selection>({start: 0, end: 0})
-  const theme = useTheme()
+  const colorMode = useColorModeTheme()
   const [autocompletePrefix, setAutocompletePrefix] = useState('')
   const prevLength = useRef(richtext.length)
 
···
         onSelectionChange={onSelectionChange}
         placeholder={placeholder}
         placeholderTextColor={t.atoms.text_contrast_medium.color}
-        keyboardAppearance={theme.colorScheme}
+        keyboardAppearance={colorMode}
         autoFocus={true}
         allowFontScaling
         multiline

src/view/com/home/HomeHeaderLayout.web.tsx

···
             style={[a.flex_row, a.align_center, gutters, a.pt_md, t.atoms.bg]}>
             <View style={{width: 34}} />
             <View style={[a.flex_1, a.align_center, a.justify_center]}>
-              <Logo width={kawaii ? 60 : 28} />
+              <Logo width={kawaii ? 60 : 48} />
             </View>
             <Link
               to="/feeds"

src/view/com/util/forms/Button.tsx

···
 } from 'react-native'
 
 import {choose} from '#/lib/functions'
-import {useTheme} from '#/lib/ThemeContext'
+import {useTheme} from '#/alf'
+import {useColorModeTheme} from '#/alf/util/useColorModeTheme'
 import {Text} from '../text/Text'
 
 export type ButtonType =
···
   disabled?: boolean
 }>) {
   const theme = useTheme()
+  const colorMode = useColorModeTheme()
   const typeOuterStyle = choose<ViewStyle, Record<ButtonType, ViewStyle>>(
     type,
     {
       primary: {
-        backgroundColor: theme.palette.primary.background,
+        backgroundColor: theme.palette.primary_500,
       },
       secondary: {
-        backgroundColor: theme.palette.secondary.background,
+        backgroundColor: theme.palette.positive_500,
       },
       default: {
-        backgroundColor: theme.palette.default.backgroundLight,
+        backgroundColor: theme.palette.contrast_25,
       },
       inverted: {
-        backgroundColor: theme.palette.inverted.background,
+        backgroundColor:
+          colorMode === 'light' ? theme.palette.black : theme.palette.white,
       },
       'primary-outline': {
-        backgroundColor: theme.palette.default.background,
+        backgroundColor:
+          colorMode === 'light' ? theme.palette.white : theme.palette.black,
         borderWidth: 1,
-        borderColor: theme.palette.primary.border,
+        borderColor: theme.palette.primary_600,
       },
       'secondary-outline': {
-        backgroundColor: theme.palette.default.background,
+        backgroundColor:
+          colorMode === 'light' ? theme.palette.white : theme.palette.black,
         borderWidth: 1,
-        borderColor: theme.palette.secondary.border,
+        borderColor: theme.palette.positive_600,
       },
       'primary-light': {
-        backgroundColor: theme.palette.default.background,
+        backgroundColor:
+          colorMode === 'light' ? theme.palette.white : theme.palette.black,
       },
       'secondary-light': {
-        backgroundColor: theme.palette.default.background,
+        backgroundColor:
+          colorMode === 'light' ? theme.palette.white : theme.palette.black,
       },
       'default-light': {
-        backgroundColor: theme.palette.default.background,
+        backgroundColor:
+          colorMode === 'light' ? theme.palette.white : theme.palette.black,
       },
     },
   )
···
     type,
     {
       primary: {
-        color: theme.palette.primary.text,
+        color: theme.palette.white,
         fontWeight: '600',
       },
       secondary: {
-        color: theme.palette.secondary.text,
-        fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined,
+        color: theme.palette.white,
       },
       default: {
-        color: theme.palette.default.text,
+        color:
+          colorMode === 'light' ? theme.palette.white : theme.palette.black,
       },
       inverted: {
-        color: theme.palette.inverted.text,
+        color:
+          colorMode === 'light' ? theme.palette.black : theme.palette.white,
         fontWeight: '600',
       },
       'primary-outline': {
-        color: theme.palette.primary.textInverted,
-        fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined,
+        color: theme.palette.primary_500,
       },
       'secondary-outline': {
-        color: theme.palette.secondary.textInverted,
-        fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined,
+        color: theme.palette.positive_600,
       },
       'primary-light': {
-        color: theme.palette.primary.textInverted,
-        fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined,
+        color: theme.palette.primary_500,
       },
       'secondary-light': {
-        color: theme.palette.secondary.textInverted,
-        fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined,
+        color: theme.palette.positive_600,
       },
       'default-light': {
-        color: theme.palette.default.text,
-        fontWeight: theme.palette.default.isLowContrast ? '600' : undefined,
+        color:
+          colorMode === 'light' ? theme.palette.white : theme.palette.black,
       },
     },
   )

src/view/com/util/forms/ToggleButton.tsx

···
 
 import {choose} from '#/lib/functions'
 import {colors} from '#/lib/styles'
-import {useTheme} from '#/lib/ThemeContext'
 import {type TypographyVariant} from '#/lib/ThemeContext'
+import {useTheme} from '#/alf'
+import {useColorModeTheme} from '#/alf/util/useColorModeTheme'
 import {Text} from '../text/Text'
 import {Button, type ButtonType} from './Button'
 
···
   onPress?: () => void
 }) {
   const theme = useTheme()
+  const colorMode = useColorModeTheme()
   const circleStyle = choose<TextStyle, Record<ButtonType, TextStyle>>(type, {
     primary: {
-      borderColor: theme.palette.primary.text,
+      borderColor: theme.palette.primary_500,
     },
     secondary: {
-      borderColor: theme.palette.secondary.text,
+      borderColor: theme.palette.positive_600,
     },
     inverted: {
-      borderColor: theme.palette.inverted.text,
+      borderColor:
+        colorMode === 'light' ? theme.palette.white : theme.palette.black,
     },
     'primary-outline': {
-      borderColor: theme.palette.primary.border,
+      borderColor: theme.palette.primary_500,
     },
     'secondary-outline': {
-      borderColor: theme.palette.secondary.border,
+      borderColor: theme.palette.positive_600,
     },
     'primary-light': {
-      borderColor: theme.palette.primary.border,
+      borderColor: theme.palette.primary_500,
     },
     'secondary-light': {
-      borderColor: theme.palette.secondary.border,
+      borderColor: theme.palette.positive_600,
     },
     default: {
-      borderColor: theme.palette.default.border,
+      borderColor:
+        colorMode === 'light' ? theme.palette.white : theme.palette.black,
     },
     'default-light': {
-      borderColor: theme.palette.default.border,
+      borderColor:
+        colorMode === 'light' ? theme.palette.white : theme.palette.black,
     },
   })
   const circleFillStyle = choose<TextStyle, Record<ButtonType, TextStyle>>(
     type,
     {
       primary: {
-        backgroundColor: theme.palette.primary.text,
+        backgroundColor: theme.palette.primary_500,
         opacity: isSelected ? 1 : 0.33,
       },
       secondary: {
-        backgroundColor: theme.palette.secondary.text,
+        backgroundColor: theme.palette.positive_600,
         opacity: isSelected ? 1 : 0.33,
       },
       inverted: {
-        backgroundColor: theme.palette.inverted.text,
+        backgroundColor:
+          colorMode === 'light' ? theme.palette.white : theme.palette.black,
         opacity: isSelected ? 1 : 0.33,
       },
       'primary-outline': {
-        backgroundColor: theme.palette.primary.background,
+        backgroundColor:
+          colorMode === 'light' ? theme.palette.black : theme.palette.white,
         opacity: isSelected ? 1 : 0.5,
       },
       'secondary-outline': {
-        backgroundColor: theme.palette.secondary.background,
+        backgroundColor: theme.palette.positive_500,
         opacity: isSelected ? 1 : 0.5,
       },
       'primary-light': {
-        backgroundColor: theme.palette.primary.background,
+        backgroundColor:
+          colorMode === 'light' ? theme.palette.black : theme.palette.white,
         opacity: isSelected ? 1 : 0.5,
       },
       'secondary-light': {
-        backgroundColor: theme.palette.secondary.background,
+        backgroundColor: theme.palette.positive_500,
         opacity: isSelected ? 1 : 0.5,
       },
       default: {
         backgroundColor: isSelected
-          ? theme.palette.primary.background
+          ? colorMode === 'light'
+            ? theme.palette.black
+            : theme.palette.white
           : colors.gray3,
       },
       'default-light': {
         backgroundColor: isSelected
-          ? theme.palette.primary.background
+          ? colorMode === 'light'
+            ? theme.palette.black
+            : theme.palette.white
           : colors.gray3,
       },
     },
   )
   const labelStyle = choose<TextStyle, Record<ButtonType, TextStyle>>(type, {
     primary: {
-      color: theme.palette.primary.text,
-      fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined,
+      color: theme.palette.primary_500,
     },
     secondary: {
-      color: theme.palette.secondary.text,
-      fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined,
+      color: theme.palette.positive_600,
     },
     inverted: {
-      color: theme.palette.inverted.text,
-      fontWeight: theme.palette.inverted.isLowContrast ? '600' : undefined,
+      color: colorMode === 'light' ? theme.palette.white : theme.palette.black,
     },
     'primary-outline': {
-      color: theme.palette.primary.textInverted,
-      fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined,
+      color: theme.palette.primary_500,
     },
     'secondary-outline': {
-      color: theme.palette.secondary.textInverted,
-      fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined,
+      color: theme.palette.positive_600,
     },
     'primary-light': {
-      color: theme.palette.primary.textInverted,
-      fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined,
+      color: theme.palette.primary_500,
     },
     'secondary-light': {
-      color: theme.palette.secondary.textInverted,
-      fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined,
+      color: theme.palette.positive_600,
     },
     default: {
-      color: theme.palette.default.text,
-      fontWeight: theme.palette.default.isLowContrast ? '600' : undefined,
+      color: colorMode === 'light' ? theme.palette.black : theme.palette.white,
     },
     'default-light': {
-      color: theme.palette.default.text,
-      fontWeight: theme.palette.default.isLowContrast ? '600' : undefined,
+      color: colorMode === 'light' ? theme.palette.black : theme.palette.white,
     },
   })
   return (

src/view/icons/Logo.tsx

···
 import React from 'react'
 import {StyleSheet, type TextProps} from 'react-native'
-import Svg, {
-  Defs,
-  LinearGradient,
-  Path,
-  type PathProps,
-  Stop,
-  type SvgProps,
-} from 'react-native-svg'
+import Svg, {Path, type PathProps, type SvgProps} from 'react-native-svg'
 import {Image} from 'expo-image'
 
-import {colors} from '#/lib/styles'
 import {useKawaiiMode} from '#/state/preferences/kawaii'
+import {useTheme} from '#/alf'
 
 const ratio = 57 / 64
 
···
 } & Omit<SvgProps, 'style'>
 
 export const Logo = React.forwardRef(function LogoImpl(props: Props, ref) {
+  const theme = useTheme()
   const {fill, ...rest} = props
   const gradient = fill === 'sky'
   const styles = StyleSheet.flatten(props.style)
-  const _fill = gradient ? 'url(#sky)' : fill || styles?.color || colors.blue3
+  const _fill = gradient
+    ? 'url(#sky)'
+    : fill || styles?.color || theme.palette.primary_500
   // @ts-ignore it's fiiiiine
   const size = parseInt(rest.width || 32)
 
···
       fill="none"
       // @ts-ignore it's fiiiiine
       ref={ref}
-      viewBox="0 0 64 57"
+      viewBox="0 0 64 64"
       {...rest}
       style={[{width: size, height: size * ratio}, styles]}>
-      {gradient && (
-        <Defs>
-          <LinearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
-            <Stop offset="0" stopColor="#0A7AFF" stopOpacity="1" />
-            <Stop offset="1" stopColor="#59B9FF" stopOpacity="1" />
-          </LinearGradient>
-        </Defs>
-      )}
-
+      <Path
+        fill={_fill}
+        d="m 16.161994,43.872871 -1.224499,0.795377 -0.0039,0.0043 c -0.405665,0.279253 -0.757072,0.557439 -1.016381,0.802797 -0.129655,0.122679 -0.235296,0.233057 -0.326039,0.359227 -0.04537,0.06309 -0.0887,0.126173 -0.129634,0.236232 -0.04093,0.110061 -0.09462,0.33528 0.01718,0.566174 l 0.06677,0.13432 c 0.11174,0.230754 0.299833,0.287449 0.400226,0.300268 0.100392,0.01282 0.168112,0.0016 0.236621,-0.01367 0.13702,-0.03054 0.269343,-0.0845 0.423265,-0.156966 0.305048,-0.143632 0.681622,-0.365405 1.083151,-0.641145 l 0.0098,-0.007 1.398256,-0.910174 c -0.34456,-0.477079 -0.657218,-0.967676 -0.934774,-1.46971 z"
+        id="path71"
+      />
       <Path
         fill={_fill}
-        d="M13.873 3.805C21.21 9.332 29.103 20.537 32 26.55v15.882c0-.338-.13.044-.41.867-1.512 4.456-7.418 21.847-20.923 7.944-7.111-7.32-3.819-14.64 9.125-16.85-7.405 1.264-15.73-.825-18.014-9.015C1.12 23.022 0 8.51 0 6.55 0-3.268 8.579-.182 13.873 3.805ZM50.127 3.805C42.79 9.332 34.897 20.537 32 26.55v15.882c0-.338.13.044.41.867 1.512 4.456 7.418 21.847 20.923 7.944 7.111-7.32 3.819-14.64-9.125-16.85 7.405 1.264 15.73-.825 18.014-9.015C62.88 23.022 64 8.51 64 6.55c0-9.818-8.578-6.732-13.873-2.745Z"
+        d="m 51.539309,43.851788 c -0.282687,0.498915 -0.600627,0.986328 -0.950783,1.46034 l 1.455263,0.947658 c 0.401529,0.275739 0.778103,0.497513 1.083151,0.641145 0.153922,0.07248 0.286244,0.126425 0.423264,0.156966 0.06851,0.01527 0.138182,0.02649 0.238575,0.01367 0.09983,-0.01275 0.286702,-0.07037 0.398664,-0.297925 l 0.002,-0.0023 0.06481,-0.13432 h 0.002 c 0.111803,-0.230893 0.05811,-0.456116 0.01718,-0.566174 -0.04093,-0.110061 -0.08426,-0.173147 -0.129635,-0.236232 -0.09075,-0.126171 -0.196774,-0.236548 -0.326429,-0.359227 -0.259395,-0.245389 -0.6108,-0.523574 -1.016467,-0.802827 l -0.0055,-0.0047 z"
+        id="path62"
+      />
+      <Path
+        fill={_fill}
+        d="m 52.980515,39.692944 c -0.08276,0.616433 -0.22187,1.225255 -0.412331,1.823472 h 1.920698 c 0.468509,0 0.890886,-0.0325 1.218251,-0.09058 0.163684,-0.02904 0.301569,-0.06068 0.433026,-0.115975 0.06573,-0.02764 0.130093,-0.05671 0.211632,-0.127682 0.08154,-0.07098 0.221394,-0.233793 0.221394,-0.500185 v -0.156577 c 0,-0.266391 -0.139821,-0.427272 -0.221394,-0.498234 -0.08157,-0.07096 -0.145901,-0.102016 -0.211632,-0.129634 -0.131463,-0.05523 -0.269356,-0.08698 -0.433026,-0.115963 -0.327338,-0.05796 -0.749798,-0.08864 -1.218251,-0.08864 z"
+        id="path61"
+      />
+      <Path
+        fill={_fill}
+        d="m 13.244048,39.692944 c -0.468452,0 -0.889351,0.03068 -1.21669,0.08864 -0.163669,0.02899 -0.301562,0.06074 -0.433025,0.115963 -0.06573,0.02761 -0.130061,0.05867 -0.211633,0.129634 -0.08157,0.07096 -0.221002,0.231843 -0.221002,0.498235 v 0.156576 c 0,0.266392 0.139462,0.429212 0.221002,0.500186 0.08154,0.07098 0.145905,0.100037 0.211633,0.127681 0.131457,0.05529 0.269342,0.08693 0.433025,0.115975 0.327366,0.05808 0.748182,0.09058 1.21669,0.09058 h 1.907032 c -0.185127,-0.59869 -0.320273,-1.207565 -0.400618,-1.823472 z"
+        id="path60"
+      />
+      <Path
+        fill={_fill}
+        d="m 54.517386,33.331095 c -0.288434,0 -0.463159,0.107395 -0.739932,0.249898 -0.276773,0.142496 -0.600065,0.340031 -0.942192,0.575546 l -0.563441,0.387731 c 0.241415,0.550415 0.431989,1.123162 0.566174,1.716876 l 0.762188,-0.524395 c 0.405668,-0.279253 0.757071,-0.55978 1.016381,-0.805139 0.129655,-0.122678 0.235296,-0.233058 0.326039,-0.359229 0.04537,-0.06309 0.08871,-0.126171 0.129634,-0.236231 0.04093,-0.110061 0.09462,-0.333333 -0.01718,-0.564222 l -0.06677,-0.136272 c -0.138132,-0.284601 -0.36175,-0.304563 -0.46895,-0.304563 z"
+        id="path55"
+      />
+      <Path
+        fill={_fill}
+        d="m 13.215544,33.331095 c -0.107302,2.44e-4 -0.3332,0.0238 -0.469339,0.304563 l -0.06677,0.136272 c -0.111806,0.23089 -0.05968,0.454162 -0.01874,0.564222 0.04093,0.110061 0.08622,0.173145 0.131587,0.236231 0.09075,0.126171 0.194431,0.236551 0.324086,0.359229 0.25931,0.245359 0.612667,0.525886 1.018333,0.805139 l 0.769606,0.52947 c 0.138651,-0.58985 0.335293,-1.158459 0.583746,-1.70438 v -3.9e-4 l -0.588821,-0.404912 c -0.34232,-0.235647 -0.666867,-0.43303 -0.943755,-0.575546 -0.276888,-0.142516 -0.450747,-0.250554 -0.739931,-0.249898 z"
+        id="path52"
+      />
+      <Path
+        fill={_fill}
+        d="m 34.094764,28.251437 c -4.933274,0 -9.445323,1.119371 -12.639234,2.985345 -3.193912,1.865974 -4.96476,4.339386 -4.96476,7.151086 0,2.835836 1.76833,5.998454 4.873902,8.447917 3.10557,2.449462 7.477748,4.141309 12.350244,4.141309 4.872496,0 9.325343,-1.692812 12.509438,-4.147035 3.184095,-2.454222 5.018588,-5.625664 5.018588,-8.442191 0,-2.840663 -1.672275,-5.299374 -4.746776,-7.158721 -3.074501,-1.859346 -7.468126,-2.97771 -12.401402,-2.97771 z"
+        id="path45"
+      />
+      <Path
+        fill={_fill}
+        d="m 45.888887,14.9683 c -0.01975,-4.81e-4 -0.03913,2.8e-5 -0.05857,3.91e-4 -0.09592,0.0017 -0.186845,0.005 -0.281525,0.06325 -0.324225,0.199518 -0.657344,0.622035 -0.969525,1.028876 -0.785036,1.023073 -1.590677,2.594779 -2.835558,4.699638 -0.562846,0.951667 -1.547594,3.050937 -2.609088,5.423561 3.239259,0.500131 6.133956,1.490417 8.476999,2.907403 1.428388,0.863838 2.666296,1.909965 3.631326,3.113179 -0.783688,-2.912149 -1.69148,-6.450064 -2.253765,-8.589842 -0.853248,-3.247037 -1.4618,-5.815916 -2.169816,-7.350117 -0.24818,-0.537783 -0.432298,-1.042926 -0.759844,-1.253002 -0.05207,-0.0334 -0.111382,-0.0419 -0.170634,-0.04334 z"
+        id="path43"
+      />
+      <Path
+        fill={_fill}
+        d="m 21.844825,14.9683 c -0.05925,0.0015 -0.118559,0.0099 -0.170634,0.04334 -0.327547,0.210076 -0.511665,0.715218 -0.759846,1.253002 -0.708014,1.534201 -1.316565,4.10308 -2.169814,7.350117 -0.573505,2.182475 -1.506534,5.819634 -2.30062,8.763599 1.028936,-1.280829 2.372768,-2.386873 3.923393,-3.292793 2.317508,-1.353954 5.141324,-2.318786 8.260291,-2.836729 -1.072493,-2.399061 -2.070038,-4.528088 -2.637983,-5.488378 -1.244881,-2.104859 -2.050129,-3.676565 -2.835167,-4.699638 -0.312181,-0.406841 -0.6453,-0.829358 -0.969525,-1.028876 -0.09468,-0.05822 -0.185605,-0.06147 -0.281526,-0.06325 -0.01945,-3.64e-4 -0.03882,-8.72e-4 -0.05856,-3.92e-4 z"
+        id="path42"
       />
     </Svg>
   )

src/view/screens/Feeds.tsx

···
                 height: 18,
               },
             ]}
-            fill={t.palette.white}
+            fill={t.palette.black}
           />
         </View>
         <FeedCard.TitleAndByline

src/view/shell/desktop/LeftNav.tsx

···
                   top: '-10%',
                   left: count.length === 1 ? 12 : 8,
                   backgroundColor: t.palette.primary_500,
-                  color: t.palette.white,
+                  color: t.palette.black,
                   lineHeight: a.text_sm.fontSize,
                   paddingHorizontal: 4,
                   paddingVertical: 1,