index: themeStore

package.json

@@ -2,7 +2,7 @@
   "name": "@mrtryy/fancyuilibary",
   "description": "FancyUI Libary",
   "private": false,
-  "version": "0.1.123",
+  "version": "0.1.124",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.tsx

@@ -34,7 +34,7 @@ import ChipsRoute from './Routes/ChipsRoute/ChipsRoute';
 import CheckboxRoute from './Routes/CheckboxRoute/CheckboxRoute';
 import ColorGeneratorRoute from './Routes/ColorGeneratorRoute/ColorGeneratorRoute';
 import { TTheme } from '@/Components/UI/Interface/TTheme';
-import themeStore from './Components/UI/Design/color/themeStore';
+import themeStore from './Components/UI/Design/color/themeStore/themeStore';
 import GlobalStyle from './GlobalStyle';
 import FancyContentRoute from './Routes/FancyContentRoute/FancyContentRoute';
 import { FancyModal, FancySwipeUpModal } from './lib';

src/Components/UI/Atoms/ColorDisplay/ColorDisplay.tsx

@@ -7,7 +7,7 @@ import CheckerBoardPattern from '../CheckerBoardPattern/CheckerBoardPattern';
 import { ColorDisplayContainer, Wrapper, Content, WrapperSVG } from './ColorDisplay.style';
 import ClipBoardIcon from '../../SVGIcons/SVGClipBoardIcon/SVGClipBoardIcon';
 import ClipBoardIconCheck from '../../SVGIcons/SVGClipBoardIconChecked/SVGClipBoardIconChecked';
-import themeStore from '../../Design/color/themeStore';
+import themeStore from '../../Design/color/themeStore/themeStore';
 
 // --------------------------------------------------------------------------- //
 // ----- The main ColorDisplay Component for display the color in a box ------ //

src/Components/UI/Atoms/InputLabel/InputLabel.stories.tsx

@@ -1,6 +1,6 @@
 // Import necessary dependencies
 import { Meta, StoryObj } from '@storybook/react';
-import themeStore from '../../Design/color/themeStore';
+import themeStore from '../../Design/color/themeStore/themeStore';
 
 // Import the component to be tested
 import InputLabel from './InputLabel';

src/Components/UI/Atoms/SwitchActiveIndicator/utils/generateBlob.ts

@@ -3,7 +3,7 @@ import { css } from 'styled-components';
 import { getBackgroundColor } from '../../../Design/color/colorCalculatorForComponet';
 import colorTransparencyCalculator from '../../../Design/color/colorTransparencyCalculator';
 import { IActiveSwitchIndicator } from '../SwitchActiveIndicator';
-import themeStore from '@/Components/UI/Design/color/themeStore';
+import themeStore from '@/Components/UI/Design/color/themeStore/themeStore';
 import { TBorderRadiusSizes } from '@/Components/UI/Interface/TBorderRadius';
 import { TTheme } from '@/Components/UI/Interface/TTheme';
 

src/Components/UI/Atoms/Typography/Typography.tsx

@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
 import { CSSProp, css } from 'styled-components';
 
 import { IStyledComponentProps, TypographyList } from './TypographyFontVariations.style';
