Mark old components as deprecated (#8747)

* mark a bunch of stuff as deprecated

* mark s as deprecated (serverence reference????)

* rm type import

src/lib/ThemeContext.tsx

@@ -1,7 +1,8 @@
-import React, {createContext, ReactNode, useContext} from 'react'
-import {TextStyle, ViewStyle} from 'react-native'
+import {type ReactNode} from 'react'
+import {createContext, useContext} from 'react'
+import {type TextStyle, type ViewStyle} from 'react-native'
 
-import {ThemeName} from '#/alf/types'
+import {type ThemeName} from '#/alf/types'
 import {darkTheme, defaultTheme, dimTheme} from './themes'
 
 export type ColorScheme = 'light' | 'dark'
@@ -29,6 +30,9 @@ export type Palette = Record<PaletteColorName, PaletteColor>
 export type ShapeName = 'button' | 'bigButton' | 'smallButton'
 export type Shapes = Record<ShapeName, ViewStyle>
 
+/**
+ * @deprecated use typography atoms from `#/alf`
+ */
 export type TypographyVariant =
   | '2xl-thin'
   | '2xl'

src/lib/hooks/usePalette.ts

@@ -1,7 +1,11 @@
 import {useMemo} from 'react'
-import {TextStyle, ViewStyle} from 'react-native'
+import {type TextStyle, type ViewStyle} from 'react-native'
 
-import {PaletteColor, PaletteColorName, useTheme} from '../ThemeContext'
+import {
+  type PaletteColor,
+  type PaletteColorName,
+  useTheme,
+} from '../ThemeContext'
 
 export interface UsePaletteValue {
   colors: PaletteColor
@@ -16,6 +20,10 @@ export interface UsePaletteValue {
   link: TextStyle
   icon: TextStyle
 }
+
+/**
+ * @deprecated use `useTheme` from `#/alf`
+ */
 export function usePalette(color: PaletteColorName): UsePaletteValue {
   const theme = useTheme()
   return useMemo(() => {

src/lib/styles.ts

@@ -1,9 +1,17 @@
-import {Dimensions, StyleProp, StyleSheet, TextStyle} from 'react-native'
+import {
+  Dimensions,
+  type StyleProp,
+  StyleSheet,
+  type TextStyle,
+} from 'react-native'
 
 import {isWeb} from '#/platform/detection'
-import {Theme, TypographyVariant} from './ThemeContext'
+import {type Theme, type TypographyVariant} from './ThemeContext'
 
 // 1 is lightest, 2 is light, 3 is mid, 4 is dark, 5 is darkest
+/**
+ * @deprecated use ALF colors instead
+ */
 export const colors = {
   white: '#ffffff',
   black: '#000000',
@@ -63,6 +71,9 @@ export const gradients = {
   blueDark: {start: '#5F45E0', end: colors.blue3}, // avis, banner
 }
 
+/**
+ * @deprecated use atoms from `#/alf`
+ */
 export const s = StyleSheet.create({
   // helpers
   footerSpacer: {height: 100},