[C-2892 C-3253 C-3254] Add harmony-native typography (#6457)

packages/mobile/.storybook/storybook.requires.ts

@@ -23,6 +23,7 @@ global.STORIES = [
 import '@storybook/addon-ondevice-controls/register'
 import '@storybook/addon-ondevice-actions/register'
 
+// @ts-expect-error
 import { argsEnhancers } from '@storybook/addon-actions/dist/modern/preset/addArgs'
 
 import { decorators, parameters } from './preview'
@@ -49,8 +50,11 @@ try {
 
 const getStories = () => {
   return {
-    '../src/harmony-native/Primitives.stories.tsx': require('../src/harmony-native/foundations/color/primitives.stories.tsx')
+    '../src/harmony-native/color.stories.tsx': require('../src/harmony-native/foundations/color/color.stories.tsx'),
+    '../src/harmony-native/Typography.stories.tsx': require('../src/harmony-native/foundations/typography/Typography.stories.tsx'),
+    '../src/harmony-native/Link.stories.tsx': require('../src/harmony-native/components/Link/Link.stories.tsx')
   }
 }
 
+// @ts-expect-error
 configure(getStories, module, false)

packages/mobile/src/harmony-native/components/Link/Link.stories.tsx

@@ -4,7 +4,7 @@ import type { Story } from '@storybook/react-native'
 import { Link } from './Link'
 
 const LinkMeta = {
-  title: 'Link',
+  title: 'Components/Link',
   component: Link,
   argTypes: {
     onPress: { action: 'pressed the link' }

packages/mobile/src/harmony-native/foundations/color/primitives.stories.tsx → packages/mobile/src/harmony-native/foundations/color/color.stories.tsx

@@ -6,8 +6,8 @@ import { Divider, SegmentedControl, Text, Tile } from 'app/components/core'
 import { makeStyles } from 'app/styles'
 import { useThemeVariant } from 'app/utils/theme'
 
-import type { Primitives } from './primitives'
-import { primitives } from './primitives'
+import type { PrimitiveColors } from './primitive'
+import { primitiveTheme } from './primitive'
 
 const { setTheme } = themeActions
 const { getTheme } = themeSelectors
@@ -61,7 +61,7 @@ const useStyles = makeStyles(({ spacing, palette }) => ({
 }))
 
 const messages = {
-  title: 'Primitives',
+  title: 'Color',
   description:
     'Primitives include all the Audius colors. They gave a numeric name to our HEX values and are organized from lightest to darkest.',
   staticDescription:
@@ -104,6 +104,9 @@ const PaletteSegmentedControl = () => {
 function ColorSwatch(props: ColorSwatchProps) {
   const styles = useStyles()
   const { title, hex } = props
+  // TODO add gradient!
+  if (typeof hex !== 'string') return null
+
   return (
     <Tile style={styles.swatch2} styles={{ content: styles.swatch }}>
       <View style={[styles.swatchColor, { backgroundColor: hex }]} />
@@ -119,7 +122,7 @@ function ColorSwatch(props: ColorSwatchProps) {
 
 type ColorRowProps = {
   description: string
-  colors: Primitives[keyof Primitives]
+  colors: PrimitiveColors[keyof PrimitiveColors]
 }
 
 function ColorRow(props: ColorRowProps) {
@@ -139,7 +142,7 @@ function ColorRow(props: ColorRowProps) {
   )
 }
 
-function Primitivess() {
+function Colors() {
   const theme = useThemeVariant()
   const themeToHarmonyTheme = {
     [Theme.DEFAULT]: 'day',
@@ -148,7 +151,7 @@ function Primitivess() {
     [Theme.MATRIX]: 'matrix'
   }
   const styles = useStyles()
-  const themedPrimitives = primitives[themeToHarmonyTheme[theme]]
+  const themedPrimitives = primitiveTheme[themeToHarmonyTheme[theme]]
   const rows = [
     {
       title: 'Static',
@@ -227,11 +230,11 @@ function Primitivess() {
   )
 }
 
-const PrimitivesMeta = {
-  title: 'Foundation/Color/Primitives',
-  component: Primitivess
+const ColorMeta = {
+  title: 'Foundation/Color',
+  component: Colors
 }
 
-export default PrimitivesMeta
+export default ColorMeta
 
-export const Basic = {}
+export const Docs = {}

packages/mobile/src/harmony-native/foundations/color/color.ts

@@ -0,0 +1,19 @@
+import { primitiveTheme } from './primitive'
+import { semanticTheme } from './semantic'
+
+export const colorTheme = {
+  day: {
+    ...primitiveTheme.day,
+    ...semanticTheme.day
+  },
+  dark: {
+    ...primitiveTheme.dark,
+    ...semanticTheme.dark
+  },
+  matrix: {
+    ...primitiveTheme.matrix,
+    ...semanticTheme.matrix
+  }
+}
+
+export type ColorTheme = typeof colorTheme

packages/mobile/src/harmony-native/foundations/color/index.ts

@@ -0,0 +1,2 @@
+export * from './primitive'
+export * from './color'

packages/mobile/src/harmony-native/foundations/color/primitives.ts → packages/mobile/src/harmony-native/foundations/color/primitive.ts

@@ -1,6 +1,13 @@
-export type Theme = 'day' | 'dark' | 'matrix'
+import type { LinearGradientProps } from 'react-native-linear-gradient'
 
-export type Primitives = {
+import type { Theme } from '../types'
+
+export type GradientColor = Pick<
+  LinearGradientProps,
+  'start' | 'end' | 'locations' | 'colors'
+>
+
+export type PrimitiveColors = {
   static: {
     white: string
     primary: string
@@ -46,11 +53,17 @@ export type Primitives = {
     'dark-red': string
     green: string
     'light-green': string
-    gradient: string
+    gradient: GradientColor
   }
 }
 
-export const primitives: Record<Theme, Primitives> = {
+// linear-gradient at 315deg
+const baseLinearGradient = {
+  start: { x: 0, y: 1 },
+  end: { x: 1, y: 0 }
+}
+
+export const primitiveTheme: Record<Theme, PrimitiveColors> = {
   day: {
     static: {
       white: '#FFFFFF',
@@ -97,7 +110,10 @@ export const primitives: Record<Theme, Primitives> = {
       'dark-red': '#BB0218',
       green: '#0F9E48',
       'light-green': '#13C65A',
-      gradient: 'linear-gradient(315deg, #5B23E1 0%, #A22FEB 100%)'
+      gradient: {
+        ...baseLinearGradient,
+        colors: ['#5B23E1', '#A22FEB']
+      }
     }
   },
 
@@ -147,7 +163,10 @@ export const primitives: Record<Theme, Primitives> = {
       'dark-red': '#C43047',
       green: '#6CDF44',
       'light-green': '#13C65A',
-      gradient: 'linear-gradient(315deg, #7652CC 0%, #B05CE6 100%)'
+      gradient: {
+        ...baseLinearGradient,
+        colors: ['#7652CC', '#B05CE6']
+      }
     }
   },
   matrix: {
@@ -196,7 +215,10 @@ export const primitives: Record<Theme, Primitives> = {
       'dark-red': '#BB0218',
       green: '#6CDF44',
       'light-green': '#13C65A',
-      gradient: 'linear-gradient(315deg, #7652CC 0%, #B05CE6 100%)'
+      gradient: {
+        ...baseLinearGradient,
+        colors: ['#7652CC', '#B05CE6']
+      }
     }
   }
 }

packages/mobile/src/harmony-native/foundations/color/semantic.ts

@@ -0,0 +1,104 @@
+import type { Theme } from '../types'
+
+import type { GradientColor } from './primitive'
+import { primitiveTheme } from './primitive'
+
+export type SemanticColors = {
+  textIcon: {
+    heading: GradientColor
+    default: string
+    subdued: string
+    disabled: string
+  }
+  background: {
+    default: string
+    white: string
+    surface1: string
+    surface2: string
+  }
+  border: {
+    default: string
+    strong: string
+  }
+  focus: string
+  status: {
+    error: string
+    warning: string
+    success: string
+  }
+}
+
+export const semanticTheme: Record<Theme, SemanticColors> = {
+  day: {
+    textIcon: {
+      heading: primitiveTheme.day.special.gradient,
+      default: primitiveTheme.day.neutral.neutral,
+      subdued: primitiveTheme.day.neutral['n-400'],
+      disabled: primitiveTheme.day.neutral['n-150']
+    },
+    background: {
+      default: primitiveTheme.day.special.background,
+      white: primitiveTheme.day.special.white,
+      surface1: primitiveTheme.day.neutral['n-25'],
+      surface2: primitiveTheme.day.neutral['n-100']
+    },
+    border: {
+      default: primitiveTheme.day.neutral['n-100'],
+      strong: primitiveTheme.day.neutral['n-150']
+    },
+    focus: primitiveTheme.day.secondary.secondary,
+    status: {
+      error: primitiveTheme.day.special.red,
+      warning: primitiveTheme.day.special.orange,
+      success: primitiveTheme.day.special.green
+    }
+  },
+  dark: {
+    textIcon: {
+      heading: primitiveTheme.dark.special.gradient,
+      default: primitiveTheme.dark.neutral.neutral,
+      subdued: primitiveTheme.dark.neutral['n-400'],
+      disabled: primitiveTheme.dark.neutral['n-150']
+    },
+    background: {
+      default: primitiveTheme.dark.special.background,
+      white: primitiveTheme.dark.special.white,
+      surface1: primitiveTheme.dark.neutral['n-25'],
+      surface2: primitiveTheme.dark.neutral['n-100']
+    },
+    border: {
+      default: primitiveTheme.dark.neutral['n-100'],
+      strong: primitiveTheme.dark.neutral['n-150']
+    },
+    focus: primitiveTheme.dark.secondary.secondary,
+    status: {
+      error: primitiveTheme.dark.special.red,
+      warning: primitiveTheme.dark.special.orange,
+      success: primitiveTheme.dark.special.green
+    }
+  },
+  matrix: {
+    textIcon: {
+      heading: primitiveTheme.matrix.special.gradient,
+      default: primitiveTheme.matrix.neutral.neutral,
+      subdued: primitiveTheme.matrix.neutral['n-400'],
+      disabled: primitiveTheme.matrix.neutral['n-150']
+    },
+    background: {
+      default: primitiveTheme.matrix.special.background,
+      white: primitiveTheme.matrix.special.white,
+      surface1: primitiveTheme.matrix.neutral['n-25'],
+      surface2: primitiveTheme.matrix.neutral['n-100']
+    },
+    border: {
+      default: primitiveTheme.matrix.neutral['n-100'],
+      strong: primitiveTheme.matrix.neutral['n-150']
+    },
+    focus: primitiveTheme.matrix.secondary.secondary,
+    status: {
+      error: primitiveTheme.matrix.special.red,
+      warning: primitiveTheme.matrix.special.orange,
+      success: primitiveTheme.matrix.special.green
+    }
+  }
+}

packages/mobile/src/harmony-native/foundations/index.ts

@@ -1 +1,3 @@
-export * from './color/primitives'
+export * from './color'
+export * from './typography'
+export * from './theme'

packages/mobile/src/harmony-native/foundations/theme/ThemeProvider.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react'
+import { createContext } from 'react'
+
+import type { Theme } from '../types'
+
+type ThemeContextType = {
+  theme: Theme
+}
+
+export const ThemeContext = createContext<ThemeContextType>({
+  theme: 'day'
+})
+
+type ThemeProviderProps = {
+  theme: Theme
+  children: ReactNode
+}
+
+export const ThemeProvider = (props: ThemeProviderProps) => {
+  const { children, theme } = props
+  return (
+    <ThemeContext.Provider value={{ theme }}>{children}</ThemeContext.Provider>
+  )
+}

packages/mobile/src/harmony-native/foundations/theme/index.ts

@@ -0,0 +1,3 @@
+export * from './makeStyles'
+export * from './ThemeProvider'
+export * from './useTheme'

packages/mobile/src/harmony-native/foundations/theme/makeStyles.ts

@@ -0,0 +1,31 @@
+import { useContext } from 'react'
+
+import { StyleSheet } from 'react-native'
+import type { ImageStyle, TextStyle, ViewStyle } from 'react-native'
+
+import { ThemeContext } from './ThemeProvider'
+import type { HarmonyTheme } from './theme'
+import { darkTheme, dayTheme, matrixTheme } from './theme'
+
+export type NamedStyles<T> = {
+  [P in keyof T]:
+    | ViewStyle
+    | TextStyle
+    | ImageStyle
+    | (ViewStyle & { fill: string }) // For SVGs
+}
+
+export const makeStyles = <T extends NamedStyles<T> | NamedStyles<any>>(
+  styles: (theme: HarmonyTheme) => T | NamedStyles<T>
+) => {
+  const harmonyStylesheets = {
+    day: StyleSheet.create(styles(dayTheme)),
+    dark: StyleSheet.create(styles(darkTheme)),
+    matrix: StyleSheet.create(styles(matrixTheme))
+  }
+
+  return function useStyles() {
+    const { theme } = useContext(ThemeContext)
+    return harmonyStylesheets[theme]
+  }
+}