@axeptio/design-system/src/Presets/axeptio/index.ts

Design System for Axeptio

import { DefaultTheme } from 'styled-components';

export const palette = {
  primary: '#FFCE43',
  secondary: '#212121',
  red: '#E22F5A',
  green: '#14B8A6',
  orange: '#FFA843',
  white: '#FFFFFF',
  black: '#000000',
  taste: '#F25071',
  primaryPalette: {
    v50: '#FEF7E5',
    v100: '#F7ECCF',
    v200: '#FAE5A6',
    v400: '#DEA912',
    v500: '#CC9700'
  },
  grey: {
    v50: '#F9FBFF',
    v100: '#F4F6FB',
    v200: '#E9ECF1',
    v300: '#D1D4D8',
    v400: '#8A8E94',
    v500: '#52555A'
  },
  greenPalette: {
    v50: '#ECF9F7',
    v100: '#B6E2DD',
    v300: '#247A70'
  },
  redPalette: {
    v50: '#FEE6EC',
    v100: '#FAA8BB',
    v300: '#B21037'
  },
  orangePalette: {
    v50: '#FEF3E7',
    v100: '#FAD09E',
    v300: '#E9840C'
  },
  accent: {
    brownPalette: {
      v50: '#FFF0E5',
      v100: '#FAC6A1',
      v200: '#BE6323',
      v300: '#8A420F'
    },
    bluePalette: {
      v50: '#E6EEFF',
      v100: '#A5BFF1',
      v200: '#4576D9',
      v300: '#123988'
    },
    indianRedPalette: {
      v50: '#FBEAE9',
      v100: '#F9A6A2',
      v200: '#D25C56',
      v300: '#94332E'
    }
  }
};

export const boxShadows = {
  small: '0 12px 24px rgba(0 0 0 / 10%), 0 2px 6px rgba(0 0 0 / 5%), 0 1px 1px rgba(0 0 0 / 5%)',
  medium: '0 12px 24px rgba(0 0 0 / 5%), 0 2px 6px rgba(0 0 0 / 5%), 0 1px 1px rgba(0 0 0 / 5%)',
  large:
    '0 1.24px 1.68px rgba(0 0 0 / 2.17%), 0 3.13px 4.26px rgba(0 0 0 / 3.11%), 0 6.38px 8.68px rgba(0 0 0 / 3.89%), 0 13.14px 17.89px rgba(0 0 0 / 4.83%), 0 36px 49px rgba(0 0 0 / 7%)',
  float:
    '0 2.8px 2.2px rgba(0 0 0 / 2%), 0 6.7px 5.3px rgba(0 0 0 / 2.8%), 0 12.5px 10px rgba(0 0 0 / 3.5%), 0 22.3px 17.9px rgba(0 0 0 / 4.2%), 0 41.8px 33.4px rgba(0 0 0 / 5%), 0 100px 80px rgba(0 0 0 / 7%)'
};

const index: DefaultTheme = {
  breakpoints: {
    small: 576,
    medium: 768,
    large: 992,
    xlarge: 1200,
    xxlarge: 1400,
    xxxlarge: 1600
  },
  container: {
    small: 526,
    medium: 728,
    large: 960,
    xlarge: 1140,
    xxlarge: 1320,
    xxxlarge: 1520
  },
  fontSizes: {
    h1: 'clamp(40px, 6vw, 82px)',
    h2: 'clamp(36px, 5vw, 54px)',
    h3: 'clamp(32px, 4vw, 42px)',
    h4: 'clamp(28px, 3.25vw, 38px)',
    h5: 'clamp(22px, 3.25vw, 32px)',
    h6: 'clamp(20px, 2.75vw, 24px)',
    paragraph: 'clamp(18px, 2.25vw, 20px)',
    small: 'clamp(16px, 2vw, 18px)'
  },
  fonts: {
    title: '"Source Serif 4", serif',
    text: '"Source Sans Pro", sans-serif'
  },
  spaces: {
    widget: ['120px', '120px', '200px', '200px', '200px', '200px']
  },
  spacings: {
    sectionPaddingMobile: 100,
    sectionPaddingDesktop: 140,
    xxlarge: 140
  },
  colors: {
    ...palette
  },
  boxShadows: {
    ...boxShadows
  },
  transitions: {
    smooth: 'all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715)',
    widget: 'all 0.8s cubic-bezier(0.87, 0, 0.13, 1)'
  },
  buttons: {
    primary: {
      color: palette.secondary,
      colorHover: palette.primary,
      borderRadius: '1000px'
    }
  },
  checkboxes: {
    default: {
      bgColorChecked: '#212121'
    }
  },
  badges: {
    small: {
      fontSize: '16px'
    },
    large: {
      fontSize: '22px'
    },
    default: {
      fontSize: '18px',
      color: palette.secondary,
      bgColor: palette.grey.v100,
      borderRadius: '8px',
      border: 'none',
      minWidth: 'none',
      boxShadow: 'none'
    },
    certified: {
      color: palette.secondary,
      bgColor: palette.primaryPalette.v100
    },
    tasty: {
      color: palette.secondary,
      bgColor: palette.accent.bluePalette.v50
    },
    healthy: {
      color: palette.secondary,
      bgColor: palette.greenPalette.v50
    },
    oily: {
      color: palette.secondary,
      bgColor: palette.accent.brownPalette.v50
    },
    junkfood: {
      color: palette.secondary,
      bgColor: palette.accent.indianRedPalette.v50
    }
  },
  client: {}
};

export default index;