zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

[Neue] Base (#5395)

Browse source 
* Add fontScale, gate it, fix some computes

* Add inter, integrate

* Clean up

* Apply to old Text component

* Use numeric weight

* Cleanup

* Clean up appearance settings

* Global tracking

* Fix regular italic variant

* Refactor settings and fontScale values

* Remove flags

* Get rid of lower weight font usage

* Remove gate from settings

* Refactor appearance settings for reuse

* Add neue type nux

* Update defaults

* Load fonts, add fallback families

* Load fonts via plugin in production

* Fixes

* Fix for web

* Nits

---------

Co-authored-by: Hailey <me@haileyok.com>
This commit is contained in:
Eric Bailey 2024-09-18 19:35:34 -05:00 • committed by GitHub
parent fb3be79820
commit cbc7cd0808
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
45 changed files with 835 additions and 256 deletions
Download patch file Download diff file Expand all files Collapse all files

89
src/lib/themes.ts
View file

@ -1,5 +1,6 @@
import {Platform} from 'react-native'
import {tokens} from '#/alf'
import {darkPalette, dimPalette, lightPalette} from '#/alf/themes'
import {colors} from './styles'
import type {Theme} from './ThemeContext'
@ -88,163 +89,163 @@ export const defaultTheme: Theme = {
typography: {
'2xl-thin': {
fontSize: 18,
letterSpacing: 0.25,
fontWeight: '300',
letterSpacing: tokens.TRACKING,
fontWeight: '400',
},
'2xl': {
fontSize: 18,
letterSpacing: 0.25,
letterSpacing: tokens.TRACKING,
fontWeight: '400',
},
'2xl-medium': {
fontSize: 18,
letterSpacing: 0.25,
letterSpacing: tokens.TRACKING,
fontWeight: '500',
},
'2xl-bold': {
fontSize: 18,
letterSpacing: 0.25,
letterSpacing: tokens.TRACKING,
fontWeight: '700',
},
'2xl-heavy': {
fontSize: 18,
letterSpacing: 0.25,
letterSpacing: tokens.TRACKING,
fontWeight: '800',
},
'xl-thin': {
fontSize: 17,
letterSpacing: 0.25,
fontWeight: '300',
letterSpacing: tokens.TRACKING,
fontWeight: '400',
},
xl: {
fontSize: 17,
letterSpacing: 0.25,
letterSpacing: tokens.TRACKING,
fontWeight: '400',
},
'xl-medium': {
fontSize: 17,
letterSpacing: 0.25,
letterSpacing: tokens.TRACKING,
fontWeight: '500',
},
'xl-bold': {
fontSize: 17,
letterSpacing: 0.25,
letterSpacing: tokens.TRACKING,
fontWeight: '700',
},
'xl-heavy': {
fontSize: 17,
letterSpacing: 0.25,
letterSpacing: tokens.TRACKING,
fontWeight: '800',
},
'lg-thin': {
fontSize: 16,
letterSpacing: 0.25,
fontWeight: '300',
letterSpacing: tokens.TRACKING,
fontWeight: '400',
},
lg: {
fontSize: 16,
letterSpacing: 0.25,
letterSpacing: tokens.TRACKING,
fontWeight: '400',
},
'lg-medium': {
fontSize: 16,
letterSpacing: 0.25,
letterSpacing: tokens.TRACKING,
fontWeight: '500',
},
'lg-bold': {
fontSize: 16,
letterSpacing: 0.25,
letterSpacing: tokens.TRACKING,
fontWeight: '700',
},
'lg-heavy': {
fontSize: 16,
letterSpacing: 0.25,
letterSpacing: tokens.TRACKING,
fontWeight: '800',
},
'md-thin': {
fontSize: 15,
letterSpacing: 0.25,
fontWeight: '300',
letterSpacing: tokens.TRACKING,
fontWeight: '400',
},
md: {
fontSize: 15,
letterSpacing: 0.25,
letterSpacing: tokens.TRACKING,
fontWeight: '400',
},
'md-medium': {
fontSize: 15,
letterSpacing: 0.25,
letterSpacing: tokens.TRACKING,
fontWeight: '500',
},
'md-bold': {
fontSize: 15,
letterSpacing: 0.25,
letterSpacing: tokens.TRACKING,
fontWeight: '700',
},
'md-heavy': {
fontSize: 15,
letterSpacing: 0.25,
letterSpacing: tokens.TRACKING,
fontWeight: '800',
},
'sm-thin': {
fontSize: 14,
letterSpacing: 0.25,
fontWeight: '300',
letterSpacing: tokens.TRACKING,
fontWeight: '400',
},
sm: {
fontSize: 14,
letterSpacing: 0.25,
letterSpacing: tokens.TRACKING,
fontWeight: '400',
},
'sm-medium': {
fontSize: 14,
letterSpacing: 0.25,
letterSpacing: tokens.TRACKING,
fontWeight: '500',
},
'sm-bold': {
fontSize: 14,
letterSpacing: 0.25,
letterSpacing: tokens.TRACKING,
fontWeight: '700',
},
'sm-heavy': {
fontSize: 14,
letterSpacing: 0.25,
letterSpacing: tokens.TRACKING,
fontWeight: '800',
},
'xs-thin': {
fontSize: 13,
letterSpacing: 0.25,
fontWeight: '300',
letterSpacing: tokens.TRACKING,
fontWeight: '400',
},
xs: {
fontSize: 13,
letterSpacing: 0.25,
letterSpacing: tokens.TRACKING,
fontWeight: '400',
},
'xs-medium': {
fontSize: 13,
letterSpacing: 0.25,
letterSpacing: tokens.TRACKING,
fontWeight: '500',
},
'xs-bold': {
fontSize: 13,
letterSpacing: 0.25,
letterSpacing: tokens.TRACKING,
fontWeight: '700',
},
'xs-heavy': {
fontSize: 13,
letterSpacing: 0.25,
letterSpacing: tokens.TRACKING,
fontWeight: '800',
},
'title-2xl': {
fontSize: 34,
letterSpacing: 0.25,
letterSpacing: tokens.TRACKING,
fontWeight: '500',
},
'title-xl': {
fontSize: 28,
letterSpacing: 0.25,
letterSpacing: tokens.TRACKING,
fontWeight: '500',
},
'title-lg': {
@ -254,32 +255,32 @@ export const defaultTheme: Theme = {
title: {
fontWeight: '500',
fontSize: 20,
letterSpacing: 0.15,
letterSpacing: tokens.TRACKING,
},
'title-sm': {
fontWeight: 'bold',
fontSize: 17,
letterSpacing: 0.15,
letterSpacing: tokens.TRACKING,
},
'post-text': {
fontSize: 16,
letterSpacing: 0.2,
letterSpacing: tokens.TRACKING,
fontWeight: '400',
},
'post-text-lg': {
fontSize: 20,
letterSpacing: 0.2,
letterSpacing: tokens.TRACKING,
fontWeight: '400',
},
'button-lg': {
fontWeight: '500',
fontSize: 18,
letterSpacing: 0.5,
letterSpacing: tokens.TRACKING,
},
button: {
fontWeight: '500',
fontSize: 14,
letterSpacing: 0.5,
letterSpacing: tokens.TRACKING,
},
mono: {
fontSize: 14,