@cashub/ui 0.49.0-beta.7 → 0.49.0-beta.8

package/iconbox/IconBox.js

@@ -8,7 +8,7 @@ var _react = require("react");
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _IconBoxFigure = _interopRequireDefault(require("./subComponent/IconBoxFigure"));
 var _IconBoxImage = _interopRequireDefault(require("./subComponent/IconBoxImage"));
-var _bgChartTriangle = _interopRequireDefault(require("../assets/images/bg-chart-triangle.png"));
+var _bgMarkerRegistry = _interopRequireDefault(require("../layout/bgMarkerRegistry"));
 var _bgImageRegistry = _interopRequireDefault(require("./bgImageRegistry"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -108,7 +108,8 @@ const Wrapper = _styledComponents.default.div`
   let {
     bgImage,
     gradientFrom,
-    gradientTo
+    gradientTo,
+    theme
   } = _ref2;
   if (bgImage || gradientFrom && gradientTo) {
     const gradient = gradientFrom && gradientTo ? `linear-gradient(135deg, ${gradientFrom}, ${gradientTo})` : 'var(--color-background2)';
@@ -120,9 +121,14 @@ const Wrapper = _styledComponents.default.div`
         background-size: cover;
       `;
   }
+  const markerKey = theme?.bgMarkerKey || 'ember';
+  const marker = _bgMarkerRegistry.default[markerKey] || _bgMarkerRegistry.default.ember;
   return `
-      background: var(--color-background2);
-      background-image: url(${_bgChartTriangle.default});
+      background-color: rgba(255, 255, 255, 0.06);
+      backdrop-filter: blur(20px);
+      -webkit-backdrop-filter: blur(20px);
+      border: 1px solid rgba(255, 255, 255, 0.15);
+      background-image: url(${marker.triangle});
       background-repeat: no-repeat;
       background-position: right bottom;
       background-size: 30% 70%;
@@ -143,6 +149,8 @@ const AccentWrapper = _styledComponents.default.div`
   padding: var(--spacing);
   border-radius: var(--border-radius);
   color: var(--font-on-background);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
   ${_ref3 => {
   let {
     mode,

package/layout/Aside.js

@@ -8,7 +8,7 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _header = _interopRequireDefault(require("../styles/config/header.style"));
 var _sidebar = _interopRequireDefault(require("../styles/config/sidebar.style"));
 var _media = _interopRequireDefault(require("../styles/mixin/media"));
-var _bgAside = _interopRequireDefault(require("../assets/images/bg-aside.png"));
+var _bgMainRegistry = _interopRequireDefault(require("./bgMainRegistry"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -28,11 +28,30 @@ const Aside = _styledComponents.default.aside`
   if (theme?.hideAsideDecoration) {
     return `background: var(--color-background4);`;
   }
+  const bgKey = theme?.bgMainKey || 'default';
+  const bgImage = _bgMainRegistry.default[bgKey];
   return `
-      background: url(${_bgAside.default}), var(--color-background4);
-      background-size: 356px 436px, auto;
-      background-repeat: no-repeat, no-repeat;
-      background-position: bottom, center;
+      background: url(${bgImage});
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center;
+      background-attachment: fixed;
+      overflow: hidden;
+      position: relative;
+      z-index: 1;
+
+      &::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        z-index: -1;
+
+        background: var(--color-background4);
+        opacity: 0.9;
+
+        backdrop-filter: blur(20px);
+        -webkit-backdrop-filter: blur(20px);
+      }
     `;
 }}
   --font-on-background: var(--color-text-sidebar);

package/layout/Layout.jsx

@@ -6,6 +6,7 @@ import Container from './Container';
 import Footer from './Footer';
 import Sidebar from './Sidebar';
 import Backdrop from './Backdrop';
