@cashub/ui-elv 1.0.1 → 1.0.3

package/esm/styles/config/sidebar.style.js

@@ -0,0 +1,11 @@
+const sidebarStyle = {
+  close: {
+    width: '72px',
+    height: '100%'
+  },
+  open: {
+    width: '316px',
+    height: '100%'
+  }
+};
+export default sidebarStyle;

package/esm/styles/index.js

@@ -0,0 +1,2 @@
+export { default as GlobalStyle } from './GlobalStyle';
+export { default as themes } from './themes';

package/esm/styles/mixin/backgroundColor.js

@@ -0,0 +1,38 @@
+import { css } from 'styled-components';
+const backgroundColor = css`
+  ${_ref => {
+  let {
+    primary
+  } = _ref;
+  return primary && 'background-color: var(--color-primary);';
+}}
+
+  ${_ref2 => {
+  let {
+    success
+  } = _ref2;
+  return success && 'background-color: var(--color-success);';
+}}
+
+  ${_ref3 => {
+  let {
+    warning
+  } = _ref3;
+  return warning && 'background-color: var(--color-warning);';
+}}
+
+  ${_ref4 => {
+  let {
+    danger
+  } = _ref4;
+  return danger && 'background-color: var(--color-danger);';
+}}
+
+  ${_ref5 => {
+  let {
+    grey
+  } = _ref5;
+  return grey && 'background-color: var(--color-grey);';
+}}
+`;
+export default backgroundColor;

package/esm/styles/mixin/borderColor.js

@@ -0,0 +1,31 @@
+import { css } from 'styled-components';
+const borderColor = css`
+  ${_ref => {
+  let {
+    primary
+  } = _ref;
+  return primary && 'border-color: var(--color-primary);';
+}}
+
+  ${_ref2 => {
+  let {
+    success
+  } = _ref2;
+  return success && 'border-color: var(--color-success);';
+}}
+
+  ${_ref3 => {
+  let {
+    warning
+  } = _ref3;
+  return warning && 'border-color: var(--color-warning);';
+}}
+
+  ${_ref4 => {
+  let {
+    danger
+  } = _ref4;
+  return danger && 'border-color: var(--color-danger);';
+}}
+`;
+export default borderColor;

package/esm/styles/mixin/color.js

@@ -0,0 +1,31 @@
+import { css } from 'styled-components';
+const color = css`
+  ${_ref => {
+  let {
+    primary
+  } = _ref;
+  return primary && 'color: var(--color-primary);';
+}}
+
+  ${_ref2 => {
+  let {
+    success
+  } = _ref2;
+  return success && 'color: var(--color-success);';
+}}
+
+  ${_ref3 => {
+  let {
+    warning
+  } = _ref3;
+  return warning && 'color: var(--color-warning);';
+}}
+
+  ${_ref4 => {
+  let {
+    danger
+  } = _ref4;
+  return danger && 'color: var(--color-danger);';
+}}
+`;
+export default color;

package/esm/styles/mixin/colorOnBackground.js

@@ -0,0 +1,31 @@
+import { css } from 'styled-components';
+const colorOnBackground = css`
+  ${_ref => {
+  let {
+    primary
+  } = _ref;
+  return primary && 'color: var(--font-on-primary);';
+}}
+
+  ${_ref2 => {
+  let {
+    success
+  } = _ref2;
+  return success && 'color: var(--font-on-success);';
+}}
+
+  ${_ref3 => {
+  let {
+    warning
+  } = _ref3;
+  return warning && 'color: var(--font-on-warning);';
+}}
+
+  ${_ref4 => {
+  let {
+    danger
+  } = _ref4;
+  return danger && 'color: var(--font-on-danger);';
+}}
+`;
+export default colorOnBackground;

package/esm/styles/mixin/inputPlaceholder.js

@@ -0,0 +1,24 @@
+import { css } from 'styled-components';
+const inputPlaceholder = function () {
+  return css`
+    ::placeholder {
+      ${css(...arguments)}
+    }
+
+    ::-moz-placeholder {
+      ${css(...arguments)}
+      opacity: 1;
+    }
+
+    // Internet Explorer 10+
+    :-ms-input-placeholder {
+      ${css(...arguments)}
+    }
+
+    // Safari and Chrome
+    ::-webkit-input-placeholder {
+      ${css(...arguments)}
+    }
+  `;
+};
+export default inputPlaceholder;

