@cashub/ui 0.49.0-beta.14 → 0.49.0-beta.16

package/iconbox/IconBox.js

@@ -211,7 +211,7 @@ const AccentGlassLayer = _styledComponents.default.div`
   } = _ref4;
   if (mode === 'gradient') {
     return `
-        background: linear-gradient(22deg, var(--color-background2) 0%, var(--color-background2) 40%, ${gradientEnd} 100%);
+        background: linear-gradient(22deg, var(--color-card-gradient-base) 0%, var(--color-card-gradient-base) 40%, ${gradientEnd} 100%);
         border: 2px solid ${borderColor};
       `;
   }

package/layout/Layout.jsx

@@ -6,6 +6,7 @@ import Container from './Container';
 import Footer from './Footer';
 import Sidebar from './Sidebar';
 import Backdrop from './Backdrop';
+import bgMainRegistry from './bgMainRegistry';
 
 const Layout = ({
   mode,
@@ -68,6 +69,18 @@ const Main = styled.div`
   display: flex;
   flex: 1;
   position: relative;
+  ${({ theme }) => {
+    if (theme?.hideAsideDecoration) return '';
+    const bgKey = theme?.bgMainKey || 'default';
+    const bgImage = bgMainRegistry[bgKey];
+    return `
+      background: url(${bgImage});
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center;
+      background-attachment: fixed;
+    `;
+  }}
 `;
 
 export default Layout;

package/package.json

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

package/select/Select.js

@@ -768,7 +768,7 @@ const Combobox = _styledComponents.default.div`
     fillReverse
   } = _ref14;
   return fillReverse && `
-      background: var(--color-background1);
+      background: var(--color-select-reverse);
       border-color: transparent;
     `;
 }}

package/styles/GlobalStyle.js

