npm - @particle-network/ui-react - Versions diffs - 0.4.0-beta.1 → 0.4.0-beta.11 - Mend

@particle-network/ui-react 0.4.0-beta.1 → 0.4.0-beta.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/dist/components/ProgressWrapper/index.d.ts CHANGED Viewed

@@ -24,7 +24,7 @@ export interface ProgressWrapperProps extends React.HTMLAttributes<HTMLDivElemen
     /**
      * 进度条颜色
      */
-    color?: UXForegroundColor | 'transparent';
+    color?: UXForegroundColor | 'transparent' | `#${string}`;
     /**
      * 进度条 SVG 样式
      */

package/dist/components/ProgressWrapper/index.js CHANGED Viewed

@@ -2,10 +2,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, useRef } from "react";
 import { cn } from "@heroui/theme";
-import { getHexColorFromCSSVariable, radiusMap } from "@particle-network/ui-shared";
+import { radiusMap } from "@particle-network/ui-shared";
 import { useSize } from "ahooks";
 import { Center } from "../layout/index.js";
+import { useThemeColor } from "../UXThemeSwitch/use-theme-color.js";
 const ProgressWrapper = ({ className, value = 0, width, height, radius = 'sm', strokeWidth = 1, color = 'primary', children, svgClassName, ...restProps })=>{
+    const uxColors = useThemeColor();
     const autoLayout = !width && !height;
     const containerRef = useRef(null);
     const { width: childWidth, height: childHeight } = useSize(containerRef) ?? {
@@ -34,8 +36,21 @@ const ProgressWrapper = ({ className, value = 0, width, height, radius = 'sm', s
     const rectXY = strokeWidth / 2;
     const perimeter = 2 * (rectWidth + rectHeight);
     const strokeDashoffset = perimeter * (1 - clampedProgress / 100);
-    const colorValue = 'transparent' === color ? 'transparent' : getHexColorFromCSSVariable(color);
-    const trackColor = 'transparent' === color ? 'transparent' : `${colorValue}40`;
+    const colorValue = useMemo(()=>{
+        if ('transparent' === color) return 'transparent';
+        if (color.startsWith('#')) return color;
+        return uxColors[color];
+    }, [
+        color,
+        uxColors
+    ]);
+    const trackColor = useMemo(()=>{
+        if ('transparent' === color) return 'transparent';
+        return `${colorValue}40`;
+    }, [
+        color,
+        colorValue
+    ]);
     const radiusValue = 'number' == typeof radius ? radius : radiusMap[radius];
     const createPathData = (x, y, w, h, r)=>{
         if (0 === r) return `

package/dist/components/UXDropdown/dropdown-item.js CHANGED Viewed

@@ -177,7 +177,7 @@ const classes = {
             variant: 'flat',
             color: 'default',
             class: {
-                base: 'data-[hover=true]:bg-background-200 data-[hover=true]:text-default-foreground'
+                base: 'data-[hover=true]:bg-background-200 data-[focus-visible=true]:bg-background-200 data-[focus-visible=true]:dark:bg-background-200 data-[hover=true]:text-default-foreground data-[selectable=true]:focus:!bg-background-200 data-[selectable=true]:focus:dark:!bg-background-200'
             }
         },
         {

package/dist/components/UXSelect/index.js CHANGED Viewed

@@ -18,7 +18,7 @@ const UXSelect = /*#__PURE__*/ forwardRef((props, ref)=>{
                 selectorIcon
             ],
             trigger: [
-                'h-[30px] min-h-[30px] px-md bg-background-200',
+                'h-[30px] min-h-[30px] px-md bg-background-200 data-[hover=true]:bg-background-200 data-[hover=true]:opacity-hover',
                 trigger
             ],
             value: [
@@ -34,7 +34,7 @@ const UXSelect = /*#__PURE__*/ forwardRef((props, ref)=>{
                 list: 'gap-0 [&_[data-slot="heading"]]:text-small [&_[data-slot="heading"]]:font-medium'
             },
             itemClasses: {
-                base: '!outline-none min-h-8 px-md rounded-small text-foreground-300 !outline-none data-[hover=true]:bg-background-200 data-[selected=true]:text-foreground gap-1',
+                base: '!outline-none min-h-8 px-md rounded-small text-foreground-300 !outline-none data-[hover=true]:bg-background-200 data-[focus-visible=true]:bg-background-200 data-[focus-visible=true]:dark:bg-background-200 data-[hover=true]:text-default-foreground data-[selectable=true]:focus:!bg-background-200 data-[selectable=true]:focus:dark:!bg-background-200 gap-1',
                 title: 'text-tiny font-medium antialiased',
                 selectedIcon: '[&>svg>polyline]:stroke-[2.5]'
             }

package/dist/components/UXTabs/tabs.classes.js CHANGED Viewed

@@ -3,7 +3,7 @@ const tabsClasses = {
     variants: {
         variant: {
             solid: {
-                tabList: 'gap-0 bg-background-400',
+                tabList: 'gap-0 bg-background-200',
                 tab: 'py-0 !outline-none',
                 cursor: 'shadow-none inset-0',
                 tabContent: 'text-foreground-300 font-medium'
@@ -252,9 +252,9 @@ const tabsClasses = {
             color: 'default',
             class: {
                 cursor: [
-                    'bg-background-200'
+                    '!bg-tertiary'
                 ],
-                tabContent: 'group-data-[selected=true]:text-default-foreground'
+                tabContent: 'group-data-[selected=true]:text-tertiary-foreground'
             }
         },
         {
@@ -264,9 +264,9 @@ const tabsClasses = {
             color: 'default',
             class: {
                 cursor: [
-                    'bg-foreground-100'
+                    '!bg-tertiary'
                 ],
-                tabContent: 'group-data-[selected=true]:text-default-foreground'
+                tabContent: 'group-data-[selected=true]:text-tertiary-foreground'
             }
         },
         {
@@ -276,9 +276,9 @@ const tabsClasses = {
             color: 'default',
             class: {
                 cursor: [
-                    'bg-background-300'
+                    '!bg-tertiary'
                 ],
-                tabContent: 'group-data-[selected=true]:text-default-foreground'
+                tabContent: 'group-data-[selected=true]:text-tertiary-foreground'
             }
         },
         {

package/dist/components/UXThemeSwitch/index.d.ts CHANGED Viewed

@@ -1,6 +1,5 @@
 export * from './theme-data';
 export * from './theme-switch';
 export * from './use-color-scheme';
-export * from './use-quote-color';
 export * from './use-theme';
 export * from './use-theme-color';

package/dist/components/UXThemeSwitch/index.js CHANGED Viewed

@@ -1,6 +1,5 @@
 export * from "./theme-data.js";
 export * from "./theme-switch.js";
 export * from "./use-color-scheme.js";
-export * from "./use-quote-color.js";
 export * from "./use-theme.js";
 export * from "./use-theme-color.js";

package/dist/components/UXThemeSwitch/theme-data.d.ts CHANGED Viewed

@@ -1,28 +1,12 @@
+import type { UXColor } from '@particle-network/ui-shared';
 export type ThemeId = 'ux-purple-gold-dark' | 'ux-purple-gold-light' | 'ux-green-red-dark' | 'ux-green-red-light' | 'ux-green-red-soft-dark' | 'ux-green-red-soft-light' | 'gmgn-dark' | 'axiom-dark' | 'hyperliquid-dark' | 'phantom-dark' | 'binance-dark' | 'bullx-dark';
+export type ColorScheme = 'dark' | 'light';
 export interface ThemeItemType {
     id: ThemeId;
     zhName: string;
     enName: string;
-    colorScheme: 'dark' | 'light';
-    colorVariables: {
-        foreground: string;
-        secondary: string;
-        tertiary: string;
-        primary: string;
-        success: string;
-        danger: string;
-        alert: string;
-        warning: string;
-        gold: string;
-        background: string;
-        'background-200': string;
-        'background-300': string;
-        'background-400': string;
-        overlay: string;
-        divider: string;
-        bullish: string;
-        bearish: string;
-    };
+    colorScheme: ColorScheme;
+    colorVariables: Record<UXColor, string>;
 }
 export declare const themeData: ThemeItemType[];
 export declare const themeKeys: ThemeId[];

package/dist/components/UXThemeSwitch/theme-data.js CHANGED Viewed

@@ -5,6 +5,9 @@ const themeData = [
         enName: 'UX Purple/Gold Dark',
         colorScheme: 'dark',
         colorVariables: {
+            default: '#FFFFFF',
+            white: '#FFFFFF',
+            transparent: 'transparent',
             foreground: '#FFFFFF',
             secondary: '#A1A1AA',
             tertiary: '#4E4E56',
@@ -14,10 +17,10 @@ const themeData = [
             alert: '#F57733',
             warning: '#FF9821',
             gold: '#FFB800',
-            background: '#000000',
-            'background-200': '#1F1F23',
-            'background-300': '#17171C',
-            'background-400': '#0F0F0F',
+            'bg-default': '#000000',
+            'bg-200': '#1F1F23',
+            'bg-300': '#17171C',
+            'bg-400': '#0F0F0F',
             overlay: '#17171C',
             divider: '#282828',
             bullish: '#D745FF',
@@ -30,6 +33,9 @@ const themeData = [
         enName: 'UX Purple/Gold Light',
         colorScheme: 'light',
         colorVariables: {
+            default: '#000000',
+            white: '#FFFFFF',
+            transparent: 'transparent',
             foreground: '#000000',
             secondary: '#767A80',
             tertiary: '#D8D8DE',
@@ -39,10 +45,10 @@ const themeData = [
             alert: '#E65E16',
             warning: '#FF9821',
             gold: '#F38300',
-            background: '#F8F8FA',
-            'background-200': '#F0F0F2',
-            'background-300': '#F8F8FA',
-            'background-400': '#FFFFFF',
+            'bg-default': '#F8F8FA',
+            'bg-200': '#F0F0F2',
+            'bg-300': '#F8F8FA',
+            'bg-400': '#FFFFFF',
             overlay: '#FFFFFF',
             divider: '#E8E8ED',
             bullish: '#D745FF',
@@ -55,6 +61,9 @@ const themeData = [
         enName: 'UX Green/Red Dark',
         colorScheme: 'dark',
         colorVariables: {
+            default: '#FFFFFF',
+            white: '#FFFFFF',
+            transparent: 'transparent',
             foreground: '#FFFFFF',
             secondary: '#A1A1AA',
             tertiary: '#4E4E56',
@@ -64,10 +73,10 @@ const themeData = [
             alert: '#F57733',
             warning: '#FF9821',
             gold: '#FFB800',
-            background: '#000000',
-            'background-200': '#1F1F23',
-            'background-300': '#17171C',
-            'background-400': '#0F0F0F',
+            'bg-default': '#000000',
+            'bg-200': '#1F1F23',
+            'bg-300': '#17171C',
+            'bg-400': '#0F0F0F',
             overlay: '#17171C',
             divider: '#282828',
             bullish: '#45B167',
@@ -80,6 +89,9 @@ const themeData = [
         enName: 'UX Green/Red Light',
         colorScheme: 'light',
         colorVariables: {
+            default: '#000000',
+            white: '#FFFFFF',
+            transparent: 'transparent',
             foreground: '#000000',
             secondary: '#767A80',
             tertiary: '#D8D8DE',
@@ -89,10 +101,10 @@ const themeData = [
             alert: '#E65E16',
             warning: '#FF9821',
             gold: '#F38300',
-            background: '#F8F8FA',
-            'background-200': '#F0F0F2',
-            'background-300': '#F8F8FA',
-            'background-400': '#FFFFFF',
+            'bg-default': '#F8F8FA',
+            'bg-200': '#F0F0F2',
+            'bg-300': '#F8F8FA',
+            'bg-400': '#FFFFFF',
             overlay: '#FFFFFF',
             divider: '#E8E8ED',
             bullish: '#45B167',
@@ -105,6 +117,9 @@ const themeData = [
         enName: 'UX Soft Dark',
         colorScheme: 'dark',
         colorVariables: {
+            default: '#FDFDFE',
+            white: '#FFFFFF',
+            transparent: 'transparent',
             foreground: '#FDFDFE',
             secondary: '#BBBBC4',
             tertiary: '#70707C',
@@ -114,10 +129,10 @@ const themeData = [
             alert: '#F37A39',
             warning: '#F8BF63',
             gold: '#FFB800',
-            background: '#100E11',
-            'background-200': '#2A2A30',
-            'background-300': '#17171C',
-            'background-400': '#19161B',
+            'bg-default': '#100E11',
+            'bg-200': '#2A2A30',
+            'bg-300': '#17171C',
+            'bg-400': '#19161B',
             overlay: '#17171C',
             divider: '#282828',
             bullish: '#73D090',
@@ -130,6 +145,9 @@ const themeData = [
         enName: 'UX Soft Light',
         colorScheme: 'light',
         colorVariables: {
+            default: '#0C0C0F',
+            white: '#FFFFFF',
+            transparent: 'transparent',
             foreground: '#0C0C0F',
             secondary: '#363538',
             tertiary: '#7B7B85',
@@ -139,10 +157,10 @@ const themeData = [
             alert: '#F07939',
             warning: '#F6932B',
             gold: '#FFB800',
-            background: '#F6F6F6',
-            'background-200': '#E9E7EE',
-            'background-300': '#F6F6F6',
-            'background-400': '#FFFFFF',
+            'bg-default': '#F6F6F6',
+            'bg-200': '#E9E7EE',
+            'bg-300': '#F6F6F6',
+            'bg-400': '#FFFFFF',
             overlay: '#FFFFFF',
             divider: '#DAD7E0',
             bullish: '#19AB5E',
@@ -155,6 +173,9 @@ const themeData = [
         enName: 'GMGN',
         colorScheme: 'dark',
         colorVariables: {
+            default: '#F0F5F5',
+            white: '#FFFFFF',
+            transparent: 'transparent',
             foreground: '#F0F5F5',
             secondary: '#C4CCCC',
             tertiary: '#757E80',
@@ -164,10 +185,10 @@ const themeData = [
             alert: '#F55832',
             warning: '#EDB951',
             gold: '#F5DA54',
-            background: '#0C0C0F',
-            'background-200': '#282A2E',
-            'background-300': '#1A1B1F',
-            'background-400': '#111214',
+            'bg-default': '#0C0C0F',
+            'bg-200': '#282A2E',
+            'bg-300': '#1A1B1F',
+            'bg-400': '#111214',
             overlay: '#1A1B1F',
             divider: '#282828',
             bullish: '#1DB069',
@@ -180,6 +201,9 @@ const themeData = [
         enName: 'AXIOM',
         colorScheme: 'dark',
         colorVariables: {
+            default: '#FCFCFC',
+            white: '#FFFFFF',
+            transparent: 'transparent',
             foreground: '#FCFCFC',
             secondary: '#C8C9D1',
             tertiary: '#777A8C',
@@ -189,10 +213,10 @@ const themeData = [
             alert: '#F57733',
             warning: '#F7931A',
             gold: '#F7931A',
-            background: '#0C0C0F',
-            'background-200': '#333542',
-            'background-300': '#18181A',
-            'background-400': '#101114',
+            'bg-default': '#0C0C0F',
+            'bg-200': '#333542',
+            'bg-300': '#18181A',
+            'bg-400': '#101114',
             overlay: '#18181A',
             divider: '#333542',
             bullish: '#0B9981',
@@ -205,6 +229,9 @@ const themeData = [
         enName: 'Hyperliquid',
         colorScheme: 'dark',
         colorVariables: {
+            default: '#F6FEFD',
+            white: '#FFFFFF',
+            transparent: 'transparent',
             foreground: '#F6FEFD',
             secondary: '#D1D4DC',
             tertiary: '#949E9C',
@@ -214,10 +241,10 @@ const themeData = [
             alert: '#EF8F50',
             warning: '#FFB648',
             gold: '#FFB648',
-            background: '#0F1A1F',
-            'background-200': '#273035',
-            'background-300': '#1B2429',
-            'background-400': '#0F1A1F',
+            'bg-default': '#0F1A1F',
+            'bg-200': '#273035',
+            'bg-300': '#1B2429',
+            'bg-400': '#0F1A1F',
             overlay: '#1B2429',
             divider: '#444651',
             bullish: '#51D2C1',
@@ -230,6 +257,9 @@ const themeData = [
         enName: 'Phantom',
         colorScheme: 'dark',
         colorVariables: {
+            default: '#FFFFFF',
+            white: '#FFFFFF',
+            transparent: 'transparent',
             foreground: '#FFFFFF',
             secondary: '#999999',
             tertiary: '#757E80',
@@ -239,10 +269,10 @@ const themeData = [
             alert: '#FF9C3F',
             warning: '#FFD13F',
             gold: '#FFD13F',
-            background: '#13121A',
-            'background-200': '#222222',
-            'background-300': '#272735',
-            'background-400': '#22212A',
+            'bg-default': '#13121A',
+            'bg-200': '#222222',
+            'bg-300': '#272735',
+            'bg-400': '#22212A',
             overlay: '#272735',
             divider: '#323232',
             bullish: '#2EC08B',
@@ -255,6 +285,9 @@ const themeData = [
         enName: 'Binance',
         colorScheme: 'dark',
         colorVariables: {
+            default: '#EAECEF',
+            white: '#FFFFFF',
+            transparent: 'transparent',
             foreground: '#EAECEF',
             secondary: '#929AA5',
             tertiary: '#707A8A',
@@ -264,10 +297,10 @@ const themeData = [
             alert: '#FF693D',
             warning: '#F0B90B',
             gold: '#2DBD85',
-            background: '#0B0E11',
-            'background-200': '#29313D',
-            'background-300': '#202630',
-            'background-400': '#181A20',
+            'bg-default': '#0B0E11',
+            'bg-200': '#29313D',
+            'bg-300': '#202630',
+            'bg-400': '#181A20',
             overlay: '#202630',
             divider: '#343B47',
             bullish: '#2EBD85',
@@ -280,6 +313,9 @@ const themeData = [
         enName: "Bullx's",
         colorScheme: 'dark',
         colorVariables: {
+            default: '#E9E9E9',
+            white: '#FFFFFF',
+            transparent: 'transparent',
             foreground: '#E9E9E9',
             secondary: '#98989B',
             tertiary: '#686a6d',
@@ -289,10 +325,10 @@ const themeData = [
             alert: '#E9BF52',
             warning: '#DCC161',
             gold: '#E9BF52',
-            background: '#09090B',
-            'background-200': '#1B1D22',
-            'background-300': '#0D0D10',
-            'background-400': '#0F0F0F',
+            'bg-default': '#09090B',
+            'bg-200': '#1B1D22',
+            'bg-300': '#0D0D10',
+            'bg-400': '#0F0F0F',
             overlay: '#0D0D10',
             divider: '#1E2025',
             bullish: '#459C6E',

package/dist/components/UXThemeSwitch/theme-item.js CHANGED Viewed

@@ -8,11 +8,12 @@ const ThemeItem = ({ id, zhName, enName, isSelected, onClick })=>{
     const lang = useLang();
     return /*#__PURE__*/ jsxs(VStack, {
         center: true,
+        gap: 2,
         className: cn('cursor-pointer hover:scale-105 transition-all duration-300', id),
         onClick: onClick,
         children: [
             /*#__PURE__*/ jsx("div", {
-                className: cn('rounded-small border-1.5', isSelected ? 'border-primary' : 'border-transparent'),
+                className: cn('rounded-medium border-2', isSelected ? 'border-primary' : 'border-transparent'),
                 children: /*#__PURE__*/ jsxs("svg", {
                     xmlns: "http://www.w3.org/2000/svg",
                     width: "180",

package/dist/components/UXThemeSwitch/theme-switch.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import "react";
 import { Drawer, DrawerBody, DrawerContent, DrawerFooter, DrawerHeader } from "@heroui/drawer";
 import { useDisclosure } from "@heroui/use-disclosure";
-import { ThemeSwitchIcon } from "@particle-network/icons/web";
+import { ChartColorSwitchIcon } from "@particle-network/icons/web";
 import { useI18n } from "../../hooks/index.js";
 import { Flex, HStack, VStack } from "../layout/index.js";
 import { Text } from "../typography/Text.js";
@@ -132,7 +132,7 @@ const UXThemeSwitch = ({ children })=>{
             isIconOnly: true,
             variant: "light",
             onPress: onOpen,
-            children: /*#__PURE__*/ jsx(ThemeSwitchIcon, {})
+            children: /*#__PURE__*/ jsx(ChartColorSwitchIcon, {})
         });
     };
     return /*#__PURE__*/ jsxs(Fragment, {

package/dist/components/UXThemeSwitch/use-color-scheme.d.ts CHANGED Viewed

@@ -1 +1,5 @@
-export declare const useColorScheme: () => "dark" | "light";
+export declare const useColorScheme: () => {
+    colorScheme: import("./theme-data").ColorScheme;
+    isDark: boolean;
+    isLight: boolean;
+};

package/dist/components/UXThemeSwitch/use-color-scheme.js CHANGED Viewed

@@ -1,6 +1,11 @@
 import { useThemeStore } from "./use-theme-store.js";
 const useColorScheme = ()=>{
     const { selectedTheme } = useThemeStore();
-    return selectedTheme.colorScheme;
+    const { colorScheme } = selectedTheme;
+    return {
+        colorScheme,
+        isDark: 'dark' === colorScheme,
+        isLight: 'light' === colorScheme
+    };
 };
 export { useColorScheme };

package/dist/components/UXThemeSwitch/use-theme-color.d.ts CHANGED Viewed

@@ -1,19 +1 @@
-export declare const useThemeColor: () => {
-    foreground: string;
-    secondary: string;
-    tertiary: string;
-    primary: string;
-    success: string;
-    danger: string;
-    alert: string;
-    warning: string;
-    gold: string;
-    background: string;
-    'background-200': string;
-    'background-300': string;
-    'background-400': string;
-    overlay: string;
-    divider: string;
-    bullish: string;
-    bearish: string;
-};
+export declare const useThemeColor: () => Record<import("@particle-network/ui-shared").UXColor, string>;

package/dist/components/UXThemeSwitch/use-theme.js CHANGED Viewed

@@ -11,6 +11,8 @@ const applyTheme = (theme)=>{
     themeKeys.forEach((key)=>{
         root.classList.remove(key);
     });
+    root.classList.remove('dark');
+    root.classList.remove('light');
     root.classList.add(theme.id);
 };
 const extractFontFamilyFromLink = (link)=>{

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-react",
-  "version": "0.4.0-beta.1",
+  "version": "0.4.0-beta.11",
   "type": "module",
   "exports": {
     ".": {
@@ -39,8 +39,8 @@
     "@types/react": "^19.1.10",
     "react": "^19.1.0",
     "typescript": "^5.8.3",
-    "@particle-network/eslint-config": "0.3.0",
-    "@particle-network/lintstaged-config": "0.1.0"
+    "@particle-network/lintstaged-config": "0.1.0",
+    "@particle-network/eslint-config": "0.3.0"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
@@ -50,8 +50,8 @@
     "ahooks": "^3.9.4",
     "copy-to-clipboard": "^3.3.3",
     "zustand": "^5.0.8",
-    "@particle-network/icons": "0.4.0-beta.0",
-    "@particle-network/ui-shared": "0.3.0-beta.0"
+    "@particle-network/icons": "0.4.0-beta.5",
+    "@particle-network/ui-shared": "0.3.0-beta.1"
   },
   "scripts": {
     "build": "rslib build",

package/tailwind-preset.js CHANGED Viewed

@@ -6,6 +6,9 @@ const plugin = require('tailwindcss/plugin');
 module.exports = {
   theme: {
     extend: {
+      colors: {
+        brand: '#D745FF',
+      },
       gap: {
         xs: '0.125rem', // 2px
         sm: '0.375rem', // 6px
@@ -72,12 +75,12 @@ module.exports = {
       },
     },
   },
-  darkMode: 'class',
+  darkMode: ['selector', '[data-theme="dark"]'],
   plugins: [
     heroui({
       addCommonColors: true,
-      defaultTheme: 'ux-purple-gold-light',
-      defaultExtendTheme: 'light',
+      defaultTheme: 'ux-purple-gold-dark',
+      defaultExtendTheme: 'ux-purple-gold-dark',
       layout: {
         radius: {
           small: '6px', // rounded-small
@@ -509,7 +512,7 @@ module.exports = {
             },
             tertiary: {
               DEFAULT: '#7B7B85',
-              foreground: '#000000',
+              foreground: '#FFFFFF',
             },
             success: {
               DEFAULT: '#19AB5E',
@@ -584,7 +587,7 @@ module.exports = {
             },
             tertiary: {
               DEFAULT: '#757E80',
-              foreground: '#FFFFFF',
+              foreground: '#000000',
             },
             success: {
               DEFAULT: '#86D99F',
@@ -659,7 +662,7 @@ module.exports = {
             },
             tertiary: {
               DEFAULT: '#777A8C',
-              foreground: '#FFFFFF',
+              foreground: '#000000',
             },
             success: {
               DEFAULT: '#2FE3AC',
@@ -734,7 +737,7 @@ module.exports = {
             },
             tertiary: {
               DEFAULT: '#949E9C',
-              foreground: '#FFFFFF',
+              foreground: '#000000',
             },
             success: {
               DEFAULT: '#1FA67D',
@@ -809,7 +812,7 @@ module.exports = {
             },
             tertiary: {
               DEFAULT: '#757E80',
-              foreground: '#FFFFFF',
+              foreground: '#000000',
             },
             success: {
               DEFAULT: '#2EC08B',
@@ -884,7 +887,7 @@ module.exports = {
             },
             tertiary: {
               DEFAULT: '#707A8A',
-              foreground: '#FFFFFF',
+              foreground: '#000000',
             },
             success: {
               DEFAULT: '#2EBD85',
@@ -959,7 +962,7 @@ module.exports = {
             },
             tertiary: {
               DEFAULT: '#686a6d',
-              foreground: '#FFFFFF',
+              foreground: '#000000',
             },
             success: {
               DEFAULT: '#459C6E',
@@ -1014,7 +1017,7 @@ module.exports = {
         addVariant('max-2xh', '@media (max-height: 1300px)');
         // light mode variant
-        addVariant('light', '&:not(.dark *)');
+        addVariant('light', '&:not([data-theme="dark"] *)');
         // button styles
         addComponents({
@@ -1064,7 +1067,7 @@ module.exports = {
         '.shadow-box': {
           boxShadow: '0px 2px 12px 0px rgba(23, 23, 28, 0.15)',
         },
-        '.dark .shadow-box': {
+        '[data-theme="dark"] .shadow-box': {
           boxShadow: '0px 2px 12px 0px rgba(0, 0, 0, 0.5)',
         },
       });

package/dist/components/UXThemeSwitch/use-quote-color.d.ts DELETED Viewed

@@ -1,6 +0,0 @@
-export declare const useQuoteColor: () => {
-    bullish: string;
-    bearish: string;
-    upColor: string;
-    downColor: string;
-};

package/dist/components/UXThemeSwitch/use-quote-color.js DELETED Viewed

@@ -1,12 +0,0 @@
-import { useThemeStore } from "./use-theme-store.js";
-const useQuoteColor = ()=>{
-    const { selectedTheme } = useThemeStore();
-    const { bullish, bearish } = selectedTheme.colorVariables;
-    return {
-        bullish,
-        bearish,
-        upColor: bullish,
-        downColor: bearish
-    };
-};
-export { useQuoteColor };