package/esm/styles/mixin/media.js

@@ -0,0 +1,15 @@
+import { css } from 'styled-components';
+import breakpoints from '../config/breakpoint.style';
+
+// Iterate through the breakpoint and create a media template
+const media = Object.keys(breakpoints).reduce((func, label) => {
+  func[label] = function () {
+    return css`
+    @media (max-width: ${breakpoints[label]}px) {
+      ${css(...arguments)}
+    }
+  `;
+  };
+  return func;
+}, {});
+export default media;

package/esm/styles/mixin/rounded.js

@@ -0,0 +1,24 @@
+import { css } from 'styled-components';
+const rounded = css`
+  ${_ref => {
+  let {
+    roundedS
+  } = _ref;
+  return roundedS && 'border-radius: var(--border-radius-s);';
+}}
+
+  ${_ref2 => {
+  let {
+    rounded
+  } = _ref2;
+  return rounded && 'border-radius: var(--border-radius);';
+}}
+
+  ${_ref3 => {
+  let {
+    roundedCircle
+  } = _ref3;
+  return roundedCircle && 'border-radius: var(--border-radius-round);';
+}}
+`;
+export default rounded;

package/esm/styles/mixin/scrollbar.js

@@ -0,0 +1,26 @@
+import { css } from 'styled-components';
+const scrollbar = _ref => {
+  let {
+    size
+  } = _ref;
+  let scrollbarWidth = '12px';
+  let thumbWidth = '4px';
+  if (size === 'large') {
+    scrollbarWidth = '24px';
+    thumbWidth = '8px';
+  }
+  return css`
+    &::-webkit-scrollbar {
+      width: ${scrollbarWidth};
+      height: ${scrollbarWidth};
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--color-scroll-bar);
+      background-clip: padding-box;
+      border: ${thumbWidth} solid transparent;
+      border-radius: var(--border-radius);
+    }
+  `;
+};
+export default scrollbar;

package/esm/styles/theme/dark.theme.js

@@ -0,0 +1,91 @@
+// Currently, some style is all same for all viewport size
+// Common color style
+const colorStyle = {
+  colorWhite: '#ffffff',
+  colorDark: '#000000',
+  colorGrey: '#5b5f6f',
+  colorPrimary: '#597EF7',
+  colorSuccess: '#11D8CD',
+  colorWarning: '#FFCA7A',
+  colorDanger: '#F495A1',
+  colorHover: 'rgba(89, 126, 247, 0.2)',
+  colorActive: 'rgba(89, 126, 247, 0.2)',
+  scrollBarColor: 'rgba(89, 126, 247, 0.3)',
+  bgColor1: '#13142e',
+  bgColor2: '#222143',
+  bgColor3: '#2d2a5d',
+  backdropBg: 'rgba(0, 0, 0, 0.75)'
+};
+
+// Common font style
+const fontStyle = {
+  fontH1: '2.25rem',
+  fontH2: '1.5rem',
+  fontH3: '1.25rem',
+  fontBody1: '1rem',
+  fontBody2: '0.875rem',
+  fontButton: '0.875rem',
+  fontCaption: '0.75rem',
+  fontFamily: 'Helvetica',
+  fontWeightNormal: '400',
+  fontWeightBold: 'bold',
+  fontOnPrimary: colorStyle.colorWhite,
+  fontOnSuccess: colorStyle.colorWhite,
+  fontOnWarning: colorStyle.colorWhite,
+  fontOnDanger: colorStyle.colorWhite,
+  fontOnBg: colorStyle.colorWhite,
+  fontMutedColor: 'rgba(255, 255, 255, 0.5)'
+};
+
+// Theme stylesheet
+const darkTheme = {
+  desktop: {
+    ...fontStyle,
+    ...colorStyle,
+    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
+    borderColor: colorStyle.colorGrey,
+    borderColorTransparent: `${colorStyle.colorGrey}80`,
+    borderWidth: '1px',
+    borderRadiusS: '0.5rem',
+    borderRadius: '1rem',
+    borderRadiusL: '2rem',
+    borderRadiusRound: '50%',
+    spacerXS: '0.5rem',
+    spacerS: '1rem',
+    spacer: '1.5rem',
+    spacerL: '2rem'
+  },
+  tablet: {
+    ...fontStyle,
+    ...colorStyle,
+    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
+    borderColor: colorStyle.colorGrey,
+    borderColorTransparent: `${colorStyle.colorGrey}80`,
+    borderWidth: '1px',
+    borderRadiusS: '0.5rem',
+    borderRadius: '1rem',
+    borderRadiusL: '2rem',
+    borderRadiusRound: '50%',
+    spacerXS: '0.5rem',
+    spacerS: '0.75rem',
+    spacer: '1rem',
+    spacerL: '1.25rem'
+  },
+  mobile: {
+    ...fontStyle,
+    ...colorStyle,
+    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
+    borderColor: colorStyle.colorGrey,
+    borderColorTransparent: `${colorStyle.colorGrey}80`,
+    borderWidth: '1px',
+    borderRadiusS: '0.5rem',
+    borderRadius: '1rem',
+    borderRadiusL: '2rem',
+    borderRadiusRound: '50%',
+    spacerXS: '0.5rem',
+    spacerS: '0.75rem',
+    spacer: '1rem',
+    spacerL: '1.25rem'
+  }
+};
+export default darkTheme;

