bas.sh / witchsky.app
forked from jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Design system tweaks (#2822)

* Tweak palette, theme naming, update usages

* Update Typography, replace the few usages

authored by

Eric Bailey and committed by
GitHub d6235453 43b447e5

+276 -234
+162 -40
src/alf/themes.ts
··· 73 73 white: tokens.color.gray_0, 74 74 black: tokens.color.trueBlack, 75 75 76 - contrast_25: tokens.color.gray_975, 77 - contrast_50: tokens.color.gray_950, 78 - contrast_100: tokens.color.gray_900, 79 - contrast_200: tokens.color.gray_800, 80 - contrast_300: tokens.color.gray_700, 81 - contrast_400: tokens.color.gray_600, 82 - contrast_500: tokens.color.gray_500, 83 - contrast_600: tokens.color.gray_400, 84 - contrast_700: tokens.color.gray_300, 85 - contrast_800: tokens.color.gray_200, 86 - contrast_900: tokens.color.gray_100, 87 - contrast_950: tokens.color.gray_50, 88 - contrast_975: tokens.color.gray_25, 76 + contrast_25: tokens.color.gray_1000, 77 + contrast_50: tokens.color.gray_975, 78 + contrast_100: tokens.color.gray_950, 79 + contrast_200: tokens.color.gray_900, 80 + contrast_300: tokens.color.gray_800, 81 + contrast_400: tokens.color.gray_700, 82 + contrast_500: tokens.color.gray_600, 83 + contrast_600: tokens.color.gray_500, 84 + contrast_700: tokens.color.gray_400, 85 + contrast_800: tokens.color.gray_300, 86 + contrast_900: tokens.color.gray_200, 87 + contrast_950: tokens.color.gray_100, 88 + contrast_975: tokens.color.gray_50, 89 89 90 90 primary_25: tokens.color.blue_25, 91 91 primary_50: tokens.color.blue_50, ··· 133 133 export const dimPalette: Palette = { 134 134 ...darkPalette, 135 135 black: tokens.color.gray_1000, 136 + 137 + contrast_25: tokens.color.gray_975, 138 + contrast_50: tokens.color.gray_950, 139 + contrast_100: tokens.color.gray_900, 140 + contrast_200: tokens.color.gray_800, 141 + contrast_300: tokens.color.gray_700, 142 + contrast_400: tokens.color.gray_600, 143 + contrast_500: tokens.color.gray_500, 144 + contrast_600: tokens.color.gray_400, 145 + contrast_700: tokens.color.gray_300, 146 + contrast_800: tokens.color.gray_200, 147 + contrast_900: tokens.color.gray_100, 148 + contrast_950: tokens.color.gray_50, 149 + contrast_975: tokens.color.gray_25, 136 150 } as const 137 151 138 152 export const light = { ··· 142 156 text: { 143 157 color: lightPalette.black, 144 158 }, 145 - text_contrast_700: { 159 + text_contrast_low: { 160 + color: lightPalette.contrast_400, 161 + }, 162 + text_contrast_medium: { 146 163 color: lightPalette.contrast_700, 147 164 }, 148 - text_contrast_600: { 149 - color: lightPalette.contrast_600, 150 - }, 151 - text_contrast_500: { 152 - color: lightPalette.contrast_500, 153 - }, 154 - text_contrast_400: { 155 - color: lightPalette.contrast_400, 165 + text_contrast_high: { 166 + color: lightPalette.contrast_900, 156 167 }, 157 168 text_inverted: { 158 169 color: lightPalette.white, ··· 175 186 bg_contrast_300: { 176 187 backgroundColor: lightPalette.contrast_300, 177 188 }, 178 - border: { 189 + bg_contrast_400: { 190 + backgroundColor: lightPalette.contrast_400, 191 + }, 192 + bg_contrast_500: { 193 + backgroundColor: lightPalette.contrast_500, 194 + }, 195 + bg_contrast_600: { 196 + backgroundColor: lightPalette.contrast_600, 197 + }, 198 + bg_contrast_700: { 199 + backgroundColor: lightPalette.contrast_700, 200 + }, 201 + bg_contrast_800: { 202 + backgroundColor: lightPalette.contrast_800, 203 + }, 204 + bg_contrast_900: { 205 + backgroundColor: lightPalette.contrast_900, 206 + }, 207 + bg_contrast_950: { 208 + backgroundColor: lightPalette.contrast_950, 209 + }, 210 + bg_contrast_975: { 211 + backgroundColor: lightPalette.contrast_975, 212 + }, 213 + border_contrast_low: { 179 214 borderColor: lightPalette.contrast_100, 180 215 }, 181 - border_contrast: { 182 - borderColor: lightPalette.contrast_400, 216 + border_contrast_medium: { 217 + borderColor: lightPalette.contrast_200, 218 + }, 219 + border_contrast_high: { 220 + borderColor: lightPalette.contrast_300, 183 221 }, 184 222 shadow_sm: { 185 223 ...atoms.shadow_sm, ··· 203 241 text: { 204 242 color: darkPalette.white, 205 243 }, 206 - text_contrast_700: { 244 + text_contrast_low: { 245 + color: darkPalette.contrast_400, 246 + }, 247 + text_contrast_medium: { 207 248 color: darkPalette.contrast_700, 208 249 }, 209 - text_contrast_600: { 210 - color: darkPalette.contrast_600, 211 - }, 212 - text_contrast_500: { 213 - color: darkPalette.contrast_500, 214 - }, 215 - text_contrast_400: { 216 - color: darkPalette.contrast_400, 250 + text_contrast_high: { 251 + color: darkPalette.contrast_900, 217 252 }, 218 253 text_inverted: { 219 254 color: darkPalette.black, ··· 222 257 backgroundColor: darkPalette.black, 223 258 }, 224 259 bg_contrast_25: { 260 + backgroundColor: darkPalette.contrast_25, 261 + }, 262 + bg_contrast_50: { 225 263 backgroundColor: darkPalette.contrast_50, 226 264 }, 227 - bg_contrast_50: { 265 + bg_contrast_100: { 228 266 backgroundColor: darkPalette.contrast_100, 229 267 }, 230 - bg_contrast_100: { 268 + bg_contrast_200: { 231 269 backgroundColor: darkPalette.contrast_200, 232 270 }, 233 - bg_contrast_200: { 271 + bg_contrast_300: { 234 272 backgroundColor: darkPalette.contrast_300, 235 273 }, 236 - bg_contrast_300: { 274 + bg_contrast_400: { 237 275 backgroundColor: darkPalette.contrast_400, 238 276 }, 239 - border: { 277 + bg_contrast_500: { 278 + backgroundColor: darkPalette.contrast_500, 279 + }, 280 + bg_contrast_600: { 281 + backgroundColor: darkPalette.contrast_600, 282 + }, 283 + bg_contrast_700: { 284 + backgroundColor: darkPalette.contrast_700, 285 + }, 286 + bg_contrast_800: { 287 + backgroundColor: darkPalette.contrast_800, 288 + }, 289 + bg_contrast_900: { 290 + backgroundColor: darkPalette.contrast_900, 291 + }, 292 + bg_contrast_950: { 293 + backgroundColor: darkPalette.contrast_950, 294 + }, 295 + bg_contrast_975: { 296 + backgroundColor: darkPalette.contrast_975, 297 + }, 298 + border_contrast_low: { 240 299 borderColor: darkPalette.contrast_100, 241 300 }, 242 - border_contrast: { 301 + border_contrast_medium: { 302 + borderColor: darkPalette.contrast_200, 303 + }, 304 + border_contrast_high: { 243 305 borderColor: darkPalette.contrast_300, 244 306 }, 245 307 shadow_sm: { ··· 265 327 name: 'dim', 266 328 atoms: { 267 329 ...dark.atoms, 330 + text: { 331 + color: dimPalette.white, 332 + }, 333 + text_contrast_low: { 334 + color: dimPalette.contrast_400, 335 + }, 336 + text_contrast_medium: { 337 + color: dimPalette.contrast_700, 338 + }, 339 + text_contrast_high: { 340 + color: dimPalette.contrast_900, 341 + }, 268 342 text_inverted: { 269 343 color: dimPalette.black, 270 344 }, 271 345 bg: { 272 346 backgroundColor: dimPalette.black, 347 + }, 348 + bg_contrast_25: { 349 + backgroundColor: dimPalette.contrast_25, 350 + }, 351 + bg_contrast_50: { 352 + backgroundColor: dimPalette.contrast_50, 353 + }, 354 + bg_contrast_100: { 355 + backgroundColor: dimPalette.contrast_100, 356 + }, 357 + bg_contrast_200: { 358 + backgroundColor: dimPalette.contrast_200, 359 + }, 360 + bg_contrast_300: { 361 + backgroundColor: dimPalette.contrast_300, 362 + }, 363 + bg_contrast_400: { 364 + backgroundColor: dimPalette.contrast_400, 365 + }, 366 + bg_contrast_500: { 367 + backgroundColor: dimPalette.contrast_500, 368 + }, 369 + bg_contrast_600: { 370 + backgroundColor: dimPalette.contrast_600, 371 + }, 372 + bg_contrast_700: { 373 + backgroundColor: dimPalette.contrast_700, 374 + }, 375 + bg_contrast_800: { 376 + backgroundColor: dimPalette.contrast_800, 377 + }, 378 + bg_contrast_900: { 379 + backgroundColor: dimPalette.contrast_900, 380 + }, 381 + bg_contrast_950: { 382 + backgroundColor: dimPalette.contrast_950, 383 + }, 384 + bg_contrast_975: { 385 + backgroundColor: dimPalette.contrast_975, 386 + }, 387 + border_contrast_low: { 388 + borderColor: dimPalette.contrast_100, 389 + }, 390 + border_contrast_medium: { 391 + borderColor: dimPalette.contrast_200, 392 + }, 393 + border_contrast_high: { 394 + borderColor: dimPalette.contrast_300, 273 395 }, 274 396 }, 275 397 }
+7 -7
src/alf/tokens.ts
··· 13 13 gray_300: `hsl(${BLUE_HUE}, 20%, 70%)`, 14 14 gray_400: `hsl(${BLUE_HUE}, 20%, 60%)`, 15 15 gray_500: `hsl(${BLUE_HUE}, 20%, 50%)`, 16 - gray_600: `hsl(${BLUE_HUE}, 20%, 42%)`, 17 - gray_700: `hsl(${BLUE_HUE}, 20%, 34%)`, 18 - gray_800: `hsl(${BLUE_HUE}, 20%, 26%)`, 19 - gray_900: `hsl(${BLUE_HUE}, 20%, 18%)`, 20 - gray_950: `hsl(${BLUE_HUE}, 20%, 10%)`, 21 - gray_975: `hsl(${BLUE_HUE}, 20%, 7%)`, 22 - gray_1000: `hsl(${BLUE_HUE}, 20%, 4%)`, 16 + gray_600: `hsl(${BLUE_HUE}, 24%, 42%)`, 17 + gray_700: `hsl(${BLUE_HUE}, 24%, 34%)`, 18 + gray_800: `hsl(${BLUE_HUE}, 28%, 26%)`, 19 + gray_900: `hsl(${BLUE_HUE}, 28%, 18%)`, 20 + gray_950: `hsl(${BLUE_HUE}, 28%, 10%)`, 21 + gray_975: `hsl(${BLUE_HUE}, 28%, 7%)`, 22 + gray_1000: `hsl(${BLUE_HUE}, 28%, 4%)`, 23 23 24 24 blue_25: `hsl(${BLUE_HUE}, 99%, 97%)`, 25 25 blue_50: `hsl(${BLUE_HUE}, 99%, 95%)`,
+11 -3
src/components/Divider.tsx
··· 1 1 import React from 'react' 2 2 import {View} from 'react-native' 3 - import {atoms as a, useTheme} from '#/alf' 4 - import {ViewStyleProp} from '#/alf' 3 + import {atoms as a, useTheme, ViewStyleProp, flatten} from '#/alf' 5 4 6 5 export function Divider({style}: ViewStyleProp) { 7 6 const t = useTheme() 8 7 9 - return <View style={[a.w_full, a.border_t, t.atoms.border, style]} /> 8 + return ( 9 + <View 10 + style={[ 11 + a.w_full, 12 + a.border_t, 13 + t.atoms.border_contrast_low, 14 + flatten(style), 15 + ]} 16 + /> 17 + ) 10 18 }
+7 -8
src/components/Prompt.tsx
··· 4 4 import {useLingui} from '@lingui/react' 5 5 6 6 import {useTheme, atoms as a} from '#/alf' 7 - import {H4, P} from '#/components/Typography' 7 + import {Text} from '#/components/Typography' 8 8 import {Button} from '#/components/Button' 9 9 10 10 import * as Dialog from '#/components/Dialog' ··· 50 50 } 51 51 52 52 export function Title({children}: React.PropsWithChildren<{}>) { 53 - const t = useTheme() 54 53 const {titleId} = React.useContext(Context) 55 54 return ( 56 - <H4 57 - nativeID={titleId} 58 - style={[a.font_bold, t.atoms.text_contrast_700, a.pb_sm]}> 55 + <Text nativeID={titleId} style={[a.text_2xl, a.font_bold, a.pb_sm]}> 59 56 {children} 60 - </H4> 57 + </Text> 61 58 ) 62 59 } 63 60 ··· 65 62 const t = useTheme() 66 63 const {descriptionId} = React.useContext(Context) 67 64 return ( 68 - <P nativeID={descriptionId} style={[t.atoms.text, a.pb_lg]}> 65 + <Text 66 + nativeID={descriptionId} 67 + style={[a.text_md, a.leading_snug, t.atoms.text_contrast_high, a.pb_lg]}> 69 68 {children} 70 - </P> 69 + </Text> 71 70 ) 72 71 } 73 72
+28 -124
src/components/Typography.tsx
··· 41 41 return s 42 42 } 43 43 44 + /** 45 + * Our main text component. Use this most of the time. 46 + */ 44 47 export function Text({style, ...rest}: TextProps) { 45 48 const t = useTheme() 46 49 const s = normalizeTextStyles([atoms.text_sm, t.atoms.text, flatten(style)]) 47 50 return <RNText style={s} {...rest} /> 48 51 } 49 52 50 - export function H1({style, ...rest}: TextProps) { 51 - const t = useTheme() 52 - const attr = 53 - web({ 54 - role: 'heading', 55 - 'aria-level': 1, 56 - }) || {} 57 - return ( 58 - <RNText 59 - {...attr} 60 - {...rest} 61 - style={normalizeTextStyles([ 62 - atoms.text_5xl, 63 - atoms.font_bold, 64 - t.atoms.text, 65 - flatten(style), 66 - ])} 67 - /> 68 - ) 69 - } 70 - 71 - export function H2({style, ...rest}: TextProps) { 72 - const t = useTheme() 73 - const attr = 74 - web({ 75 - role: 'heading', 76 - 'aria-level': 2, 77 - }) || {} 78 - return ( 79 - <RNText 80 - {...attr} 81 - {...rest} 82 - style={normalizeTextStyles([ 83 - atoms.text_4xl, 84 - atoms.font_bold, 85 - t.atoms.text, 86 - flatten(style), 87 - ])} 88 - /> 89 - ) 90 - } 91 - 92 - export function H3({style, ...rest}: TextProps) { 93 - const t = useTheme() 94 - const attr = 95 - web({ 96 - role: 'heading', 97 - 'aria-level': 3, 98 - }) || {} 99 - return ( 100 - <RNText 101 - {...attr} 102 - {...rest} 103 - style={normalizeTextStyles([ 104 - atoms.text_3xl, 105 - atoms.font_bold, 106 - t.atoms.text, 107 - flatten(style), 108 - ])} 109 - /> 110 - ) 111 - } 112 - 113 - export function H4({style, ...rest}: TextProps) { 114 - const t = useTheme() 115 - const attr = 116 - web({ 117 - role: 'heading', 118 - 'aria-level': 4, 119 - }) || {} 120 - return ( 121 - <RNText 122 - {...attr} 123 - {...rest} 124 - style={normalizeTextStyles([ 125 - atoms.text_2xl, 126 - atoms.font_bold, 127 - t.atoms.text, 128 - flatten(style), 129 - ])} 130 - /> 131 - ) 132 - } 133 - 134 - export function H5({style, ...rest}: TextProps) { 135 - const t = useTheme() 136 - const attr = 137 - web({ 138 - role: 'heading', 139 - 'aria-level': 5, 140 - }) || {} 141 - return ( 142 - <RNText 143 - {...attr} 144 - {...rest} 145 - style={normalizeTextStyles([ 146 - atoms.text_xl, 147 - atoms.font_bold, 148 - t.atoms.text, 149 - flatten(style), 150 - ])} 151 - /> 152 - ) 153 - } 154 - 155 - export function H6({style, ...rest}: TextProps) { 156 - const t = useTheme() 157 - const attr = 158 - web({ 159 - role: 'heading', 160 - 'aria-level': 6, 161 - }) || {} 162 - return ( 163 - <RNText 164 - {...attr} 165 - {...rest} 166 - style={normalizeTextStyles([ 167 - atoms.text_lg, 168 - atoms.font_bold, 169 - t.atoms.text, 170 - flatten(style), 171 - ])} 172 - /> 173 - ) 53 + export function createHeadingElement({level}: {level: number}) { 54 + return function HeadingElement({style, ...rest}: TextProps) { 55 + const t = useTheme() 56 + const attr = 57 + web({ 58 + role: 'heading', 59 + 'aria-level': level, 60 + }) || {} 61 + return ( 62 + <RNText 63 + {...attr} 64 + {...rest} 65 + style={normalizeTextStyles([t.atoms.text, flatten(style)])} 66 + /> 67 + ) 68 + } 174 69 } 175 70 71 + /* 72 + * Use semantic components when it's beneficial to the user or to a web scraper 73 + */ 74 + export const H1 = createHeadingElement({level: 1}) 75 + export const H2 = createHeadingElement({level: 2}) 76 + export const H3 = createHeadingElement({level: 3}) 77 + export const H4 = createHeadingElement({level: 4}) 78 + export const H5 = createHeadingElement({level: 5}) 79 + export const H6 = createHeadingElement({level: 6}) 176 80 export function P({style, ...rest}: TextProps) { 177 81 const t = useTheme() 178 82 const attr =
+3 -2
src/components/forms/TextField.tsx
··· 241 241 export function Label({children}: React.PropsWithChildren<{}>) { 242 242 const t = useTheme() 243 243 return ( 244 - <Text style={[a.text_sm, a.font_bold, t.atoms.text_contrast_600, a.mb_sm]}> 244 + <Text 245 + style={[a.text_sm, a.font_bold, t.atoms.text_contrast_medium, a.mb_sm]}> 245 246 {children} 246 247 </Text> 247 248 ) ··· 315 316 a.z_20, 316 317 a.pr_sm, 317 318 a.text_md, 318 - t.atoms.text_contrast_400, 319 + t.atoms.text_contrast_medium, 319 320 { 320 321 pointerEvents: 'none', 321 322 },
+3 -3
src/components/forms/Toggle.tsx
··· 347 347 a.align_center, 348 348 a.border, 349 349 a.rounded_xs, 350 - t.atoms.border_contrast, 350 + t.atoms.border_contrast_high, 351 351 { 352 352 height: 20, 353 353 width: 20, ··· 393 393 a.border, 394 394 a.rounded_full, 395 395 t.atoms.bg, 396 - t.atoms.border_contrast, 396 + t.atoms.border_contrast_high, 397 397 { 398 398 height: 20, 399 399 width: 30, ··· 445 445 a.align_center, 446 446 a.border, 447 447 a.rounded_full, 448 - t.atoms.border_contrast, 448 + t.atoms.border_contrast_high, 449 449 { 450 450 height: 20, 451 451 width: 20,
+3 -3
src/components/forms/ToggleButton.tsx
··· 25 25 a.border, 26 26 a.rounded_sm, 27 27 a.overflow_hidden, 28 - t.atoms.border, 28 + t.atoms.border_contrast_low, 29 29 ]}> 30 30 {children} 31 31 </View> ··· 103 103 }), 104 104 a.px_sm, 105 105 t.atoms.bg, 106 - t.atoms.border, 106 + t.atoms.border_contrast_low, 107 107 baseStyles, 108 108 activeStyles, 109 109 (state.hovered || state.focused || state.pressed) && hoverStyles, ··· 113 113 style={[ 114 114 a.text_center, 115 115 a.font_bold, 116 - t.atoms.text_contrast_500, 116 + t.atoms.text_contrast_medium, 117 117 textStyles, 118 118 ]}> 119 119 {children}
+4 -5
src/screens/Deactivated.tsx
··· 10 10 11 11 import {atoms as a, useTheme, useBreakpoints} from '#/alf' 12 12 import {Button, ButtonIcon, ButtonText} from '#/components/Button' 13 - import {Text} from '#/components/Typography' 13 + import {Text, P} from '#/components/Typography' 14 14 import {isWeb} from '#/platform/detection' 15 - import {H2, P} from '#/components/Typography' 16 15 import {ScrollView} from '#/view/com/util/Views' 17 16 import {Loader} from '#/components/Loader' 18 17 import {Logo} from '#/view/icons/Logo' ··· 100 99 <Logo width={120} /> 101 100 </View> 102 101 103 - <H2 style={[a.pb_sm]}> 102 + <Text style={[a.text_4xl, a.font_bold, a.pb_sm]}> 104 103 <Trans>You're in line</Trans> 105 - </H2> 106 - <P style={[t.atoms.text_contrast_700]}> 104 + </Text> 105 + <P style={[t.atoms.text_contrast_medium]}> 107 106 <Trans> 108 107 There's been a rush of new users to Bluesky! We'll activate your 109 108 account as soon as we can.
+4 -2
src/screens/Onboarding/Layout.tsx
··· 165 165 isWeb ? a.fixed : a.absolute, 166 166 {bottom: 0, left: 0, right: 0}, 167 167 t.atoms.bg, 168 - t.atoms.border, 168 + t.atoms.border_contrast_low, 169 169 a.border_t, 170 170 a.align_center, 171 171 gtMobile ? a.px_5xl : a.px_xl, ··· 227 227 style, 228 228 }: React.PropsWithChildren<TextStyleProp>) { 229 229 const t = useTheme() 230 - return <P style={[t.atoms.text_contrast_700, flatten(style)]}>{children}</P> 230 + return ( 231 + <P style={[t.atoms.text_contrast_medium, flatten(style)]}>{children}</P> 232 + ) 231 233 }
+8 -8
src/screens/Onboarding/StepAlgoFeeds/FeedCard.tsx
··· 8 8 import {useTheme, atoms as a} from '#/alf' 9 9 import * as Toggle from '#/components/forms/Toggle' 10 10 import {useFeedSourceInfoQuery, FeedSourceInfo} from '#/state/queries/feed' 11 - import {Text, H3} from '#/components/Typography' 11 + import {Text} from '#/components/Typography' 12 12 import {RichText} from '#/components/RichText' 13 13 14 14 import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check' ··· 94 94 </View> 95 95 96 96 <View style={[a.pt_xs, a.flex_grow]}> 97 - <H3 97 + <Text 98 98 style={[ 99 99 a.text_lg, 100 100 a.font_bold, 101 101 ctx.selected && styles.textSelected, 102 102 ]}> 103 103 {feed.displayName} 104 - </H3> 104 + </Text> 105 105 106 106 <Text 107 107 style={[ ··· 137 137 }, 138 138 a.mt_md, 139 139 a.w_full, 140 - t.name === 'light' ? t.atoms.border : t.atoms.border_contrast, 140 + t.atoms.border_contrast_low, 141 141 ctx.selected && { 142 142 borderTopColor: t.palette.white, 143 143 }, ··· 239 239 </View> 240 240 241 241 <View style={[a.pt_2xs, a.flex_grow]}> 242 - <H3 242 + <Text 243 243 style={[ 244 244 a.text_md, 245 245 a.font_bold, 246 246 ctx.selected && styles.textSelected, 247 247 ]}> 248 248 {feed.displayName} 249 - </H3> 249 + </Text> 250 250 <Text 251 251 style={[ 252 252 {opacity: 0.8}, ··· 281 281 }, 282 282 a.mt_md, 283 283 a.w_full, 284 - t.name === 'light' ? t.atoms.border : t.atoms.border_contrast, 284 + t.atoms.border_contrast_low, 285 285 ctx.selected && { 286 286 borderTopColor: t.palette.primary_200, 287 287 }, ··· 360 360 }, 361 361 a.mt_md, 362 362 a.w_full, 363 - t.atoms.border, 363 + t.atoms.border_contrast_low, 364 364 ]} 365 365 /> 366 366
+18 -3
src/screens/Onboarding/StepAlgoFeeds/index.tsx
··· 115 115 onChange={setPrimaryFeedUris} 116 116 label={_(msg`Select your primary algorithmic feeds`)}> 117 117 <Text 118 - style={[a.text_md, a.pt_4xl, a.pb_md, t.atoms.text_contrast_700]}> 118 + style={[ 119 + a.text_md, 120 + a.pt_4xl, 121 + a.pb_md, 122 + t.atoms.text_contrast_medium, 123 + ]}> 119 124 <Trans>We recommend our "Discover" feed:</Trans> 120 125 </Text> 121 126 <FeedCard config={PRIMARY_FEEDS[0]} /> 122 127 <Text 123 - style={[a.text_md, a.pt_4xl, a.pb_lg, t.atoms.text_contrast_700]}> 128 + style={[ 129 + a.text_md, 130 + a.pt_4xl, 131 + a.pb_lg, 132 + t.atoms.text_contrast_medium, 133 + ]}> 124 134 <Trans>We also think you'll like "For You" by Skygaze:</Trans> 125 135 </Text> 126 136 <FeedCard config={PRIMARY_FEEDS[1]} /> ··· 131 141 onChange={setSeconaryFeedUris} 132 142 label={_(msg`Select your secondary algorithmic feeds`)}> 133 143 <Text 134 - style={[a.text_md, a.pt_4xl, a.pb_lg, t.atoms.text_contrast_700]}> 144 + style={[ 145 + a.text_md, 146 + a.pt_4xl, 147 + a.pb_lg, 148 + t.atoms.text_contrast_medium, 149 + ]}> 135 150 <Trans>There are many feeds to try:</Trans> 136 151 </Text> 137 152 <View style={[a.gap_md]}>
+3 -3
src/screens/Onboarding/StepFinished.tsx
··· 101 101 <Trans>Public</Trans> 102 102 </Text> 103 103 <Text 104 - style={[t.atoms.text_contrast_500, a.text_md, a.leading_snug]}> 104 + style={[t.atoms.text_contrast_medium, a.text_md, a.leading_snug]}> 105 105 <Trans> 106 106 Your posts, likes, and blocks are public. Mutes are private. 107 107 </Trans> ··· 115 115 <Trans>Open</Trans> 116 116 </Text> 117 117 <Text 118 - style={[t.atoms.text_contrast_500, a.text_md, a.leading_snug]}> 118 + style={[t.atoms.text_contrast_medium, a.text_md, a.leading_snug]}> 119 119 <Trans>Never lose access to your followers or data.</Trans> 120 120 </Text> 121 121 </View> ··· 131 131 <Trans>Flexible</Trans> 132 132 </Text> 133 133 <Text 134 - style={[t.atoms.text_contrast_500, a.text_md, a.leading_snug]}> 134 + style={[t.atoms.text_contrast_medium, a.text_md, a.leading_snug]}> 135 135 <Trans>Choose the algorithms that power your custom feeds.</Trans> 136 136 </Text> 137 137 </View>
+1 -1
src/screens/Onboarding/StepModeration/AdultContentEnabledPref.tsx
··· 96 96 <Text 97 97 style={[ 98 98 a.flex_1, 99 - t.atoms.text_contrast_700, 99 + t.atoms.text_contrast_medium, 100 100 a.leading_snug, 101 101 {paddingTop: 1}, 102 102 ]}>
+1 -1
src/screens/Onboarding/StepModeration/ModerationOption.tsx
··· 57 57 entering={isMounted.current ? FadeIn : undefined}> 58 58 <View style={[a.gap_xs, {width: '50%'}]}> 59 59 <Text style={[a.font_bold]}>{groupInfo.title}</Text> 60 - <Text style={[t.atoms.text_contrast_700, a.leading_snug]}> 60 + <Text style={[t.atoms.text_contrast_medium, a.leading_snug]}> 61 61 {groupInfo.subtitle} 62 62 </Text> 63 63 </View>
+2 -2
src/screens/Onboarding/StepSuggestedAccounts/SuggestedAccountCard.tsx
··· 95 95 <Text style={[a.font_bold, a.text_md, a.pb_xs]} numberOfLines={1}> 96 96 {profile.displayName} 97 97 </Text> 98 - <Text style={[t.atoms.text_contrast_600]}>{profile.handle}</Text> 98 + <Text style={[t.atoms.text_contrast_medium]}>{profile.handle}</Text> 99 99 </View> 100 100 </View> 101 101 ··· 124 124 borderTopWidth: 1, 125 125 }, 126 126 a.w_full, 127 - t.name === 'light' ? t.atoms.border : t.atoms.border_contrast, 127 + t.atoms.border_contrast_low, 128 128 ctx.selected && { 129 129 borderTopColor: t.palette.primary_200, 130 130 },
+10 -10
src/view/screens/Storybook/Theming.tsx
··· 14 14 15 15 <Text style={[a.font_bold, a.pt_xl, a.px_md]}>theme.atoms.text</Text> 16 16 17 - <View style={[a.flex_1, t.atoms.border, a.border_t]} /> 18 - <Text style={[a.font_bold, t.atoms.text_contrast_600, a.px_md]}> 19 - theme.atoms.text_contrast_600 17 + <View style={[a.flex_1, t.atoms.border_contrast_high, a.border_t]} /> 18 + <Text style={[a.font_bold, t.atoms.text_contrast_high, a.px_md]}> 19 + theme.atoms.text_contrast_high 20 20 </Text> 21 21 22 - <View style={[a.flex_1, t.atoms.border, a.border_t]} /> 23 - <Text style={[a.font_bold, t.atoms.text_contrast_500, a.px_md]}> 24 - theme.atoms.text_contrast_500 22 + <View style={[a.flex_1, t.atoms.border_contrast_medium, a.border_t]} /> 23 + <Text style={[a.font_bold, t.atoms.text_contrast_medium, a.px_md]}> 24 + theme.atoms.text_contrast_medium 25 25 </Text> 26 26 27 - <View style={[a.flex_1, t.atoms.border, a.border_t]} /> 28 - <Text style={[a.font_bold, t.atoms.text_contrast_400, a.px_md]}> 29 - theme.atoms.text_contrast_400 27 + <View style={[a.flex_1, t.atoms.border_contrast_low, a.border_t]} /> 28 + <Text style={[a.font_bold, t.atoms.text_contrast_low, a.px_md]}> 29 + theme.atoms.text_contrast_low 30 30 </Text> 31 31 32 - <View style={[a.flex_1, t.atoms.border_contrast, a.border_t]} /> 32 + <View style={[a.flex_1, t.atoms.border_contrast_low, a.border_t]} /> 33 33 34 34 <View style={[a.w_full, a.gap_md]}> 35 35 <View style={[t.atoms.bg, a.justify_center, a.p_md]}>
+1 -9
src/view/screens/Storybook/Typography.tsx
··· 2 2 import {View} from 'react-native' 3 3 4 4 import {atoms as a} from '#/alf' 5 - import {Text, H1, H2, H3, H4, H5, H6, P} from '#/components/Typography' 5 + import {Text} from '#/components/Typography' 6 6 import {RichText} from '#/components/RichText' 7 7 8 8 export function Typography() { 9 9 return ( 10 10 <View style={[a.gap_md]}> 11 - <H1>H1 Heading</H1> 12 - <H2>H2 Heading</H2> 13 - <H3>H3 Heading</H3> 14 - <H4>H4 Heading</H4> 15 - <H5>H5 Heading</H5> 16 - <H6>H6 Heading</H6> 17 - <P>P Paragraph</P> 18 - 19 11 <Text style={[a.text_5xl]}>atoms.text_5xl</Text> 20 12 <Text style={[a.text_4xl]}>atoms.text_4xl</Text> 21 13 <Text style={[a.text_3xl]}>atoms.text_3xl</Text>