Migrate to @bsky.app/alf package (#9030)
* Add storybook shortcut in dev * Migrate to alg pkg * Migrate font_bold to new font_semi_bold * Migrate font_heavy to font_bold * Fix old theme refs * Remove leading util * Bump * Revert "Add storybook shortcut in dev" This reverts commit 7a86195c77fb5d449c7782e64ebabb6addfab919. * Remove alf script * Adjust font scale * Bump * Bump pkg * Migrate values from conflicts * Create default themes outside react * Use built-in alf utils * Migrate old font styles * Remove unused tokens * Move theme creation to more appropriate file * Update button colors * Adjust TextField colors, line heights
This commit is contained in:
@@ -1,8 +1,8 @@
|
||||
import {type ReactNode} from 'react'
|
||||
import {createContext, useContext} from 'react'
|
||||
import {type TextStyle, type ViewStyle} from 'react-native'
|
||||
import {type ThemeName} from '@bsky.app/alf'
|
||||
|
||||
import {type ThemeName} from '#/alf/types'
|
||||
import {darkTheme, defaultTheme, dimTheme} from './themes'
|
||||
|
||||
export type ColorScheme = 'light' | 'dark'
|
||||
|
||||
@@ -147,7 +147,7 @@ export function CountWheel({
|
||||
big ? a.text_md : a.text_sm,
|
||||
a.user_select_none,
|
||||
isLiked
|
||||
? [a.font_bold, s.likeColor]
|
||||
? [a.font_semi_bold, s.likeColor]
|
||||
: {color: t.palette.contrast_500},
|
||||
]}>
|
||||
{formattedCount}
|
||||
@@ -165,7 +165,7 @@ export function CountWheel({
|
||||
big ? a.text_md : a.text_sm,
|
||||
a.user_select_none,
|
||||
isLiked
|
||||
? [a.font_bold, s.likeColor]
|
||||
? [a.font_semi_bold, s.likeColor]
|
||||
: {color: t.palette.contrast_500},
|
||||
]}>
|
||||
{formattedPrevCount}
|
||||
|
||||
@@ -93,7 +93,7 @@ export function CountWheel({
|
||||
big ? a.text_md : a.text_sm,
|
||||
a.user_select_none,
|
||||
isLiked
|
||||
? [a.font_bold, s.likeColor]
|
||||
? [a.font_semi_bold, s.likeColor]
|
||||
: {color: t.palette.contrast_500},
|
||||
]}>
|
||||
{formattedCount}
|
||||
@@ -110,7 +110,7 @@ export function CountWheel({
|
||||
big ? a.text_md : a.text_sm,
|
||||
a.user_select_none,
|
||||
isLiked
|
||||
? [a.font_bold, s.likeColor]
|
||||
? [a.font_semi_bold, s.likeColor]
|
||||
: {color: t.palette.contrast_500},
|
||||
]}>
|
||||
{formattedPrevCount}
|
||||
|
||||
+27
-27
@@ -101,17 +101,17 @@ export const defaultTheme: Theme = {
|
||||
'2xl-medium': {
|
||||
fontSize: 18,
|
||||
letterSpacing: tokens.TRACKING,
|
||||
fontWeight: fontWeight.bold,
|
||||
fontWeight: fontWeight.semiBold,
|
||||
},
|
||||
'2xl-bold': {
|
||||
fontSize: 18,
|
||||
letterSpacing: tokens.TRACKING,
|
||||
fontWeight: fontWeight.bold,
|
||||
fontWeight: fontWeight.semiBold,
|
||||
},
|
||||
'2xl-heavy': {
|
||||
fontSize: 18,
|
||||
letterSpacing: tokens.TRACKING,
|
||||
fontWeight: fontWeight.heavy,
|
||||
fontWeight: fontWeight.bold,
|
||||
},
|
||||
'xl-thin': {
|
||||
fontSize: 17,
|
||||
@@ -126,17 +126,17 @@ export const defaultTheme: Theme = {
|
||||
'xl-medium': {
|
||||
fontSize: 17,
|
||||
letterSpacing: tokens.TRACKING,
|
||||
fontWeight: fontWeight.bold,
|
||||
fontWeight: fontWeight.semiBold,
|
||||
},
|
||||
'xl-bold': {
|
||||
fontSize: 17,
|
||||
letterSpacing: tokens.TRACKING,
|
||||
fontWeight: fontWeight.bold,
|
||||
fontWeight: fontWeight.semiBold,
|
||||
},
|
||||
'xl-heavy': {
|
||||
fontSize: 17,
|
||||
letterSpacing: tokens.TRACKING,
|
||||
fontWeight: fontWeight.heavy,
|
||||
fontWeight: fontWeight.bold,
|
||||
},
|
||||
'lg-thin': {
|
||||
fontSize: 16,
|
||||
@@ -151,17 +151,17 @@ export const defaultTheme: Theme = {
|
||||
'lg-medium': {
|
||||
fontSize: 16,
|
||||
letterSpacing: tokens.TRACKING,
|
||||
fontWeight: fontWeight.bold,
|
||||
fontWeight: fontWeight.semiBold,
|
||||
},
|
||||
'lg-bold': {
|
||||
fontSize: 16,
|
||||
letterSpacing: tokens.TRACKING,
|
||||
fontWeight: fontWeight.bold,
|
||||
fontWeight: fontWeight.semiBold,
|
||||
},
|
||||
'lg-heavy': {
|
||||
fontSize: 16,
|
||||
letterSpacing: tokens.TRACKING,
|
||||
fontWeight: fontWeight.heavy,
|
||||
fontWeight: fontWeight.bold,
|
||||
},
|
||||
'md-thin': {
|
||||
fontSize: 15,
|
||||
@@ -176,17 +176,17 @@ export const defaultTheme: Theme = {
|
||||
'md-medium': {
|
||||
fontSize: 15,
|
||||
letterSpacing: tokens.TRACKING,
|
||||
fontWeight: fontWeight.bold,
|
||||
fontWeight: fontWeight.semiBold,
|
||||
},
|
||||
'md-bold': {
|
||||
fontSize: 15,
|
||||
letterSpacing: tokens.TRACKING,
|
||||
fontWeight: fontWeight.bold,
|
||||
fontWeight: fontWeight.semiBold,
|
||||
},
|
||||
'md-heavy': {
|
||||
fontSize: 15,
|
||||
letterSpacing: tokens.TRACKING,
|
||||
fontWeight: fontWeight.heavy,
|
||||
fontWeight: fontWeight.bold,
|
||||
},
|
||||
'sm-thin': {
|
||||
fontSize: 14,
|
||||
@@ -201,17 +201,17 @@ export const defaultTheme: Theme = {
|
||||
'sm-medium': {
|
||||
fontSize: 14,
|
||||
letterSpacing: tokens.TRACKING,
|
||||
fontWeight: fontWeight.bold,
|
||||
fontWeight: fontWeight.semiBold,
|
||||
},
|
||||
'sm-bold': {
|
||||
fontSize: 14,
|
||||
letterSpacing: tokens.TRACKING,
|
||||
fontWeight: fontWeight.bold,
|
||||
fontWeight: fontWeight.semiBold,
|
||||
},
|
||||
'sm-heavy': {
|
||||
fontSize: 14,
|
||||
letterSpacing: tokens.TRACKING,
|
||||
fontWeight: fontWeight.heavy,
|
||||
fontWeight: fontWeight.bold,
|
||||
},
|
||||
'xs-thin': {
|
||||
fontSize: 13,
|
||||
@@ -226,40 +226,40 @@ export const defaultTheme: Theme = {
|
||||
'xs-medium': {
|
||||
fontSize: 13,
|
||||
letterSpacing: tokens.TRACKING,
|
||||
fontWeight: fontWeight.bold,
|
||||
fontWeight: fontWeight.semiBold,
|
||||
},
|
||||
'xs-bold': {
|
||||
fontSize: 13,
|
||||
letterSpacing: tokens.TRACKING,
|
||||
fontWeight: fontWeight.bold,
|
||||
fontWeight: fontWeight.semiBold,
|
||||
},
|
||||
'xs-heavy': {
|
||||
fontSize: 13,
|
||||
letterSpacing: tokens.TRACKING,
|
||||
fontWeight: fontWeight.heavy,
|
||||
fontWeight: fontWeight.bold,
|
||||
},
|
||||
|
||||
'title-2xl': {
|
||||
fontSize: 34,
|
||||
letterSpacing: tokens.TRACKING,
|
||||
fontWeight: fontWeight.bold,
|
||||
fontWeight: fontWeight.semiBold,
|
||||
},
|
||||
'title-xl': {
|
||||
fontSize: 28,
|
||||
letterSpacing: tokens.TRACKING,
|
||||
fontWeight: fontWeight.bold,
|
||||
fontWeight: fontWeight.semiBold,
|
||||
},
|
||||
'title-lg': {
|
||||
fontSize: 22,
|
||||
fontWeight: fontWeight.bold,
|
||||
fontWeight: fontWeight.semiBold,
|
||||
},
|
||||
title: {
|
||||
fontWeight: fontWeight.bold,
|
||||
fontWeight: fontWeight.semiBold,
|
||||
fontSize: 20,
|
||||
letterSpacing: tokens.TRACKING,
|
||||
},
|
||||
'title-sm': {
|
||||
fontWeight: fontWeight.bold,
|
||||
fontWeight: fontWeight.semiBold,
|
||||
fontSize: 17,
|
||||
letterSpacing: tokens.TRACKING,
|
||||
},
|
||||
@@ -274,12 +274,12 @@ export const defaultTheme: Theme = {
|
||||
fontWeight: fontWeight.normal,
|
||||
},
|
||||
'button-lg': {
|
||||
fontWeight: fontWeight.bold,
|
||||
fontWeight: fontWeight.semiBold,
|
||||
fontSize: 18,
|
||||
letterSpacing: tokens.TRACKING,
|
||||
},
|
||||
button: {
|
||||
fontWeight: fontWeight.bold,
|
||||
fontWeight: fontWeight.semiBold,
|
||||
fontSize: 14,
|
||||
letterSpacing: tokens.TRACKING,
|
||||
},
|
||||
@@ -296,7 +296,7 @@ export const darkTheme: Theme = {
|
||||
palette: {
|
||||
...defaultTheme.palette,
|
||||
default: {
|
||||
background: darkPalette.black,
|
||||
background: darkPalette.contrast_0,
|
||||
backgroundLight: darkPalette.contrast_25,
|
||||
text: darkPalette.white,
|
||||
textLight: darkPalette.contrast_600,
|
||||
@@ -345,7 +345,7 @@ export const dimTheme: Theme = {
|
||||
...darkTheme.palette,
|
||||
default: {
|
||||
...darkTheme.palette.default,
|
||||
background: dimPalette.black,
|
||||
background: dimPalette.contrast_0,
|
||||
backgroundLight: dimPalette.contrast_25,
|
||||
text: dimPalette.white,
|
||||
textLight: dimPalette.contrast_700,
|
||||
|
||||
Reference in New Issue
Block a user