package/esm/styles/theme/light.theme.js

@@ -0,0 +1,91 @@
+// Currently, some style is all same for all viewport size
+// Common color style
+const colorStyle = {
+  colorWhite: '#ffffff',
+  colorDark: '#353351',
+  colorGrey: '#989cad',
+  colorPrimary: '#3661ec',
+  colorSuccess: '#48d5cc',
+  colorWarning: '#feb444',
+  colorDanger: '#F495A1',
+  colorHover: 'rgba(54, 97, 236, 0.2)',
+  colorActive: 'rgba(54, 97, 236, 0.2)',
+  scrollBarColor: 'rgba(54, 97, 236, 0.3)',
+  bgColor1: '#F0ECFF',
+  bgColor2: '#F8F4FF',
+  bgColor3: '#E6E1FF',
+  backdropBg: 'rgba(0, 0, 0, 0.75)'
+};
+
+// Common font style
+const fontStyle = {
+  fontH1: '2.25rem',
+  fontH2: '1.5rem',
+  fontH3: '1.25rem',
+  fontBody1: '1rem',
+  fontBody2: '0.875rem',
+  fontButton: '0.875rem',
+  fontCaption: '0.75rem',
+  fontFamily: 'Helvetica',
+  fontWeightNormal: '400',
+  fontWeightBold: 'bold',
+  fontOnPrimary: colorStyle.bgColor2,
+  fontOnSuccess: colorStyle.colorDark,
+  fontOnWarning: colorStyle.colorDark,
+  fontOnDanger: colorStyle.colorDark,
+  fontOnBg: colorStyle.colorDark,
+  fontMutedColor: 'rgba(53, 51, 81, 0.6)'
+};
+
+// Theme stylesheet
+const lightTheme = {
+  desktop: {
+    ...fontStyle,
+    ...colorStyle,
+    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
+    borderColor: colorStyle.colorGrey,
+    borderColorTransparent: `${colorStyle.colorGrey}80`,
+    borderWidth: '1px',
+    borderRadiusS: '0.5rem',
+    borderRadius: '1rem',
+    borderRadiusL: '2rem',
+    borderRadiusRound: '50%',
+    spacerXS: '0.5rem',
+    spacerS: '1rem',
+    spacer: '1.5rem',
+    spacerL: '2rem'
+  },
+  tablet: {
+    ...fontStyle,
+    ...colorStyle,
+    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
+    borderColor: colorStyle.colorGrey,
+    borderColorTransparent: `${colorStyle.colorGrey}80`,
+    borderWidth: '1px',
+    borderRadiusS: '0.5rem',
+    borderRadius: '1rem',
+    borderRadiusL: '2rem',
+    borderRadiusRound: '50%',
+    spacerXS: '0.5rem',
+    spacerS: '0.75rem',
+    spacer: '1rem',
+    spacerL: '1.25rem'
+  },
+  mobile: {
+    ...fontStyle,
+    ...colorStyle,
+    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
+    borderColor: colorStyle.colorGrey,
+    borderColorTransparent: `${colorStyle.colorGrey}80`,
+    borderWidth: '1px',
+    borderRadiusS: '0.5rem',
+    borderRadius: '1rem',
+    borderRadiusL: '2rem',
+    borderRadiusRound: '50%',
+    spacerXS: '0.5rem',
+    spacerS: '0.75rem',
+    spacer: '1rem',
+    spacerL: '1.25rem'
+  }
+};
+export default lightTheme;

