@aurora-is-near/intents-swap-widget 3.18.0 → 3.18.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurora-is-near/intents-swap-widget",
-  "version": "3.18.0",
+  "version": "3.18.2",
   "description": "Provides components and hooks to build your own Intents swap widget",
   "author": "Maksim Vashchuk",
   "license": "MIT",
@@ -82,11 +82,10 @@
     "imask": "^7.6.1",
     "jest-react-hooks-shallow": "^1.5.1",
     "lodash.once": "^4.1.1",
-    "lucide-react": "^0.525.0",
     "near-api-js": "^6.2.5",
     "proxy-memoize": "^3.0.1",
     "qrcode.react": "^4.2.0",
-    "qs": "^6.14.0",
+    "qs": "^6.14.1",
     "react-error-boundary": "^6.0.0",
     "react-helmet-async": "^2.0.5",
     "react-i18next": "^15.7.3",
@@ -100,29 +99,5 @@
     "viem": "^2.38.3",
     "virtua": "^0.41.5",
     "zod": "^3.25.51"
-  },
-  "devDependencies": {
-    "@jest/globals": "^30.2.0",
-    "@swc/core": "^1.15.2",
-    "@swc/jest": "^0.2.39",
-    "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.0",
-    "@testing-library/user-event": "^14.6.1",
-    "@types/browser-or-node": "^1.3.2",
-    "@types/jest": "^30.0.0",
-    "@types/jest-image-snapshot": "^6.4.0",
-    "@types/puppeteer": "^7.0.4",
-    "glob": "^10.5.0",
-    "is-ci": "^4.1.0",
-    "jest-environment-jsdom": "^30.2.0",
-    "jest-image-snapshot": "^6.5.1",
-    "jest-puppeteer": "^11.0.0",
-    "jest-react-hooks-shallow": "^1.5.1",
-    "jest-transform-stub": "^2.0.0",
-    "jest-transformer-svg": "^2.1.0",
-    "puppeteer": "^24.31.0",
-    "ts-jest": "^29.4.5",
-    "vite-plugin-static-copy": "^3.1.4"
   }
 }

package/src/chains.ts

@@ -0,0 +1,14 @@
+import { cloneElement } from 'react';
+import { CHAINS_LIST } from './constants';
+import { CHAIN_ICONS } from './icons';
+
+export const CHAINS = Object.values(CHAINS_LIST).map((chain) => {
+  return {
+    id: chain.id,
+    label: chain.label,
+    icon: cloneElement(CHAIN_ICONS[chain.id], {
+      width: '100%',
+      height: '100%',
+    }),
+  };
+});

package/src/components/Accordion.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import * as Icons from 'lucide-react';
+import { ChevronLeftW700 as ChevronLeft } from '@material-symbols-svg/react-rounded/icons/chevron-left';
 import type { ReactNode } from 'react';
 
 import { Hr } from './Hr';
@@ -44,9 +44,9 @@ export const Accordion = ({
         )}
         <button type="button" className="ml-sw-lg cursor-pointer">
           {isExpanded ? (
-            <Icons.ChevronUp className="h-sw-2xl w-sw-2xl text-sw-gray-200" />
+            <ChevronLeft className="h-sw-2xl w-sw-2xl text-sw-gray-200 rotate-90" />
           ) : (
-            <Icons.ChevronDown className="h-sw-2xl w-sw-2xl text-sw-gray-200" />
+            <ChevronLeft className="h-sw-2xl w-sw-2xl text-sw-gray-200 -rotate-90" />
           )}
         </button>
       </header>

package/src/components/Banner.tsx

@@ -1,4 +1,8 @@
-import * as Icons from 'lucide-react';
+import { CloseW700 as Close } from '@material-symbols-svg/react-rounded/icons/close';
+import { EmergencyW700 as Emergency } from '@material-symbols-svg/react-rounded/icons/emergency';
+import { ErrorFillW700 as ErrorFill } from '@material-symbols-svg/react-rounded/icons/error';
+import { VerifiedFillW700 as VerifiedFill } from '@material-symbols-svg/react-rounded/icons/verified';
+import { useMemo } from 'react';
 
 import { cn } from '@/utils/cn';
 
