@aurora-is-near/intents-swap-widget 3.19.1 → 3.21.0

package/src/theme/ThemeProvider.tsx

@@ -1,21 +1,31 @@
 import { createContext, type ReactNode, useEffect, useMemo } from 'react';
 
-import { ColorPalette, ColorScheme, HexColor, Theme } from '../types/theme';
+import {
+  ColorPalette,
+  ColorScheme,
+  HexColor,
+  Theme,
+  ThemeBorderRadius,
+} from '../types/theme';
 import { ColorStop, createColorPalette } from './createColorPalette';
 import { useConfig } from '@/config';
 
-const setColorVariable = (
-  key: string,
-  value: string,
-  parentEl: Element | null,
-) => {
+const setVariable = (key: string, value: string, parentEl: Element | null) => {
   let parentElement = document.body;
 
   if (parentEl instanceof HTMLElement) {
     parentElement = parentEl;
   }
 
-  parentElement.style.setProperty(`--c-sw-${key}`, value);
+  parentElement.style.setProperty(key, value);
+};
+
+const setColorVariable = (
+  key: string,
+  value: string,
+  parentEl: Element | null,
+) => {
+  setVariable(`--c-sw-${key}`, value, parentEl);
 };
 
 const setColorVariables = (
@@ -44,24 +54,54 @@ const setColorPalette = (
   setColorVariables(palette, colorKey, parentEl);
 };
 
+const setBorderRadiusVariables = (
+  borderRadius: ThemeBorderRadius,
+  parentEl: Element | null,
+) => {
+  const values: Record<
+    'none' | 'sm' | 'md' | 'lg',
+    { sm: number; md: number; lg: number }
+  > = {
+    none: { sm: 0, md: 0, lg: 0 },
+    sm: { sm: 4, md: 6, lg: 10 },
+    md: { sm: 6, md: 10, lg: 16 },
+    lg: { sm: 8, md: 24, lg: 24 },
+  };
+
+  setVariable('--r-sw-sm', `${values[borderRadius].sm}px`, parentEl);
+  setVariable('--r-sw-md', `${values[borderRadius].md}px`, parentEl);
+  setVariable('--r-sw-lg', `${values[borderRadius].lg}px`, parentEl);
+};
+
 const loadTheme = (parentEl: Element | null, theme: Theme) => {
   const {
     primaryColor,
     surfaceColor,
+    containerColor,
     successColor,
     warningColor,
     errorColor,
     colorScheme = 'dark',
+    borderRadius = 'md',
+    stylePreset = 'clean',
   } = theme;
 
   if (primaryColor) {
     setColorPalette('accent', 500, parentEl, primaryColor, colorScheme);
+
+    if (stylePreset === 'bold') {
+      setColorPalette('gray', 50, parentEl, primaryColor, colorScheme);
+    }
   }
 
-  if (surfaceColor) {
+  if (surfaceColor && stylePreset === 'clean') {
     setColorPalette('gray', 950, parentEl, surfaceColor, colorScheme);
   }
 
+  if (containerColor) {
+    setColorVariable('container', containerColor, parentEl);
+  }
+
   if (successColor) {
     setColorVariable('status-success', successColor, parentEl);
   }
@@ -73,6 +113,10 @@ const loadTheme = (parentEl: Element | null, theme: Theme) => {
   if (errorColor) {
     setColorVariable('status-error', errorColor, parentEl);
   }
+
+  if (borderRadius) {
+    setBorderRadiusVariables(borderRadius, parentEl);
+  }
 };
 
 export const ThemeContext = createContext<Theme | undefined>(undefined);

package/src/theme.css

@@ -1,14 +1,15 @@
 :root {
     --font-family-sw: 'Inter', sans-serif;
     --default-font-family: var(--font-family-sw);
-
-    --r-sw-sm: 6px;
-    --r-sw-md: 10px;
-    --r-sw-lg: 16px;
-    --r-sw-xl: 24px;
 }
 
 @layer base {
+    body[data-sw-theme] {
+        --r-sw-sm: 6px;
+        --r-sw-md: 10px;
+        --r-sw-lg: 16px;
+    }
+
     body[data-sw-theme="light"] {
         color-scheme: light;
 
@@ -39,6 +40,8 @@
         --c-sw-status-success: #00652F;
         --c-sw-status-warning: #A87A04;
         --c-sw-status-error: #9F002B;
+
+        --c-sw-container: #000;
     }
 
     body[data-sw-theme="dark"] {
@@ -71,6 +74,8 @@
         --c-sw-status-success: #98FFB5;
         --c-sw-status-warning: #FADFAD;
         --c-sw-status-error: #FFB8BE;
+
+        --c-sw-container: #FFF;
     }
 }
 

package/src/types/theme.ts

@@ -2,14 +2,22 @@ export type HexColor = `#${string}`;
 
 export type ColorScheme = 'light' | 'dark';
 
+export type ThemeBorderRadius = 'none' | 'sm' | 'md' | 'lg';
+
+export type ThemeStylePreset = 'clean' | 'bold';
+
 export type Theme = {
   colorScheme?: ColorScheme;
+  stylePreset?: ThemeStylePreset;
   backgroundColor?: HexColor;
   primaryColor?: HexColor;
   surfaceColor?: HexColor;
+  containerColor?: HexColor;
   successColor?: HexColor;
   warningColor?: HexColor;
   errorColor?: HexColor;
+  borderRadius?: ThemeBorderRadius;
+  showContainer?: boolean;
 };
 
 export type ColorPalette = Record<

package/src/widgets/WidgetDeposit/index.tsx

@@ -1,3 +1,4 @@
+import { BaseContainer } from '../../components/BaseContainer';
 import {
   WidgetContainer,
   WidgetContainerProps,
@@ -13,11 +14,13 @@ export const WidgetDeposit = ({
   className,
   ...widgetProps
 }: WidgetDepositProps) => (
-  <WidgetContainer
-    className={className}
-    isFullPage={isFullPage}
-    HeaderComponent={HeaderComponent}
-    FooterComponent={FooterComponent}>
-    <WidgetDepositContent {...widgetProps} />
-  </WidgetContainer>
+  <BaseContainer>
+    <WidgetContainer
+      className={className}
+      isFullPage={isFullPage}
+      HeaderComponent={HeaderComponent}
+      FooterComponent={FooterComponent}>
+      <WidgetDepositContent {...widgetProps} />
+    </WidgetContainer>
+  </BaseContainer>
 );

package/src/widgets/WidgetSwap/index.tsx

@@ -1,3 +1,4 @@
+import { BaseContainer } from '../../components/BaseContainer';
 import {
   WidgetContainer,
   WidgetContainerProps,
@@ -13,11 +14,13 @@ export const WidgetSwap = ({
   className,
   ...widgetProps
 }: WidgetSwapProps) => (
-  <WidgetContainer
-    className={className}
-    isFullPage={isFullPage}
-    HeaderComponent={HeaderComponent}
-    FooterComponent={FooterComponent}>
-    <WidgetSwapContent {...widgetProps} />
-  </WidgetContainer>
+  <BaseContainer>
+    <WidgetContainer
+      className={className}
+      isFullPage={isFullPage}
+      HeaderComponent={HeaderComponent}
+      FooterComponent={FooterComponent}>
+      <WidgetSwapContent {...widgetProps} />
+    </WidgetContainer>
+  </BaseContainer>
 );

package/src/widgets/WidgetWithdraw/index.tsx

@@ -1,3 +1,4 @@
+import { BaseContainer } from '../../components/BaseContainer';
 import {
   WidgetContainer,
   WidgetContainerProps,
@@ -14,11 +15,13 @@ export const WidgetWithdraw = ({
   className,
   ...widgetProps
 }: WidgetWithdrawProps) => (
-  <WidgetContainer
-    className={className}
-    isFullPage={isFullPage}
-    HeaderComponent={HeaderComponent}
-    FooterComponent={FooterComponent}>
-    <WidgetWithdrawContent {...widgetProps} />
-  </WidgetContainer>
+  <BaseContainer>
+    <WidgetContainer
+      className={className}
+      isFullPage={isFullPage}
+      HeaderComponent={HeaderComponent}
+      FooterComponent={FooterComponent}>
+      <WidgetWithdrawContent {...widgetProps} />
+    </WidgetContainer>
+  </BaseContainer>
 );