package/esm/styles/theme/white.theme.js

@@ -0,0 +1,91 @@
+// Currently, some style is all same for all viewport size
+// Common color style
+const colorStyle = {
+  colorWhite: '#ffffff',
+  colorDark: '#353351',
+  colorGrey: '#b7bbcd',
+  colorPrimary: '#345FEB',
+  colorSuccess: '#11D8CD',
+  colorWarning: '#feb444',
+  colorDanger: '#F495A1',
+  colorHover: 'rgba(52, 95, 235, 0.2)',
+  colorActive: 'rgba(52, 95, 235, 0.2)',
+  scrollBarColor: 'rgba(52, 95, 235, 0.3)',
+  bgColor1: '#EEEEEE',
+  bgColor2: '#F7F7F7',
+  bgColor3: '#FFFFFF',
+  backdropBg: 'rgba(0, 0, 0, 0.75)'
+};
+
+// Common font style
+const fontStyle = {
+  fontH1: '2.25rem',
+  fontH2: '1.5rem',
+  fontH3: '1.25rem',
+  fontBody1: '1rem',
+  fontBody2: '0.875rem',
+  fontButton: '0.875rem',
+  fontCaption: '0.75rem',
+  fontFamily: 'Helvetica',
+  fontWeightNormal: '400',
+  fontWeightBold: 'bold',
+  fontOnPrimary: colorStyle.bgColor2,
+  fontOnSuccess: colorStyle.colorDark,
+  fontOnWarning: colorStyle.colorDark,
+  fontOnDanger: colorStyle.colorDark,
+  fontOnBg: colorStyle.colorDark,
+  fontMutedColor: 'rgba(53, 51, 81, 0.6)'
+};
+
+// Theme stylesheet
+const whiteTheme = {
+  desktop: {
+    ...fontStyle,
+    ...colorStyle,
+    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
+    borderColor: colorStyle.colorGrey,
+    borderColorTransparent: `${colorStyle.colorGrey}80`,
+    borderWidth: '1px',
+    borderRadiusS: '0.5rem',
+    borderRadius: '1rem',
+    borderRadiusL: '2rem',
+    borderRadiusRound: '50%',
+    spacerXS: '0.5rem',
+    spacerS: '1rem',
+    spacer: '1.5rem',
+    spacerL: '2rem'
+  },
+  tablet: {
+    ...fontStyle,
+    ...colorStyle,
+    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
+    borderColor: colorStyle.colorGrey,
+    borderColorTransparent: `${colorStyle.colorGrey}80`,
+    borderWidth: '1px',
+    borderRadiusS: '0.5rem',
+    borderRadius: '1rem',
+    borderRadiusL: '2rem',
+    borderRadiusRound: '50%',
+    spacerXS: '0.5rem',
+    spacerS: '0.75rem',
+    spacer: '1rem',
+    spacerL: '1.25rem'
+  },
+  mobile: {
+    ...fontStyle,
+    ...colorStyle,
+    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
+    borderColor: colorStyle.colorGrey,
+    borderColorTransparent: `${colorStyle.colorGrey}80`,
+    borderWidth: '1px',
+    borderRadiusS: '0.5rem',
+    borderRadius: '1rem',
+    borderRadiusL: '2rem',
+    borderRadiusRound: '50%',
+    spacerXS: '0.5rem',
+    spacerS: '0.75rem',
+    spacer: '1rem',
+    spacerL: '1.25rem'
+  }
+};
+export default whiteTheme;

package/esm/styles/themes.js

@@ -0,0 +1,9 @@
+import whiteTheme from './theme/white.theme';
+import lightTheme from './theme/light.theme';
+import darkTheme from './theme/dark.theme';
+const themes = {
+  White: whiteTheme,
+  Light: lightTheme,
+  Dark: darkTheme
+};
+export default themes;