How organize your files of style

ReactStyleOrganization

// styles/colors.js

const colors = {
    primary: '#333333'
};

export default colors;

// styles/fonts.js

const fonts = {
    title: 32
};

export default fonts;

// styles/metrics.js

const getTextMedia = (maxWidth) => {
    return `screen and (max-width: ${maxWidth}px)`;
};

const metrics = {
    phone: getTextMedia(360),
    phone: getTextMedia(360),
    phone: getTextMedia(360),
    phone: getTextMedia(360),
};

export default metrics;

// styles/index.js

import colors from './colors';
import fonts from './fonts';
import metrics from './metrics';

export { colors, fonts, metrics };