@music-loopy/loops/lib/themes/index.js

A React component library for Music Loopy Applications and websites

"use strict";

exports.__esModule = true;
exports.lightTheme = exports.darkTheme = void 0;
var _colors, _colors2;
var darkTheme = exports.darkTheme = {
  button: {
    size: {
      small: {
        width: '100px',
        padding: '8px 16px',
        fontSize: '12px'
      },
      medium: {
        width: '200px',
        padding: '12px 24px',
        fontSize: '14px'
      },
      large: {
        width: '300px',
        padding: '16px 32px',
        fontSize: '16px'
      }
    }
  },
  card: {
    size: {
      small: {
        maxWidth: '200px',
        headerFontSize: '14px',
        bodyFontSize: '12px'
      },
      medium: {
        maxWidth: '400px',
        headerFontSize: '18px',
        bodyFontSize: '16px'
      },
      large: {
        maxWidth: '600px',
        headerFontSize: '22px',
        bodyFontSize: '20px'
      }
    }
  },
  colors: (_colors = {
    light: {
      color: '#f5f5f5',
      text: '#333'
    },
    primary: {
      color: '#65D03D',
      text: '#1E2023'
    },
    secondary: {
      color: '#57585B',
      text: '#fff'
    },
    success: {
      color: '#32cd32',
      text: '#fff'
    },
    danger: {
      color: '#ff0000',
      text: '#fff'
    },
    warning: {
      color: '#ff8c00',
      text: '#fff'
    },
    info: {
      color: '#00bfff',
      text: '#fff'
    }
  }, _colors["light"] = {
    color: '#f5f5f5',
    text: '#333'
  }, _colors.dark = {
    color: '#1E2023',
    text: '#f5f5f5'
  }, _colors.darkGrey = {
    color: '#2D3134',
    text: '#fff'
  }, _colors)
};
var lightTheme = exports.lightTheme = {
  button: {
    size: {
      small: {
        width: '100px',
        padding: '8px 16px',
        fontSize: '12px'
      },
      medium: {
        width: '200px',
        padding: '12px 24px',
        fontSize: '14px'
      },
      large: {
        width: '300px',
        padding: '16px 32px',
        fontSize: '16px'
      }
    }
  },
  card: {
    size: {
      small: {
        maxWidth: '200px',
        headerFontSize: '14px',
        bodyFontSize: '12px'
      },
      medium: {
        maxWidth: '400px',
        headerFontSize: '18px',
        bodyFontSize: '16px'
      },
      large: {
        maxWidth: '600px',
        headerFontSize: '22px',
        bodyFontSize: '20px'
      }
    }
  },
  colors: (_colors2 = {
    light: {
      color: '#f5f5f5',
      text: '#333'
    },
    primary: {
      color: '#65D03D',
      text: '#1E2023'
    },
    secondary: {
      color: '#57585B',
      text: '#fff'
    },
    success: {
      color: '#32cd32',
      text: '#fff'
    },
    danger: {
      color: '#ff0000',
      text: '#fff'
    },
    warning: {
      color: '#ff8c00',
      text: '#fff'
    },
    info: {
      color: '#00bfff',
      text: '#fff'
    }
  }, _colors2["light"] = {
    color: '#f5f5f5',
    text: '#333'
  }, _colors2.dark = {
    color: '#1E2023',
    text: '#f5f5f5'
  }, _colors2)
};