[Neue] Base (#5395)

* 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>

1 files changed, 45 insertions, 44 deletions

diff --git a/src/lib/themes.ts b/src/lib/themes.ts
index 9590f1659..d16f9f632 100644
--- a/src/lib/themes.ts
+++ b/src/lib/themes.ts
@@ -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,