@@ -17,12 +21,17 @@ export const Banner = ({
   className,
   onDismiss,
 }: Props) => {
-  const icon =
-    variant === 'success' ? (
-      <Icons.CheckCircle size={16} />
-    ) : (
-      <Icons.CircleAlert size={16} />
-    );
+  const icon = useMemo(() => {
+    switch (variant) {
+      case 'success':
+        return <VerifiedFill size={16} />;
+      case 'error':
+        return <ErrorFill size={16} />;
+      case 'warn':
+      default:
+        return <Emergency size={16} />;
+    }
+  }, [variant]);
 
   return (
     <div
@@ -46,7 +55,7 @@ export const Banner = ({
         <div
           onClick={onDismiss}
           className="ml-auto flex cursor-pointer items-center justify-center transition-all hover:scale-125">
-          <Icons.X size={16} strokeWidth={2.5} />
+          <Close size={16} />
         </div>
       )}
     </div>

package/src/components/BlockingError.tsx

@@ -1,4 +1,5 @@
-import * as Icons from 'lucide-react';
+import { CachedW700 as Cached } from '@material-symbols-svg/react-rounded/icons/cached';
+import { CloseW700 as Close } from '@material-symbols-svg/react-rounded/icons/close';
 
 import { Button } from './Button';
 import { Card } from './Card';
@@ -13,10 +14,7 @@ export const BlockingError = ({ message, onClickRetry }: Props) => (
     <div className="gap-sw-4xl py-6xl flex min-h-[200px] flex-col items-center justify-center w-full">
       <div className="gap-sw-xl flex flex-col items-center justify-center">
         <header className="gap-sw-md flex items-center">
-          <Icons.X
-            strokeWidth={2.5}
-            className="text-sw-accent-500 h-sw-4xl w-sw-4xl"
-          />
+          <Close className="text-sw-accent-500 h-sw-4xl w-sw-4xl" />
           <h3 className="text-sw-value-lg text-sw-accent-500">Ooops...</h3>
         </header>
         <p className="text-sw-body-md text-center text-sw-gray-100">
@@ -26,7 +24,7 @@ export const BlockingError = ({ message, onClickRetry }: Props) => (
       <Button
         size="md"
         variant="primary"
-        icon={Icons.RefreshCcw}
+        icon={Cached}
         onClick={onClickRetry}
         className="w-fit">
         Try again

package/src/components/Button.tsx

@@ -1,6 +1,9 @@
 import { Button as UIButton } from '@headlessui/react';
-import type { LucideIcon, LucideProps } from 'lucide-react';
-import * as Icons from 'lucide-react';
+import { ProgressActivityW700 as ProgressActivity } from '@material-symbols-svg/react-rounded/icons/progress-activity';
+import type {
+  IconProps,
+  MaterialSymbolsComponent,
+} from '@material-symbols-svg/react';
 
 import { cn as clsx } from '@/utils/cn';
 
@@ -17,7 +20,7 @@ type Props = {
   onClick?: () => void;
   fluid?: boolean;
 } & (
-  | { icon: LucideIcon; iconPosition?: 'head' | 'tail' }
+  | { icon: MaterialSymbolsComponent; iconPosition?: 'head' | 'tail' }
   | { icon?: never; iconPosition?: never }
 );
 
@@ -50,10 +53,10 @@ const ButtonChildren = ({
   const Icon =
     hasIcon && state !== 'loading'
       ? (icon ?? (() => <span />))
-      : ({ className, ...lucidProps }: LucideProps) => (
-          <Icons.Loader
+      : ({ className, ...iconProps }: IconProps) => (
+          <ProgressActivity
             className={clsx(styles.icon, 'animate-spin', className)}
-            {...lucidProps}
+            {...iconProps}
           />
         );
 

package/src/components/CloseButton.tsx

@@ -1,4 +1,4 @@
-import * as Icons from 'lucide-react';
+import { CloseW700 as Close } from '@material-symbols-svg/react-rounded/icons/close';
 
 import { cn } from '@/utils';
 
@@ -16,7 +16,7 @@ export const CloseButton = ({ className, onClick }: Props) => {
         className,
       )}
       onClick={onClick}>
-      <Icons.X size={18} strokeWidth={3} />
+      <Close size={18} />
     </button>
   );
 };

package/src/components/CopyButton.tsx

@@ -1,11 +1,11 @@
 import copy from 'copy-text-to-clipboard';
-import * as Icons from 'lucide-react';
+import { ContentCopyW700 as ContentCopy } from '@material-symbols-svg/react-rounded/icons/content-copy';
 
 export const CopyButton = ({ value }: { value: string }) => (
   <button
     type="button"
     onClick={() => copy(value)}
     className="text-sw-gray-200 hover:text-sw-gray-50 cursor-pointer transition-all duration-300 [transition-timing-function:cubic-bezier(0.175,0.885,0.32,1.275)] active:-translate-y-1 active:scale-x-90 active:scale-y-110">
-    <Icons.Copy size={16} />
+    <ContentCopy size={16} />
   </button>
 );

package/src/components/DirectionSwitcher.tsx

@@ -1,5 +1,5 @@
-import * as Icons from 'lucide-react';
-
+import { ArrowDownwardW700 as ArrowDownward } from '@material-symbols-svg/react-rounded/icons/arrow-downward';
+import { ProgressActivityW700 as ProgressActivity } from '@material-symbols-svg/react-rounded/icons/progress-activity';
 import { cn } from '@/utils/cn';
 
 type Props = {
@@ -25,11 +25,11 @@ export const DirectionSwitcher = ({
       )}>
       {isLoading ? (
         <div className="group relative inline-block">
-          <Icons.RefreshCw className="h-sw-2xl w-sw-2xl animate-spin opacity-50 text-sw-accent-500" />
+          <ProgressActivity className="h-sw-2xl w-sw-2xl animate-spin opacity-50 text-sw-accent-500" />
         </div>
       ) : (
         <div className="group relative inline-block">
-          <Icons.ArrowDown
+          <ArrowDownward
             className={cn(
               'h-sw-2xl w-sw-2xl transition-transform duration-300',
               {

package/src/components/Input.tsx

@@ -7,19 +7,20 @@ import {
   useState,
 } from 'react';
 import { Input as UIInput } from '@headlessui/react';
+import { CloseW700 as Close } from '@material-symbols-svg/react-rounded/icons/close';
+import type { MaterialSymbolsComponent } from '@material-symbols-svg/react';
 import type { InputProps } from '@headlessui/react';
 import type { PropsWithChildren } from 'react';
-import type { LucideIcon } from 'lucide-react';
-import * as Icons from 'lucide-react';
 
 import { cn } from '@/utils/cn';
 
 type State = 'default' | 'disabled' | 'error' | 'fixed';
 
 export type Props = Omit<InputProps, 'size'> & {
-  icon?: LucideIcon;
+  icon?: MaterialSymbolsComponent;
   defaultValue?: string;
   focusOnMount?: boolean;
+  fontSize?: 'sm' | 'md';
   state?: State;
 };
 
@@ -121,7 +122,7 @@ export const Input = forwardRef<HTMLInputElement, PropsWithChildren<Props>>(
                       },
                     )}
                     onClick={handleClear}>
-                    <Icons.X className="h-sw-xl w-sw-xl" />
+                    <Close className="h-sw-xl w-sw-xl" />
                   </button>
                 ) : null}
               </div>

package/src/components/StatusWidget.tsx

@@ -1,23 +1,16 @@
-import * as Icons from 'lucide-react';
+import { CloseW700 as Close } from '@material-symbols-svg/react-rounded/icons/close';
+import { CheckCircleFillW700 as CheckCircleFill } from '@material-symbols-svg/react-rounded/icons/check-circle';
 
 const Error = ({ message }: { message: string }) => (
   <div className="flex flex-col gap-sw-lg py-sw-6xl items-center justify-center">
-    <Icons.CircleX
-      size={36}
-      strokeWidth={1.5}
-      className="text-sw-status-error"
-    />
+    <Close size={36} className="text-sw-status-error" />
     <span className="text-sw-label-sm text-sw-status-error">{message}</span>
   </div>
 );
 
 const Success = () => (
   <div className="flex flex-col gap-sw-lg py-sw-6xl items-center justify-center">
-    <Icons.CheckCircle2
-      size={36}
-      strokeWidth={1.5}
-      className="text-sw-status-success"
-    />
+    <CheckCircleFill size={36} className="text-sw-status-success" />
     <span className="text-sw-label-sm text-sw-status-success text-center">
       Transaction detected
     </span>

package/src/components/WidgetContainer.tsx

@@ -2,7 +2,7 @@ import { PropsWithChildren, ReactElement } from 'react';
 import { cn } from '../utils';
 import { useTheme } from '../hooks/useTheme';
 
-const DEFAULT_BACKGROUND_COLOR = '#24262d';
+const DEFAULT_FULL_PAGE_BACKGROUND_COLOR = '#24262d';
 
 export type WidgetContainerProps = PropsWithChildren<{
   HeaderComponent?: ReactElement | false | null;
@@ -22,7 +22,10 @@ export const WidgetContainer = ({
 
   const jsx = (
     <div
-      style={{ transform: isFullPage ? 'translateY(15dvh)' : 'none' }}
+      style={{
+        transform: isFullPage ? 'translateY(15dvh)' : 'none',
+        backgroundColor: theme?.backgroundColor,
+      }}
       className={cn(
         'w-full h-fit flex flex-col justify-center items-center relative',
         className,
@@ -53,7 +56,8 @@ export const WidgetContainer = ({
         className,
       )}
       style={{
-        backgroundColor: theme?.backgroundColor ?? DEFAULT_BACKGROUND_COLOR,
+        backgroundColor:
+          theme?.backgroundColor ?? DEFAULT_FULL_PAGE_BACKGROUND_COLOR,
       }}>
       <div className="w-full h-fit max-w-[456px] min-w-[270px]">{jsx}</div>
     </div>

package/src/features/ChainsDropdown/AllNetworksIcon.tsx

@@ -1,7 +1,7 @@
-import * as Icons from 'lucide-react';
+import { TargetW700 as Target } from '@material-symbols-svg/react-rounded/icons/target';
 
 export const AllNetworksIcon = () => (
   <div className="bg-sw-accent-500 flex h-[28px] w-[28px] items-center justify-center">
-    <Icons.Target size={16} className="text-sw-accent-950" />
+    <Target size={16} className="text-sw-accent-950" />
   </div>
 );

package/src/features/ChainsDropdown/ChainItem.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import * as Icons from 'lucide-react';
+import { CheckW700 as Check } from '@material-symbols-svg/react-rounded/icons/check';
 
 import { cn } from '@/utils/cn';
 import { Icon } from '@/components/Icon';
@@ -34,7 +34,7 @@ export const ChainItem = React.forwardRef<HTMLButtonElement, Props>(
       )}>
       <Icon radius={10} label={label} icon={icon} />
       <span className="text-sw-label-md mr-auto">{label}</span>
-      {isSelected && <Icons.Check size={16} />}
+      {isSelected && <Check size={16} />}
     </button>
   ),
 );

package/src/features/ChainsDropdown/index.tsx

@@ -1,7 +1,7 @@
 import { Fragment, useMemo } from 'react';
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react';
+import { ChevronLeftW700 as ChevronLeft } from '@material-symbols-svg/react-rounded/icons/chevron-left';
 import { AnimatePresence, motion } from 'framer-motion';
-import * as Icons from 'lucide-react';
 
 import { ChainItem } from './ChainItem';
 import { AllNetworksIcon } from './AllNetworksIcon';
@@ -79,9 +79,15 @@ export const ChainsDropdown = ({
                 })()}
 
                 {isOpen ? (
-                  <Icons.ChevronUp size={18} className="text-sw-gray-50" />
+                  <ChevronLeft
+                    size={18}
+                    className="text-sw-gray-50 rotate-90"
+                  />
                 ) : (
-                  <Icons.ChevronDown size={18} className="text-sw-gray-50" />
+                  <ChevronLeft
+                    size={18}
+                    className="text-sw-gray-50 -rotate-90"
+                  />
                 )}
               </div>
             )}

package/src/features/DepositMethodSwitcher.tsx

@@ -1,4 +1,5 @@
-import * as Icons from 'lucide-react';
+import { QrCodeW700 as QrCode } from '@material-symbols-svg/react-rounded/icons/qr-code';
+import { WalletW700 as Wallet } from '@material-symbols-svg/react-rounded/icons/wallet';
 
 import { cn } from '@/utils/cn';
 import { Card } from '@/components/Card';
@@ -26,7 +27,7 @@ export const DepositMethodSwitcher = ({ children, className }: Props) => {
       <div className="flex gap-sw-lg">
         <Button
           size="md"
-          icon={Icons.Wallet2}
+          icon={Wallet}
           state={ctx.isDepositFromExternalWallet ? 'default' : 'active'}
           variant={ctx.isDepositFromExternalWallet ? 'outlined' : 'primary'}
           onClick={() => onToggle(false)}>
@@ -34,7 +35,7 @@ export const DepositMethodSwitcher = ({ children, className }: Props) => {
         </Button>
         <Button
           size="md"
-          icon={Icons.QrCode}
+          icon={QrCode}
           state={ctx.isDepositFromExternalWallet ? 'active' : 'default'}
           variant={ctx.isDepositFromExternalWallet ? 'primary' : 'outlined'}
           onClick={() => onToggle(true)}>

package/src/features/ExternalDeposit.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { QRCodeSVG } from 'qrcode.react';
 import { GetExecutionStatusResponse } from '@defuse-protocol/one-click-sdk-typescript';
-import * as Icons from 'lucide-react';
+import { ProgressActivityW700 as ProgressActivity } from '@material-symbols-svg/react-rounded/icons/progress-activity';
 
 import { notReachable } from '@/utils';
 import { CHAIN_IDS_MAP } from '@/constants/chains';
@@ -50,7 +50,7 @@ const Skeleton = () => {
     <div className="flex flex-col gap-sw-2xl items-center">
       <div className="bg-sw-gray-800 h-[180px] w-[180px] animate-pulse rounded-sw-md" />
       <div className="bg-sw-gray-800 h-[44px] w-full animate-pulse rounded-sw-md flex items-center justify-center gap-sw-sm">
-        <Icons.Loader className="animate-spin text-sw-gray-100 h-sw-lg w-sw-lg" />
+        <ProgressActivity className="animate-spin text-sw-gray-100 h-sw-lg w-sw-lg" />
         <span className="text-sw-gray-100 text-sw-label-sm">
           {!isNotEmptyAmount(ctx.sourceTokenAmount)
             ? t('deposit.external.loading.waiting', 'Waiting for token amount')

package/src/features/SendAddress/index.tsx

@@ -1,7 +1,7 @@
-import * as Icons from 'lucide-react';
 import { Button } from '@headlessui/react';
 import { useEffect, useMemo, useState } from 'react';
 import { useDebounce } from 'use-debounce';
+import { WandShineW700 as WandShine } from '@material-symbols-svg/react-rounded/icons/wand-shine';
 import type { ChangeEvent } from 'react';
 
 import { useNotification } from './useNotification';
@@ -76,6 +76,7 @@ export const SendAddress = ({ error, className, onMsg }: Props) => {
         {t('sendAddress.label', 'Send to')}
       </h5>
       <Input
+        fontSize="sm"
         defaultValue={ctx.sendAddress}
         state={inputState}
         className="mb-sw-xl"
@@ -88,7 +89,7 @@ export const SendAddress = ({ error, className, onMsg }: Props) => {
           <Button
             className="absolute right-0 flex items-center gap-sw-md min-w-max cursor-pointer"
             onClick={() => fireEvent('addressSet', ctx.walletAddress ?? '')}>
-            <Icons.Wand2 size={14} />
+            <WandShine size={14} />
             <span className="text-sw-label-md">
               {t('sendAddress.button.magic.label', 'My wallet')}
             </span>

package/src/features/SuccessScreen/CheckIcon.tsx

@@ -1,7 +1,7 @@
-import * as Icons from 'lucide-react';
+import { CheckW700 as Check } from '@material-symbols-svg/react-rounded/icons/check';
 
 export const CheckIcon = () => (
   <div className="mb-sw-xl bg-sw-status-success text-sw-gray-950 flex h-[44px] w-[44px] items-center justify-center rounded-full">
-    <Icons.Check size={24} />
+    <Check size={24} />
   </div>
 );

package/src/features/SuccessScreen/ExternalAction.tsx

@@ -1,4 +1,4 @@
-import * as Icons from 'lucide-react';
+import { OpenInNewW700 as OpenInNew } from '@material-symbols-svg/react-rounded/icons/open-in-new';
 
 type Props = {
   url: string;
@@ -10,6 +10,6 @@ export const ExternalAction = ({ url }: Props) => (
     href={url}
     className="text-sw-accent-300 hover:text-sw-accent-50 cursor-pointer"
     rel="noreferrer">
-    <Icons.ExternalLink size={16} />
+    <OpenInNew size={16} />
   </a>
 );

package/src/features/TokensModal.tsx

@@ -1,5 +1,5 @@
+import { SearchW700 as Search } from '@material-symbols-svg/react-rounded/icons/search';
 import { useRef, useState } from 'react';
-import * as Icons from 'lucide-react';
 
 import { TokensList } from './TokensList';
 import { ChainsDropdown } from './ChainsDropdown';
@@ -99,7 +99,7 @@ export const TokensModal = ({
       <div className="gap-sw-xl flex items-center">
         <Input
           focusOnMount
-          icon={Icons.Search}
+          icon={Search}
           ref={searchInputRef}
           defaultValue={search}
           className="w-full"

package/src/features/WalletCompatibilityCheck/WalletCompatibilityModal.tsx

@@ -1,12 +1,11 @@
-import {
-  AccountBalanceWalletFill,
-  ArmingCountdownFill,
-  BeenhereFill,
-  CheckCircleFill,
-  EncryptedFill,
-  GppBadFill,
-  type MaterialSymbolsComponent,
-} from '@material-symbols-svg/react-rounded';
+import { AccountBalanceWalletFillW700 as AccountBalanceWalletFill } from '@material-symbols-svg/react-rounded/icons/account-balance-wallet';
+import { ArmingCountdownFillW700 as ArmingCountdownFill } from '@material-symbols-svg/react-rounded/icons/arming-countdown';
+import { BeenhereFillW700 as BeenhereFill } from '@material-symbols-svg/react-rounded/icons/beenhere';
+import { CheckCircleFillW700 as CheckCircleFill } from '@material-symbols-svg/react-rounded/icons/check-circle';
+import { EncryptedFillW700 as EncryptedFill } from '@material-symbols-svg/react-rounded/icons/encrypted';
+import { GppBadFillW700 as GppBadFill } from '@material-symbols-svg/react-rounded/icons/gpp-bad';
+import type { MaterialSymbolsComponent } from '@material-symbols-svg/react-rounded';
+
 import { useTimer } from 'use-timer';
 import { useEffect } from 'react';
 

package/src/icons/index.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable import/extensions */
+import { ReactElement, SVGAttributes } from 'react';
 import AbgIcon from './abg.svg';
 import ArbIcon from './arb.svg';
 import AsterIcon from './aster.svg';
@@ -44,7 +45,10 @@ import type { Chains } from '@/types/chain';
 
 export const UNKNOWN_ICON: React.ReactElement = <UnknownIcon />;
 
-export const CHAIN_ICONS: Record<Chains, React.ReactElement> = {
+export const CHAIN_ICONS: Record<
+  Chains,
+  ReactElement<SVGAttributes<SVGElement>>
+> = {
   arb: <ArbIcon />,
   avax: <AvaxIcon />,
   base: <BaseIcon />,

package/src/index.ts

@@ -2,6 +2,7 @@ import './tailwind.css'; // import so CSS is emitted in dist
 
 export { WidgetConfigProvider } from './config';
 export { DEFAULT_RPCS } from './rpcs';
+export { CHAINS } from './chains';
 
 export * from './components';
 export * from './features';

package/src/tailwind.css

@@ -102,6 +102,15 @@
 	}
 }
 
+@utility text-sw-label-2sm {
+	@layer components {
+		@apply font-semibold;
+		font-size: 0.825rem;
+		line-height: 0.875rem;
+		letter-spacing: -0.01875rem;
+	}
+}
+
 @utility text-sw-label-sm {
 	@layer components {
 		@apply font-semibold;

package/src/theme/ThemeProvider.tsx

@@ -4,9 +4,9 @@ import { ColorPalette, ColorScheme, HexColor, Theme } from '../types/theme';
 import { ColorStop, createColorPalette } from './createColorPalette';
 import { useConfig } from '@/config';
 
-const setColorVariables = (
-  palette: ColorPalette,
-  colorKey: string,
+const setColorVariable = (
+  key: string,
+  value: string,
   parentEl: Element | null,
 ) => {
   let parentElement = document.body;
@@ -15,8 +15,16 @@ const setColorVariables = (
     parentElement = parentEl;
   }
 
+  parentElement.style.setProperty(`--c-sw-${key}`, value);
+};
+
+const setColorVariables = (
+  palette: ColorPalette,
+  colorKey: string,
+  parentEl: Element | null,
+) => {
   Object.entries(palette).forEach(([key, value]) => {
-    parentElement.style.setProperty(`--c-sw-${colorKey}-${key}`, value);
+    setColorVariable(`${colorKey}-${key}`, value, parentEl);
   });
 };
 
@@ -37,7 +45,14 @@ const setColorPalette = (
 };
 
 const loadTheme = (parentEl: Element | null, theme: Theme) => {
-  const { primaryColor, surfaceColor, colorScheme = 'dark' } = theme;
+  const {
+    primaryColor,
+    surfaceColor,
+    successColor,
+    warningColor,
+    errorColor,
+    colorScheme = 'dark',
+  } = theme;
 
   if (primaryColor) {
     setColorPalette('accent', 500, parentEl, primaryColor, colorScheme);
@@ -46,6 +61,18 @@ const loadTheme = (parentEl: Element | null, theme: Theme) => {
   if (surfaceColor) {
     setColorPalette('gray', 950, parentEl, surfaceColor, colorScheme);
   }
+
+  if (successColor) {
+    setColorVariable('status-success', successColor, parentEl);
+  }
+
+  if (warningColor) {
+    setColorVariable('status-warning', warningColor, parentEl);
+  }
+
+  if (errorColor) {
+    setColorVariable('status-error', errorColor, parentEl);
+  }
 };
 
 export const ThemeContext = createContext<Theme | undefined>(undefined);

package/src/types/theme.ts

@@ -7,6 +7,9 @@ export type Theme = {
   backgroundColor?: HexColor;
   primaryColor?: HexColor;
   surfaceColor?: HexColor;
+  successColor?: HexColor;
+  warningColor?: HexColor;
+  errorColor?: HexColor;
 };
 
 export type ColorPalette = Record<