@cashub/ui-elv 1.0.0

package/styles/GlobalStyle.js

@@ -0,0 +1,334 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = require("styled-components");
+require("normalize.css");
+require("../assets/css/global.css");
+const GlobalStyle = (0, _styledComponents.createGlobalStyle)`
+  body {
+    --color-white: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.colorWhite;
+}};
+    --color-dark: ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.colorDark;
+}};
+    --color-grey: ${_ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.colorGrey;
+}};
+    --color-primary: ${_ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.colorPrimary;
+}};
+    --color-success: ${_ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.colorSuccess;
+}};
+    --color-warning: ${_ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.colorWarning;
+}};
+    --color-danger: ${_ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.colorDanger;
+}};
+    --color-hover: ${_ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.colorHover;
+}};
+    --color-active: ${_ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.colorActive;
+}};
+    --color-scroll-bar: ${_ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.scrollBarColor;
+}};
+    --color-background1: ${_ref11 => {
+  let {
+    theme
+  } = _ref11;
+  return theme.bgColor1;
+}};
+    --color-background2: ${_ref12 => {
+  let {
+    theme
+  } = _ref12;
+  return theme.bgColor2;
+}};
+    --color-background3: ${_ref13 => {
+  let {
+    theme
+  } = _ref13;
+  return theme.bgColor3;
+}};
+    --color-backdrop: ${_ref14 => {
+  let {
+    theme
+  } = _ref14;
+  return theme.backdropBg;
+}};
+
+    --font-h1: ${_ref15 => {
+  let {
+    theme
+  } = _ref15;
+  return theme.fontH1;
+}};
+    --font-h2: ${_ref16 => {
+  let {
+    theme
+  } = _ref16;
+  return theme.fontH2;
+}};
+    --font-h3: ${_ref17 => {
+  let {
+    theme
+  } = _ref17;
+  return theme.fontH3;
+}};
+    --font-body1: ${_ref18 => {
+  let {
+    theme
+  } = _ref18;
+  return theme.fontBody1;
+}};
+    --font-body2: ${_ref19 => {
+  let {
+    theme
+  } = _ref19;
+  return theme.fontBody2;
+}};
+    --font-button: ${_ref20 => {
+  let {
+    theme
+  } = _ref20;
+  return theme.fontButton;
+}};
+    --font-caption: ${_ref21 => {
+  let {
+    theme
+  } = _ref21;
+  return theme.fontCaption;
+}};
+    --font-family: ${_ref22 => {
+  let {
+    theme
+  } = _ref22;
+  return theme.fontFamily;
+}};
+    --font-normal: ${_ref23 => {
+  let {
+    theme
+  } = _ref23;
+  return theme.fontWeightNormal;
+}};
+    --font-bold: ${_ref24 => {
+  let {
+    theme
+  } = _ref24;
+  return theme.fontWeightBold;
+}};
+    --font-on-primary: ${_ref25 => {
+  let {
+    theme
+  } = _ref25;
+  return theme.fontOnPrimary;
+}};
+    --font-on-success: ${_ref26 => {
+  let {
+    theme
+  } = _ref26;
+  return theme.fontOnSuccess;
+}};
+    --font-on-warning: ${_ref27 => {
+  let {
+    theme
+  } = _ref27;
+  return theme.fontOnWarning;
+}};
+    --font-on-danger: ${_ref28 => {
+  let {
+    theme
+  } = _ref28;
+  return theme.fontOnDanger;
+}};
+    --font-on-background: ${_ref29 => {
+  let {
+    theme
+  } = _ref29;
+  return theme.fontOnBg;
+}};
+    --font-on-mute: ${_ref30 => {
+  let {
+    theme
+  } = _ref30;
+  return theme.fontMutedColor;
+}};
+
+    --box-shadow: ${_ref31 => {
+  let {
+    theme
+  } = _ref31;
+  return theme.boxShadow;
+}};
+    --border-color: ${_ref32 => {
+  let {
+    theme
+  } = _ref32;
+  return theme.borderColor;
+}};
+    --border-color-transparent: ${_ref33 => {
+  let {
+    theme
+  } = _ref33;
+  return theme.borderColorTransparent;
+}};
+    --border-width: ${_ref34 => {
+  let {
+    theme
+  } = _ref34;
+  return theme.borderWidth;
+}};
+    --border-radius-s: ${_ref35 => {
+  let {
+    theme
+  } = _ref35;
+  return theme.borderRadiusS;
+}};
+    --border-radius: ${_ref36 => {
+  let {
+    theme
+  } = _ref36;
+  return theme.borderRadius;
+}};
+    --border-radius-l: ${_ref37 => {
+  let {
+    theme
+  } = _ref37;
+  return theme.borderRadiusL;
+}};
+    --border-radius-round: ${_ref38 => {
+  let {
+    theme
+  } = _ref38;
+  return theme.borderRadiusRound;
+}};
+
+    --spacing-xs: ${_ref39 => {
+  let {
+    theme
+  } = _ref39;
+  return theme.spacerXS;
+}};
+    --spacing-s: ${_ref40 => {
+  let {
+    theme
+  } = _ref40;
+  return theme.spacerS;
+}};
+    --spacing: ${_ref41 => {
+  let {
+    theme
+  } = _ref41;
+  return theme.spacer;
+}};
+    --spacing-l: ${_ref42 => {
+  let {
+    theme
+  } = _ref42;
+  return theme.spacerL;
+}};
+
+    /* Global style */
+    font-size: 16px;
+    font-family: Helvetica;
+    overflow-x: hidden;
+    background: var(--color-background1);
+  }
+
+  /* Custom normalize */
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  html {
+    line-height: 1;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 0;
+  }
+  
+  a {
+    text-decoration: none;
+  }
+
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    line-height: 1;
+  }
+
+  ul {
+    padding: 0;
+    margin: 0;
+  }
+
+  li {
+    list-style: none;
+  }
+
+  figure {
+    margin: 0;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  dl,
+  dt,
+  dd {
+    margin: 0;
+  }
+
+  .margin-bottom-s {
+    margin-bottom: var(--spacing-s);
+  }
+`;
+var _default = exports.default = GlobalStyle;

