acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki 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
45 changed files with 835 additions and 256 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/styles.ts
+3 -3
View File
@@ -79,13 +79,13 @@ export const s = StyleSheet.create({
// font weights
fw600: {fontWeight: '600'},
bold: {fontWeight: 'bold'},
bold: {fontWeight: '700'},
fw500: {fontWeight: '500'},
semiBold: {fontWeight: '500'},
fw400: {fontWeight: '400'},
normal: {fontWeight: '400'},
fw300: {fontWeight: '300'},
light: {fontWeight: '300'},
fw300: {fontWeight: '400'},
light: {fontWeight: '400'},
fw200: {fontWeight: '200'},
// text decoration
src/lib/themes.ts
+45 -44
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,