+
 const Layout = ({
   mode,
   logo,
@@ -18,12 +19,12 @@ const Layout = ({
   const toggleSidebar = () => {
     setDisplay(!display);
   };
-  // hide sidebar
   useEffect(() => {
     if (mode === 'tablet') {
       setDisplay(false);
     }
   }, [mode, setDisplay]);
+
   return (
     <Wrapper>
       <Header
@@ -56,14 +57,17 @@ const Layout = ({
     </Wrapper>
   );
 };
+
 const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
   min-height: 100vh;
 `;
+
 const Main = styled.div`
   display: flex;
   flex: 1;
   position: relative;
 `;
+
 export default Layout;

package/layout/bgMarkerRegistry.jsx

@@ -0,0 +1,23 @@
+import bgMarkerCircleEmber from '../assets/images/bg-marker-circle-ember.png';
+import bgMarkerTriangleEmber from '../assets/images/bg-marker-triangle-ember.png';
+import bgMarkerCircleWhite from '../assets/images/bg-marker-circle-white.png';
+import bgMarkerTriangleWhite from '../assets/images/bg-marker-triangle-white.png';
+import bgMarkerCircleDark from '../assets/images/bg-marker-circle-dark.png';
+import bgMarkerTriangleDark from '../assets/images/bg-marker-triangle-dark.png';
+
+const bgMarkerRegistry = {
+  ember: {
+    circle: bgMarkerCircleEmber,
+    triangle: bgMarkerTriangleEmber,
+  },
+  white: {
+    circle: bgMarkerCircleWhite,
+    triangle: bgMarkerTriangleWhite,
+  },
+  dark: {
+    circle: bgMarkerCircleDark,
+    triangle: bgMarkerTriangleDark,
+  },
+};
+
+export default bgMarkerRegistry;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cashub/ui",
-  "version": "0.49.0-beta.7",
+  "version": "0.49.0-beta.8",
   "private": false,
   "author": "CasHUB Team",
   "description": "CasHUB UI components library",

package/section/Section.js

@@ -5,9 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _bgChartTriangle = _interopRequireDefault(require("../assets/images/bg-chart-triangle.png"));
-var _bgChartCircle = _interopRequireDefault(require("../assets/images/bg-chart-circle.png"));
-var _map = _interopRequireDefault(require("../assets/images/map.png"));
+var _bgMarkerRegistry = _interopRequireDefault(require("../layout/bgMarkerRegistry"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Section = _styledComponents.default.div`
   background: var(--color-background1);
@@ -15,109 +13,102 @@ const Section = _styledComponents.default.div`
   color: var(--font-on-background);
   padding: var(--spacing);
   margin-bottom: var(--spacing);
-
   ${_ref => {
   let {
     backgroundReverse
   } = _ref;
-  return backgroundReverse && 'background: var(--color-background2);';
+  return backgroundReverse && `
+      background-color: rgba(255, 255, 255, 0.06);
+      backdrop-filter: blur(20px);
+      -webkit-backdrop-filter: blur(20px);
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+    `;
 }}
-
   ${_ref2 => {
   let {
     paddingS
   } = _ref2;
   return paddingS && 'padding: var(--spacing-s);';
 }}
-
   ${_ref3 => {
   let {
     paddingXS
   } = _ref3;
   return paddingXS && 'padding: var(--spacing-xs);';
 }}
-
   ${_ref4 => {
   let {
     noPadding
   } = _ref4;
   return noPadding && 'padding: 0;';
 }}
-
   ${_ref5 => {
   let {
-    noPaddingX
+    noPadding,
+    backgroundReverse,
+    backgroundMarker,
+    backgroundMap
   } = _ref5;
-  return noPaddingX && 'padding-left: 0; padding-right: 0;';
+  return noPadding && !backgroundReverse && !backgroundMarker && !backgroundMap && 'background: transparent;';
 }}
-
   ${_ref6 => {
   let {
-    noPaddingTop
+    noPaddingX
   } = _ref6;
-  return noPaddingTop && 'padding-top: 0;';
+  return noPaddingX && 'padding-left: 0; padding-right: 0;';
 }}
-
   ${_ref7 => {
   let {
-    noPaddingBottom
+    noPaddingTop
   } = _ref7;
-  return noPaddingBottom && 'padding-bottom: 0;';
+  return noPaddingTop && 'padding-top: 0;';
 }}
-
   ${_ref8 => {
   let {
-    marginBottomS
+    noPaddingBottom
   } = _ref8;
-  return marginBottomS && 'margin-bottom: var(--spacing-s);';
+  return noPaddingBottom && 'padding-bottom: 0;';
 }}
-
   ${_ref9 => {
   let {
-    noMarginBottom
+    marginBottomS
   } = _ref9;
-  return noMarginBottom && 'margin-bottom: 0;';
+  return marginBottomS && 'margin-bottom: var(--spacing-s);';
 }}
-
   ${_ref10 => {
   let {
-    fullHeight
+    noMarginBottom
   } = _ref10;
-  return fullHeight && 'height: calc(100% - var(--spacing));';
+  return noMarginBottom && 'margin-bottom: 0;';
 }}
-
   ${_ref11 => {
   let {
-    backgroundMarker
+    fullHeight
   } = _ref11;
-  return backgroundMarker && `
-      background: var(--color-background2);
-      background-image: url(${_bgChartCircle.default}), url(${_bgChartTriangle.default});
-      background-repeat: no-repeat;
-      background-position: left top, right bottom;
-      background-size: 337px 312px, 166px 225px;
-    `;
+  return fullHeight && 'height: calc(100% - var(--spacing));';
 }}
-
   ${_ref12 => {
   let {
-    backgroundMap
+    backgroundMarker,
+    backgroundMap,
+    theme
   } = _ref12;
-  return backgroundMap && `
-      background: var(--color-background2);
-      background-image: url(${_map.default});
+  if (!backgroundMarker && !backgroundMap) return '';
+  const markerKey = theme?.bgMarkerKey || 'ember';
+  const marker = _bgMarkerRegistry.default[markerKey] || _bgMarkerRegistry.default.ember;
+  return `
+      background-image: url(${marker.circle}), url(${marker.triangle});
       background-repeat: no-repeat;
-      background-size: cover;
+      background-position: left top, right bottom;
+      background-size: 337px 312px, 166px 225px;
     `;
 }}
-
   ${_ref13 => {
   let {
     border
   } = _ref13;
   return border && 'border: var(--border-width) solid var(--border-color);';
 }}
-  
   ${_ref14 => {
   let {
     checkboxGroup

package/styles/theme/dark.theme.js

@@ -24,6 +24,7 @@ const colorStyle = {
   backdropBg: 'rgba(0, 0, 0, 0.75)',
   cardMode: 'gradient',
   bgMainKey: 'dark',
+  bgMarkerKey: 'dark',
   useModernCardIcons: true,
   useLightBrand: true,
   hideMainDecoration: false

package/styles/theme/ember.theme.js

@@ -25,6 +25,7 @@ const colorStyle = {
   useLightBrand: true,
   cardMode: 'accent',
   bgMainKey: 'vivid',
+  bgMarkerKey: 'ember',
   colorHoverSidebar: 'rgba(255, 255, 255, 0.15)',
   colorActiveSidebar: 'rgba(255, 255, 255, 0.22)',
   colorTextSidebar: '#FFFFFF',

package/styles/theme/white.theme.js

@@ -24,6 +24,7 @@ const colorStyle = {
   backdropBg: 'rgba(0, 0, 0, 0.75)',
   cardMode: 'accent',
   bgMainKey: 'white',
+  bgMarkerKey: 'white',
   useModernIcons: false,
   useLightBrand: false,
   hideMainDecoration: false