add header and background design

apps/expo/tamagui.config.ts

@@ -83,22 +83,97 @@ const createThemeConfig = (tokens: Tokens) => ({
   inputPlaceholderText: tokens.shade.c300,
   inputText: tokens.white,
   inputIconColor: tokens.shade.c50,
+
+  red100: tokens.semantic.red.c100,
+  red200: tokens.semantic.red.c200,
+  red300: tokens.semantic.red.c300,
+  red400: tokens.semantic.red.c400,
+
+  green100: tokens.semantic.green.c100,
+  green200: tokens.semantic.green.c200,
+  green300: tokens.semantic.green.c300,
+  green400: tokens.semantic.green.c400,
+
+  silver100: tokens.semantic.silver.c100,
+  silver200: tokens.semantic.silver.c200,
+  silver300: tokens.semantic.silver.c300,
+  silver400: tokens.semantic.silver.c400,
+
+  yellow100: tokens.semantic.yellow.c100,
+  yellow200: tokens.semantic.yellow.c200,
+  yellow300: tokens.semantic.yellow.c300,
+  yellow400: tokens.semantic.yellow.c400,
+
+  rose100: tokens.semantic.rose.c100,
+  rose200: tokens.semantic.rose.c200,
+  rose300: tokens.semantic.rose.c300,
+  rose400: tokens.semantic.rose.c400,
+
+  blue50: tokens.blue.c50,
+  blue100: tokens.blue.c100,
+  blue200: tokens.blue.c200,
+  blue300: tokens.blue.c300,
+  blue400: tokens.blue.c400,
+  blue500: tokens.blue.c500,
+  blue600: tokens.blue.c600,
+  blue700: tokens.blue.c700,
+  blue800: tokens.blue.c800,
+  blue900: tokens.blue.c900,
+
+  purple50: tokens.purple.c50,
+  purple100: tokens.purple.c100,
+  purple200: tokens.purple.c200,
+  purple300: tokens.purple.c300,
+  purple400: tokens.purple.c400,
+  purple500: tokens.purple.c500,
+  purple600: tokens.purple.c600,
+  purple700: tokens.purple.c700,
+  purple800: tokens.purple.c800,
+  purple900: tokens.purple.c900,
+
+  ash50: tokens.ash.c50,
+  ash100: tokens.ash.c100,
+  ash200: tokens.ash.c200,
+  ash300: tokens.ash.c300,
+  ash400: tokens.ash.c400,
+  ash500: tokens.ash.c500,
+  ash600: tokens.ash.c600,
+  ash700: tokens.ash.c700,
+  ash800: tokens.ash.c800,
+  ash900: tokens.ash.c900,
+
+  shade50: tokens.shade.c50,
+  shade100: tokens.shade.c100,
+  shade200: tokens.shade.c200,
+  shade300: tokens.shade.c300,
+  shade400: tokens.shade.c400,
+  shade500: tokens.shade.c500,
+  shade600: tokens.shade.c600,
+  shade700: tokens.shade.c700,
+  shade800: tokens.shade.c800,
+  shade900: tokens.shade.c900,
 });
 
 const openSansFace = {
-  normal: { normal: "OpenSans-Regular", italic: "OpenSans-Italic" },
-  bold: { normal: "OpenSans-Bold", italic: "OpenSans-BoldItalic" },
-  300: { normal: "OpenSans-Light", italic: "OpenSans-LightItalic" },
-  500: { normal: "OpenSans-Regular", italic: "OpenSans-Italic" },
-  600: { normal: "OpenSans-SemiBold", italic: "OpenSans-SemiBoldItalic" },
-  700: { normal: "OpenSans-Bold", italic: "OpenSans-BoldItalic" },
-  800: { normal: "OpenSans-ExtraBold", italic: "OpenSans-ExtraBoldItalic" },
+  normal: { normal: "OpenSansRegular", italic: "OpenSansItalic" },
+  bold: { normal: "OpenSansBold", italic: "OpenSansBoldItalic" },
+  300: { normal: "OpenSansLight", italic: "OpenSansLightItalic" },
+  500: { normal: "OpenSansRegular", italic: "OpenSansItalic" },
+  600: { normal: "OpenSansSemiBold", italic: "OpenSansSemiBoldItalic" },
+  700: { normal: "OpenSansBold", italic: "OpenSansBoldItalic" },
+  800: { normal: "OpenSansExtraBold", italic: "OpenSansExtraBoldItalic" },
 };
 
 const headingFont = createFont({
   size: config.fonts.heading.size,
   lineHeight: config.fonts.heading.lineHeight,
-  weight: config.fonts.heading.weight,
+  weight: {
+    light: 300,
+    normal: 500,
+    semibold: 600,
+    bold: 700,
+    extrabold: 800,
+  },
   letterSpacing: config.fonts.heading.letterSpacing,
   face: openSansFace,
 });
@@ -106,7 +181,13 @@ const headingFont = createFont({
 const bodyFont = createFont({
   size: config.fonts.body.size,
   lineHeight: config.fonts.body.lineHeight,
-  weight: config.fonts.body.weight,
+  weight: {
+    light: 300,
+    normal: 500,
+    semibold: 600,
+    bold: 700,
+    extrabold: 800,
+  },
   letterSpacing: config.fonts.body.letterSpacing,
   face: openSansFace,
 });