package/styles/config/breakpoint.style.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const breakpoints = {
+  desktop: 1920,
+  laptop: 1200,
+  tablet: 768,
+  mobile: 576
+};
+var _default = exports.default = breakpoints;

package/styles/config/header.style.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const headerStyle = {
+  height: '64px'
+};
+var _default = exports.default = headerStyle;

package/styles/config/sidebar.style.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const sidebarStyle = {
+  close: {
+    width: '72px',
+    height: '100%'
+  },
+  open: {
+    width: '316px',
+    height: '100%'
+  }
+};
+var _default = exports.default = sidebarStyle;

package/styles/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "GlobalStyle", {
+  enumerable: true,
+  get: function () {
+    return _GlobalStyle.default;
+  }
+});
+Object.defineProperty(exports, "themes", {
+  enumerable: true,
+  get: function () {
+    return _themes.default;
+  }
+});
+var _GlobalStyle = _interopRequireDefault(require("./GlobalStyle"));
+var _themes = _interopRequireDefault(require("./themes"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/styles/mixin/backgroundColor.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = require("styled-components");
+const backgroundColor = (0, _styledComponents.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);';
+}}
+`;
+var _default = exports.default = backgroundColor;

package/styles/mixin/borderColor.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = require("styled-components");
+const borderColor = (0, _styledComponents.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);';
+}}
+`;
+var _default = exports.default = borderColor;

package/styles/mixin/color.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = require("styled-components");
+const color = (0, _styledComponents.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);';
+}}
+`;
+var _default = exports.default = color;

package/styles/mixin/colorOnBackground.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = require("styled-components");
+const colorOnBackground = (0, _styledComponents.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);';
+}}
+`;
+var _default = exports.default = colorOnBackground;

package/styles/mixin/inputPlaceholder.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = require("styled-components");
+const inputPlaceholder = function () {
+  return (0, _styledComponents.css)`
+    ::placeholder {
+      ${(0, _styledComponents.css)(...arguments)}
+    }
+
+    ::-moz-placeholder {
+      ${(0, _styledComponents.css)(...arguments)}
+      opacity: 1;
+    }
+
+    // Internet Explorer 10+
+    :-ms-input-placeholder {
+      ${(0, _styledComponents.css)(...arguments)}
+    }
+
+    // Safari and Chrome
+    ::-webkit-input-placeholder {
+      ${(0, _styledComponents.css)(...arguments)}
+    }
+  `;
+};
+var _default = exports.default = inputPlaceholder;

package/styles/mixin/media.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = require("styled-components");
+var _breakpoint = _interopRequireDefault(require("../config/breakpoint.style"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// Iterate through the breakpoint and create a media template
+const media = Object.keys(_breakpoint.default).reduce((func, label) => {
+  func[label] = function () {
+    return (0, _styledComponents.css)`
+    @media (max-width: ${_breakpoint.default[label]}px) {
+      ${(0, _styledComponents.css)(...arguments)}
+    }
+  `;
+  };
+  return func;
+}, {});
+var _default = exports.default = media;

package/styles/mixin/rounded.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = require("styled-components");
+const rounded = (0, _styledComponents.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);';
+}}
+`;
+var _default = exports.default = rounded;

package/styles/mixin/scrollbar.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = require("styled-components");
+const scrollbar = _ref => {
+  let {
+    size
+  } = _ref;
+  let scrollbarWidth = '12px';
+  let thumbWidth = '4px';
+  if (size === 'large') {
+    scrollbarWidth = '24px';
+    thumbWidth = '8px';
+  }
+  return (0, _styledComponents.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);
+    }
+  `;
+};
+var _default = exports.default = scrollbar;