Consistent styling and design tokens

[ninest]

There's currently no system for deciding the values of margin, padding, or colors. For spacing (margin, padding), I suggest we make an object of values to use everywhere. For example:

export const spacing = {
    xs: 5,
    sm: 7,
    base: 10,
    md: 12,
    lg: 17,
    xl: 25,
}

So rather than having a style like

const styles = StyleSheet.create({
  wrapper: { marginBottom: 12 }, // Should it be 10, 11, 12, 13, 14, or 15??
});

we can use

const styles = StyleSheet.create({
  wrapper: { marginBottom: spacing.md },
});

Similar thing for colors:

export const colors = {
    primary: {
        light: '#818cf8',
        default: '#6366f1',
        dark: '#4338ca',
    },
    gray: {
        lightest: '...',
        lighter: '...',
        light: '...',
        default: '...',
        dark: '...',
        darker: '...',
        darkest: '...',
    },
    error: {
        light: '...',
        default: '...',
        dark: '...',
    },
    ...
}

This will make it easier to manage colors in once place. If you decide to introduce more themes (light, dark, black), it'll be easier to change the theme using context. Rather than going through every component and changing colors, we can just make a new colors object.

[adidoesnt]

Sure, I'll create a Stylesheet.js perhaps - we can store standardised styling and design tokens in there.

[ninest]

Yeah that sounds good. We can reference those values rather than manually typing out numbers or colors