@@ -123,178 +123,196 @@ const GlobalStyle = (0, _styledComponents.createGlobalStyle)`
   } = _ref19;
   return theme.bgColor4;
 }};
-    --color-backdrop: ${_ref20 => {
+    --color-card-gradient-base: ${_ref20 => {
   let {
     theme
   } = _ref20;
-  return theme.backdropBg;
+  return theme.colorCardGradientBase || theme.bgColor2;
 }};
-    --font-h1: ${_ref21 => {
+    --color-select-reverse: ${_ref21 => {
   let {
     theme
   } = _ref21;
-  return theme.fontH1;
+  return theme.colorSelectReverse || theme.bgColor1;
 }};
-    --font-h2: ${_ref22 => {
+    --color-glass-bg: ${_ref22 => {
   let {
     theme
   } = _ref22;
-  return theme.fontH2;
+  return theme.colorGlassBg || 'rgba(255, 255, 255, 0.06)';
 }};
-    --font-h3: ${_ref23 => {
+    --color-backdrop: ${_ref23 => {
   let {
     theme
   } = _ref23;
-  return theme.fontH3;
+  return theme.backdropBg;
 }};
-    --font-body1: ${_ref24 => {
+    --font-h1: ${_ref24 => {
   let {
     theme
   } = _ref24;
-  return theme.fontBody1;
+  return theme.fontH1;
 }};
-    --font-body2: ${_ref25 => {
+    --font-h2: ${_ref25 => {
   let {
     theme
   } = _ref25;
-  return theme.fontBody2;
+  return theme.fontH2;
 }};
-    --font-button: ${_ref26 => {
+    --font-h3: ${_ref26 => {
   let {
     theme
   } = _ref26;
-  return theme.fontButton;
+  return theme.fontH3;
 }};
-    --font-caption: ${_ref27 => {
+    --font-body1: ${_ref27 => {
   let {
     theme
   } = _ref27;
-  return theme.fontCaption;
+  return theme.fontBody1;
 }};
-    --font-family: ${_ref28 => {
+    --font-body2: ${_ref28 => {
   let {
     theme
   } = _ref28;
-  return theme.fontFamily;
+  return theme.fontBody2;
 }};
-    --font-normal: ${_ref29 => {
+    --font-button: ${_ref29 => {
   let {
     theme
   } = _ref29;
-  return theme.fontWeightNormal;
+  return theme.fontButton;
 }};
-    --font-bold: ${_ref30 => {
+    --font-caption: ${_ref30 => {
   let {
     theme
   } = _ref30;
-  return theme.fontWeightBold;
+  return theme.fontCaption;
 }};
-    --font-on-primary: ${_ref31 => {
+    --font-family: ${_ref31 => {
   let {
     theme
   } = _ref31;
-  return theme.fontOnPrimary;
+  return theme.fontFamily;
 }};
-    --font-on-success: ${_ref32 => {
+    --font-normal: ${_ref32 => {
   let {
     theme
   } = _ref32;
-  return theme.fontOnSuccess;
+  return theme.fontWeightNormal;
 }};
-    --font-on-warning: ${_ref33 => {
+    --font-bold: ${_ref33 => {
   let {
     theme
   } = _ref33;
-  return theme.fontOnWarning;
+  return theme.fontWeightBold;
 }};
-    --font-on-danger: ${_ref34 => {
+    --font-on-primary: ${_ref34 => {
   let {
     theme
   } = _ref34;
-  return theme.fontOnDanger;
+  return theme.fontOnPrimary;
 }};
-    --font-on-background: ${_ref35 => {
+    --font-on-success: ${_ref35 => {
   let {
     theme
   } = _ref35;
-  return theme.fontOnBg;
+  return theme.fontOnSuccess;
 }};
-    --font-on-mute: ${_ref36 => {
+    --font-on-warning: ${_ref36 => {
   let {
     theme
   } = _ref36;
-  return theme.fontMutedColor;
+  return theme.fontOnWarning;
 }};
-    --box-shadow: ${_ref37 => {
+    --font-on-danger: ${_ref37 => {
   let {
     theme
   } = _ref37;
-  return theme.boxShadow;
+  return theme.fontOnDanger;
 }};
-    --border-color: ${_ref38 => {
+    --font-on-background: ${_ref38 => {
   let {
     theme
   } = _ref38;
-  return theme.borderColor;
+  return theme.fontOnBg;
 }};
-    --border-color-transparent: ${_ref39 => {
+    --font-on-mute: ${_ref39 => {
   let {
     theme
   } = _ref39;
-  return theme.borderColorTransparent;
+  return theme.fontMutedColor;
 }};
-    --border-width: ${_ref40 => {
+    --box-shadow: ${_ref40 => {
   let {
     theme
   } = _ref40;
-  return theme.borderWidth;
+  return theme.boxShadow;
 }};
-    --border-radius-s: ${_ref41 => {
+    --border-color: ${_ref41 => {
   let {
     theme
   } = _ref41;
-  return theme.borderRadiusS;
+  return theme.borderColor;
 }};
-    --border-radius: ${_ref42 => {
+    --border-color-transparent: ${_ref42 => {
   let {
     theme
   } = _ref42;
-  return theme.borderRadius;
+  return theme.borderColorTransparent;
 }};
-    --border-radius-l: ${_ref43 => {
+    --border-width: ${_ref43 => {
   let {
     theme
   } = _ref43;
-  return theme.borderRadiusL;
+  return theme.borderWidth;
 }};
-    --border-radius-round: ${_ref44 => {
+    --border-radius-s: ${_ref44 => {
   let {
     theme
   } = _ref44;
-  return theme.borderRadiusRound;
+  return theme.borderRadiusS;
 }};
-    --spacing-xs: ${_ref45 => {
+    --border-radius: ${_ref45 => {
   let {
     theme
   } = _ref45;
-  return theme.spacerXS;
+  return theme.borderRadius;
 }};
-    --spacing-s: ${_ref46 => {
+    --border-radius-l: ${_ref46 => {
   let {
     theme
   } = _ref46;
-  return theme.spacerS;
+  return theme.borderRadiusL;
 }};
-    --spacing: ${_ref47 => {
+    --border-radius-round: ${_ref47 => {
   let {
     theme
   } = _ref47;
-  return theme.spacer;
+  return theme.borderRadiusRound;
 }};
-    --spacing-l: ${_ref48 => {
+    --spacing-xs: ${_ref48 => {
   let {
     theme
   } = _ref48;
+  return theme.spacerXS;
+}};
+    --spacing-s: ${_ref49 => {
+  let {
+    theme
+  } = _ref49;
+  return theme.spacerS;
+}};
+    --spacing: ${_ref50 => {
+  let {
+    theme
+  } = _ref50;
+  return theme.spacer;
+}};
+    --spacing-l: ${_ref51 => {
+  let {
+    theme
+  } = _ref51;
   return theme.spacerL;
 }};
     /* Global style */

package/styles/theme/dark.theme.js

@@ -22,6 +22,9 @@ const colorStyle = {
   bgColor3: '#2d2a5d',
   bgColor4: '#222143',
   backdropBg: 'rgba(0, 0, 0, 0.75)',
+  colorSelectReverse: '#222143',
+  colorGlassBg: 'rgba(6, 12, 35, 0.6)',
+  colorCardGradientBase: '#141B30',
   cardMode: 'gradient',
   bgMainKey: 'dark',
   bgMarkerKey: 'dark',

package/styles/theme/ember.theme.js

@@ -20,12 +20,15 @@ const colorStyle = {
   bgColor3: '#F3E9E9',
   bgColor4: 'linear-gradient(90deg, #E62B27 0%, #D9211E 45%, #C60E27 100%)',
   backdropBg: 'rgba(0, 0, 0, 0.75)',
+  colorSelectReverse: '#FEFEFE',
+  colorGlassBg: 'rgba(255, 255, 255, 0.06)',
   useModernIcons: true,
   useModernCardIcons: true,
   useLightBrand: true,
   cardMode: 'accent',
   bgMainKey: 'default',
   bgMarkerKey: 'ember',
+  hideAsideDecoration: true,
   colorHoverSidebar: 'rgba(255, 255, 255, 0.15)',
   colorActiveSidebar: 'rgba(255, 255, 255, 0.22)',
   colorTextSidebar: '#FFFFFF',

package/styles/theme/white.theme.js

@@ -22,6 +22,8 @@ const colorStyle = {
   bgColor3: '#FFFFFF',
   bgColor4: '#F7F7F7',
   backdropBg: 'rgba(0, 0, 0, 0.75)',
+  colorSelectReverse: '#F7F7F9',
+  colorGlassBg: 'rgba(255, 255, 255, 0.06)',
   cardMode: 'accent',
   bgMainKey: 'white',
   bgMarkerKey: 'white',