<commit_before>const colors = {
  black: {
    900: '#141414',
    800: '#313233',
    700: '#4E5052',
    600: '#76777A',
    500: '#9D9FA3',
    400: '#C4C7CC',
    300: '#DCDEE0',
    200: '#E8E9EB',
    100: '#F2F3F5',
    50:  '#F7F8FA',
    transparent: {
      88: 'rgba(19, 20, 20, 0.88)',
      40: 'rgba(19, 20, 20, 0.4)',
      20: 'rgba(19, 20, 20, 0.2)',
      8: 'rgba(19, 20, 20, 0.08)',
    },
  },
  green: {
    700: '#00A34C',
    500: '#00B856',
    300: '#6CE0A2',
    100: '#E6FAEF',
  },
  primary: {
    700: '#145ECC',
    500: '#3385FF',
    400: '#66A3FF',
    300: '#99C9FF',
    200: '#DBECFF',
    100: '#EBF4FF',
    50: '#F2F8FF',
  },
  red: {
    700: '#CC1836',
    500: '#F53152',
    300: '#FF99AA',
    100: '#FFF2F4',
  },
  secondary: {
    700: '#9BC200',
    500: '#AFDB00',
    400: '#D3E58A',
    100: '#F2FAD2',
  },
  white: {
    transparent: {
      72: 'rgba(255, 255, 255, 0.72)',
      48: 'rgba(255, 255, 255, 0.48)',
    },
  },
  yellow: {
    700: '#E0B700',
    500: '#F5CC00',
    300: '#FFEB85',
    100: '#FFFBE5',
  },
};

const theme = {
  colors,
  buttons: {
    standard: {
      backgroundColor: 'white',
      border: '1px solid',
      borderColor: colors.black[300],
      borderRadius: '100px',
      color: colors.black[600],

      '&:hover': {
        borderColor: colors.primary[300],
        color: colors.primary[400],
      },

      '&:active': {
        backgroundColor: colors.primary[500],
        borderColor: colors.primary[500],
        color: 'white',
      },

      '&:disabled': {
        backgroundColor: colors.black[50],
        borderColor: colors.black[200],
        color: colors.black[300],
      },
    },

    primary: {
      backgroundColor: colors.primary[500],
      borderRadius: '100px',
      color: 'white',

      '&:hover': {
        backgroundColor: colors.primary[400],
        color: 'white',
      },

      '&:active': {
        backgroundColor: colors.primary[700],
        color: 'white',
      },

      '&:disabled': {
        backgroundColor: colors.primary[200],
      },
    },
  },
};

export default theme;<commit_msg>feat(constants/theme): add fontSizes, space, buttonSizes values<commit_after>import { variant } from 'styled-system';

const colors = {
  black: {
    900: '#141414',
    800: '#313233',
    700: '#4E5052',
    600: '#76777A',
    500: '#9D9FA3',
    400: '#C4C7CC',
    300: '#DCDEE0',
    200: '#E8E9EB',
    100: '#F2F3F5',
    50:  '#F7F8FA',
    transparent: {
      88: 'rgba(19, 20, 20, 0.88)',
      40: 'rgba(19, 20, 20, 0.4)',
      20: 'rgba(19, 20, 20, 0.2)',
      8: 'rgba(19, 20, 20, 0.08)',
    },
  },
  green: {
    700: '#00A34C',
    500: '#00B856',
    300: '#6CE0A2',
    100: '#E6FAEF',
  },
  primary: {
    700: '#145ECC',
    500: '#3385FF',
    400: '#66A3FF',
    300: '#99C9FF',
    200: '#DBECFF',
    100: '#EBF4FF',
    50: '#F2F8FF',
  },
  red: {
    700: '#CC1836',
    500: '#F53152',
    300: '#FF99AA',
    100: '#FFF2F4',
  },
  secondary: {
    700: '#9BC200',
    500: '#AFDB00',
    400: '#D3E58A',
    100: '#F2FAD2',
  },
  white: {
    transparent: {
      72: 'rgba(255, 255, 255, 0.72)',
      48: 'rgba(255, 255, 255, 0.48)',
    },
  },
  yellow: {
    700: '#E0B700',
    500: '#F5CC00',
    300: '#FFEB85',
    100: '#FFFBE5',
  },
};

const fontSizes = {
  H1: 56,
  H2: 40,
  H3: 32,
  H4: 24,
  H5: 20,
  H6: 9,
  LeadParagraph: 16,
  Paragraph: 14,
  Caption: 12,
  Tiny: 10,
};

// using default space values from styled-system
const space = [0, 4, 8, 16, 32, 64, 128, 256, 512];

const theme = {
  colors,
  fontSizes,
  space,
  buttons: {
    standard: {
      backgroundColor: 'white',
      border: '1px solid',
      borderColor: colors.black[300],
      borderRadius: '100px',
      color: colors.black[600],

      '&:hover': {
        borderColor: colors.primary[300],
        color: colors.primary[400],
      },

      '&:active': {
        backgroundColor: colors.primary[500],
        borderColor: colors.primary[500],
        color: 'white',
      },

      '&:disabled': {
        backgroundColor: colors.black[50],
        borderColor: colors.black[200],
        color: colors.black[300],
      },
    },

    primary: {
      backgroundColor: colors.primary[500],
      borderRadius: '100px',
      color: 'white',

      '&:hover': {
        backgroundColor: colors.primary[400],
        color: 'white',
      },

      '&:active': {
        backgroundColor: colors.primary[700],
        color: 'white',
      },

      '&:disabled': {
        backgroundColor: colors.primary[200],
      },
    },
  },
  buttonSizes: {
    large: {
      fontSize: toPx(fontSizes.LeadParagraph),
      paddingBottom: toPx(space[3]),
      paddingLeft: toPx(space[5]),
      paddingRight: toPx(space[5]),
      paddingTop: toPx(space[3]),
    },

    medium: {
      fontSize: toPx(fontSizes.Paragraph),
      paddingBottom: toPx(space[2]),
      paddingLeft: toPx(space[3]),
      paddingRight: toPx(space[3]),
      paddingTop: toPx(space[2]),
    },

    small: {
      fontSize: toPx(fontSizes.Caption),
      paddingBottom: toPx(space[1]),
      paddingLeft: toPx(space[2]),
      paddingRight: toPx(space[2]),
      paddingTop: toPx(space[1]),
    },
  },
};

export const buttonStyle = variant({
  key: 'buttons',
  prop: 'buttonStyle',
});

export const buttonSize = variant({
  key: 'buttonSizes',
  prop: 'buttonSize',
});

export default theme;

function toPx (value) {
  return value + 'px';
}
{'fraction_non_alphanumeric': 0.19163636363636363, 'fraction_numerical': 0.12236363636363637, 'mean_word_length': 2.2685680332739158, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3912438', 'n_tokens_mistral': 2538, 'n_tokens_neox': 2135, 'n_words': 435}