-import themeStore from '../../Design/color/themeStore';
+import themeStore from '../../Design/color/themeStore/themeStore';
 import { generateFontVariants } from './TypographyStyleVariants';
 
 const generateStyle = (externalStyle: CSSProp, fontWeight: 'normal' | 'bold' | undefined) => {

src/Components/UI/Design/color/themeStore/index.ts

@@ -0,0 +1 @@
+export { default as themeStore } from './themeStore';

src/Components/UI/Design/color/themeStore.ts → src/Components/UI/Design/color/themeStore/themeStore.ts

@@ -1,6 +1,6 @@
 import { create } from 'zustand';
-import { updateThemeColors, uiColors, IUiColorPops, regenerateUiColors } from './designColor';
-import { spacingPx, borderRadius, fontSizes } from '../designSizes';
+import { updateThemeColors, uiColors, IUiColorPops, regenerateUiColors } from '../designColor';
+import { spacingPx, borderRadius, fontSizes } from '../../designSizes';
 import { TTheme } from '@/Components/UI/Interface/TTheme';
 import { breakpoints } from '@/Components/UI/Design/brakePoints';
 

src/Components/UI/Design/designFunctions/CalculateBorderRadiusOnAlignment.ts

@@ -1,6 +1,6 @@
 import { css } from 'styled-components';
 
-import themeStore from '@/Components/UI/Design/color/themeStore';
+import themeStore from '@/Components/UI/Design/color/themeStore/themeStore';
 import { TBorderRadiusSizes } from '@/Components/UI/Interface/TBorderRadius';
 export interface IAlignments {
   $alignHorizontal?: 'left' | 'center' | 'right';

src/Components/UI/Design/designFunctions/generateBorderRadiusForComponent/generateBorderRadiusForComponent.ts

@@ -1,6 +1,6 @@
 import { css } from 'styled-components';
 
-import themeStore from '@/Components/UI/Design/color/themeStore';
+import themeStore from '@/Components/UI/Design/color/themeStore/themeStore';
 import { TBorderRadiusSizes } from '@/Components/UI/Interface/TBorderRadius';
 
 export const generateBorderRadiusForComponent = (size?: 'sm' | 'md' | 'lg', rounded?: TBorderRadiusSizes) => {

src/Components/UI/Design/designFunctions/generateItemTheme/generateThemeItem.ts

@@ -4,7 +4,7 @@ import Color from 'color';
 import { disabledStyle } from '../disabledStyle/disableStyle';
 import { generatePadding } from '../generatePaddingForComponent/generatePadding';
 import { boxShadow } from '../../shadows/shadows';
-import themeStore from '../../color/themeStore';
+import themeStore from '../../color/themeStore/themeStore';
 import { getBackgroundColor } from '../../color/colorCalculatorForComponet';
 import { getOpositColorContrast } from '../getOpositColorContrast';
 import { IGenerateThemeItem } from './IGenerateThemeItemProps.model';

src/Components/UI/Design/designFunctions/generatePaddingForComponent/generatePadding.ts

@@ -1,4 +1,4 @@
-import themeStore from '@/Components/UI/Design/color/themeStore';
+import themeStore from '@/Components/UI/Design/color/themeStore/themeStore';
 
 export function generatePadding(offsetPx?: number, spacingLeftRightx2?: boolean) {
   const offset = offsetPx ? offsetPx : 0;

src/Components/UI/Design/designFunctions/generateSytemIncicator.ts

@@ -1,5 +1,5 @@
 import { css } from 'styled-components';
-import themeStore from '../color/themeStore';
+import themeStore from '../color/themeStore/themeStore';
 import { TUiColorsSystemMessage } from '@/Components/UI/Interface/TUiColors';
 
 export function systemMessageIndicatorStyle(systemMessage?: TUiColorsSystemMessage) {

src/Components/UI/Design/designFunctions/generateThemeDesignForComponent/utils/generateTextColor.ts

@@ -1,5 +1,5 @@
 import { getBackgroundColor } from '../../../color/colorCalculatorForComponet';
-import themeStore from '../../../color/themeStore';
+import themeStore from '../../../color/themeStore/themeStore';
 import { IGenerateThemeDesignForComponent } from '../generateThemeDesignForComponent';
 
 // --------------------------------------------------------------------------- //

src/Components/UI/Design/designFunctions/getOpositColorContrast.ts

@@ -2,7 +2,7 @@ import Color from 'color';
 
 import { TThemeTypes } from '@/Components/UI/Interface/TUiColors';
 import { TLayer } from '@/Components/UI/Interface/TLayer';
-import themeStore from '../color/themeStore';
+import themeStore from '../color/themeStore/themeStore';
 
 const filpThemeColor = (isLightColor: boolean) => {
   const isDarkTheme = themeStore.getState().isDarkTheme;

src/Components/UI/Design/designFunctions/getSimpleColorThemeType/getSimpleColorThemeType.ts

@@ -1,5 +1,5 @@
 import { TThemeTypes } from '@/Components/UI/Interface/TUiColors';
-import themeStore from '../../color/themeStore';
+import themeStore from '../../color/themeStore/themeStore';
 
 const getSimpleColorThemeType = (themeType?: TThemeTypes) => {
   const isDarkTheme = themeStore.getState().isDarkTheme;

src/Components/UI/Design/shadows/shadows.ts

@@ -1,5 +1,5 @@
 import { css } from 'styled-components';
-import themeStore from '../color/themeStore';
+import themeStore from '../color/themeStore/themeStore';
 import colorTransparencyCalculator from '../color/colorTransparencyCalculator';
 
 //global text-shadow

src/Components/UI/Molecules/ChipList/ChipList.style.tsx

@@ -1,6 +1,6 @@
 import { css, styled } from 'styled-components';
 
-import themeStore from '@/Components/UI/Design/color/themeStore';
+import themeStore from '@/Components/UI/Design/color/themeStore/themeStore';
 import { systemMessageIndicatorStyle } from '@/Components/UI/Design/designFunctions/generateSytemIncicator';
 import { TUiColorsSystemMessage } from '@/Components/UI/Interface/TUiColorsSystemMessage';
 

src/Components/UI/Molecules/EditBar/EditBar.tsx

@@ -17,7 +17,7 @@ import FancyBottomBarIcon, { IFancyBottomBarIcon } from '../../Templates/FancyBo
 import EditBarModal from '../../Atoms/EditBarModal/EditBarModal';
 
 import DynamicBottomScrollBar from '../DynamicBottomScrollBar/DynamicBottomScrollBar';
-import themeStore from '@/Components/UI/Design/color/themeStore';
+import themeStore from '@/Components/UI/Design/color/themeStore/themeStore';
 
 const Wrapper = styled.div`
   position: fixed;

src/Components/UI/Molecules/FancyContent/utils/sizeSettings.ts

@@ -1,4 +1,4 @@
-import themeStore from '@/Components/UI/Design/color/themeStore';
+import themeStore from '@/Components/UI/Design/color/themeStore/themeStore';
 import { TTypography } from '@/Components/UI/Interface/TTypography';
 
 const getSpacingFromTheme = themeStore.getState().theme.spacing;

src/Components/UI/Molecules/FancySelectWrapper/FancySelectWrapper.tsx

@@ -1,7 +1,7 @@
 import React, { useId } from 'react';
 import { CSSProp } from 'styled-components';
 
-import themeStore from '../../Design/color/themeStore';
+import themeStore from '../../Design/color/themeStore/themeStore';
 import { TAlign, TAlignCheckbox } from '../FancyCheckbox/FancyCheckbox.model';
 import { LabelWrapper, Wrapper } from './FancySelectWrapper.style';
 import FancyContent from '../FancyContent/FancyContent';

src/Components/UI/Molecules/FancyTabSwitchButton/FancyTabSwitchButton.style.tsx

@@ -1,6 +1,6 @@
 import { styled, css } from 'styled-components';
 
-import themeStore from '../../Design/color/themeStore';
+import themeStore from '../../Design/color/themeStore/themeStore';
 import { TThemeTypes } from '@/Components/UI/Interface/TUiColors';
 import { TLayer } from '@/Components/UI/Interface/TLayer';
 import { getBackgroundColor } from '../../Design/color/colorCalculatorForComponet';

src/Components/UI/Molecules/InfoCard/InfoCrad.style.tsx

@@ -1,7 +1,7 @@
 import { css } from 'styled-components';
 
 import { TSizes } from '../../Interface/TComponentSizes';
-import themeStore from '@/Components/UI/Design/color/themeStore';
+import themeStore from '@/Components/UI/Design/color/themeStore/themeStore';
 
 const getTheme = themeStore.getState().theme;
 const sizes = {

src/Components/UI/Molecules/InputWrapper/InputWrapper.tsx

@@ -9,7 +9,7 @@ import { TRawInputAlign } from '../../Atoms/RawInput/RawInput';
 import { TThemeTypes } from '@/Components/UI/Interface/TUiColors';
 import { TLayer } from '@/Components/UI/Interface/TLayer';
 import calcColorState from '../../Design/color/calcColorState';
-import themeStore from '../../Design/color/themeStore';
+import themeStore from '../../Design/color/themeStore/themeStore';
 
 // Define the styles for the icon
 const iconStyle = css`

src/Components/UI/Molecules/TabSwitch/TabSwitch.style.tsx

@@ -6,7 +6,7 @@ import { TTheme } from '@/Components/UI/Interface/TTheme';
 import { TBorderRadiusSizes } from '@/Components/UI/Interface/TBorderRadius';
 import { TThemeTypes } from '@/Components/UI/Interface/TUiColors';
 import { TSpacings } from '../../Interface/TSpacings';
-import themeStore from '../../Design/color/themeStore';
+import themeStore from '../../Design/color/themeStore/themeStore';
 
 // Define the different sizes for the tab switch
 const getSpacingFromTheme = themeStore.getState().theme.spacing;

src/Components/UI/Organisms/FancyChip/FancyChip.style.tsx

@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components';
 
 import { TTheme } from '@/Components/UI/Interface/TTheme';
-import themeStore from '@/Components/UI/Design/color/themeStore';
+import themeStore from '@/Components/UI/Design/color/themeStore/themeStore';
 
 // Define the type for the spacing position
 export type TSpacingPosition = 'left' | 'right' | 'booth';

src/Routes/ColorGeneratorRoute/ColorGeneratorRoute.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import styled, { css } from 'styled-components';
 import { Typography } from '../../lib';
-import themeStore from '../../Components/UI/Design/color/themeStore';
+import themeStore from '../../Components/UI/Design/color/themeStore/themeStore';
 import { TTheme } from '@/Components/UI/Interface/TTheme';
 
 export default function ColorGeneratorRoute() {

src/Routes/ExperimentalRoute/ExperimentalRoute.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import React, { ChangeEvent } from 'react';
 
-import themeStore from '../../Components/UI/Design/color/themeStore';
+import themeStore from '../../Components/UI/Design/color/themeStore/themeStore';
 import { FancyTextInput } from '../../Components/UI/Organisms/FancyTextInput';
 import { FancyBottomBarIcon, FancyButton, FancyCard, FancyChip, FancySVGAtom, SingleToastMessage } from '../../lib';
 

src/Routes/HeaderRoute/HeaderRoute.tsx

@@ -10,7 +10,7 @@ import { Typography } from '../../lib';
 import styled from 'styled-components';
 import FancyBar from '../../Components/UI/Atoms/FancyBox/FancyBox';
 import Header from '../../Components/UI/Molecules/Header/Header';
-import themeStore from '@/Components/UI/Design/color/themeStore';
+import themeStore from '@/Components/UI/Design/color/themeStore/themeStore';
 
 const Logo = () => (
   <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" height="30" version="1.1" viewBox="0 0 96.37 64.15" fill="#ff9800f0">