docu: for some functions

src/design/designFunctions/calcBorderRadiusOnAlignment/calcBorderRadiusOnAlignment.mdx

@@ -0,0 +1,37 @@
+# `calcBorderRadiusOnAlignment` Component
+
+The `calcBorderRadiusOnAlignment` function is designed to set the border radius on an element based on its alignment properties. This function is a part of a styled-components setup and leverages CSS-in-JS.
+
+## Input/Output
+
+### Input
+
+- **$alignHorizontal** (`'left' | 'center' | 'right'`, optional): Specifies the horizontal alignment of the element.
+- **$alignVertical** (`'top' | 'center' | 'bottom'`, optional): Specifies the vertical alignment of the element.
+- **$rouned** (`TBorderRadiusSizes`, optional): Specifies the border radius size.
+
+### Output
+
+- **Return Value**: A CSS snippet (from `styled-components`) that sets the border radius based on the given alignment properties.
+
+## Example Usage
+
+```jsx
+import React from 'react';
+import styled from 'styled-components';
+import { calcBorderRadiusOnAlignment } from 'path-to-calcBorderRadiusOnAlignment';
+
+const StyledDiv = styled.div`
+  ${(props) => calcBorderRadiusOnAlignment(props)}
+`;
+
+const ExampleComponent = () => (
+  <StyledDiv $alignHorizontal="left" $alignVertical="top" $rouned="lg">
+    Content
+  </StyledDiv>
+);
+
+export default ExampleComponent;
+```
+
+In this example, `calcBorderRadiusOnAlignment` is used in a styled component to dynamically set the border radius based on the alignment properties of the element.

src/design/designFunctions/checkThemeOrColor/checkThmeOrColor.mdx

@@ -0,0 +1,46 @@
+# `checkThemeOrColor` Function
+
+The `checkThemeOrColor` function is designed to determine whether a given input is a color value or a theme color group, and then returns the appropriate color string. It's an essential utility for handling theming and color validation in your application.
+
+## Input/Output
+
+### Input
+
+- **color** (`string | TthemeColorGroup`, optional): The color input, which can be a string representing a color or a `TthemeColorGroup` object.
+
+### Output
+
+- **Return Value**: A string representing the valid color, or an empty string if the input is invalid.
+
+## Dependencies
+
+- `TthemeColorGroup` from `'../../theme/designColor'`: A type representing the theme color groups.
+- `isColorValid` from `'../../../utils/validations/isColorValid/isColorValid'`: A utility function to validate color strings.
+
+## Example Usage
+
+```jsx
+import React from 'react';
+import { checkThemeOrColor } from 'path-to-checkThemeOrColor';
+
+const ExampleComponent = () => {
+  const color = checkThemeOrColor('blue'); // Assuming 'blue' is a valid color or theme color group
+  const invalidColor = checkThemeOrColor('invalid-color'); // Example of an invalid color
+
+  return (
+    <div>
+      <div>Valid Color: {color}</div>
+      <div>Invalid Color: {invalidColor}</div>
+    </div>
+  );
+};
+
+export default ExampleComponent;
+```
+
+This example demonstrates how the `checkThemeOrColor` function can be used in a React component to validate color inputs. It provides outputs based on the validity of the provided colors.
+
+```
+
+This documentation gives a clear overview of the function, its input/output structure, dependencies, and a practical example of its usage in a React component context.
+```

src/design/designFunctions/colorCalculatorForComponent/colorCalculatorForComponent.mdx

@@ -0,0 +1,75 @@
+# `getColorsForComponent` and Related Functions
+
+The `getColorsForComponent` function, along with its helper functions `getBackgroundColor` and `getTextColor`, are used to determine the appropriate background and text colors for a component based on the given theme and color properties. These functions are part of a styled-components setup and return CSS strings.
+
+## `getBackgroundColor` Function
+
+### Input
+
+- **theme** (`TTheme`): The current theme object.
+- **$themeType** (`TThemeTypes`): The type of the theme.
+- **$customColor** (`string | TthemeColorGroup`, optional): A custom color value.
+- **$layer** (`number`, optional): The layer index in the theme color group.
+
+### Output
+
+- **Return Value**: A styled-component CSS string for the background color.
+
+## `getTextColor` Function
+
+### Input
+
+- **theme** (`TTheme`): The current theme object.
+- **$themeType** (`TThemeTypes`): The type of the theme.
+- **$customTextColor** (`string | TthemeColorGroup`, optional): A custom text color value.
+- **$textLayer** (`number`, optional): The layer index in the theme color group.
+- **turnColorTheme** (`boolean`, optional): A flag to toggle theme color changes.
+
+### Output
+
+- **Return Value**: A styled-component CSS string for the text color.
+
+## `getColorsForComponent` Function
+
+### Input
+
+- **theme** (`TTheme`): The current theme object.
+- **$themeType** (`TThemeTypes`): The type of the theme.
+- **$customColor** (`string | TthemeColorGroup`, optional): A custom color value.
+- **$customTextColor** (`string | TthemeColorGroup`, optional): A custom text color value.
+- **$layer** (`number`, optional): The layer index in the theme color group for the background.
+- **$textLayer** (`number`, optional): The layer index in the theme color group for the text.
+
+### Output
+
+- **Return Value**: Combined styled-component CSS strings for both background and text colors.
+
+## Example Usage
+
+```jsx
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import getColorsForComponent from 'path-to-getColorsForComponent';
+import myTheme from 'path-to-myTheme';
+
+const MyComponent = () => {
+  const componentStyles = getColorsForComponent({
+    theme: myTheme,
+    $themeType: 'primary',
+    $layer: 0,
+    $textLayer: 1,
+  });
+
+  return <div css={componentStyles}>Hello, World!</div>;
+};
+
+const App = () => (
+  <ThemeProvider theme={myTheme}>
+    <MyComponent />
+  </ThemeProvider>
+);
+
+export default App;
+```
+
+This example demonstrates the use of `getColorsForComponent` in a React component with a styled-components `ThemeProvider`.

src/design/designFunctions/colorTransparencyCalculator/colorTransparencyCalculator.mdx

@@ -0,0 +1,38 @@
+# `colorTransparencyCalculator` Function
+
+The `colorTransparencyCalculator` is a function designed to calculate the RGBA color string of a given color with a specified transparency level. It validates the color and ensures the transparency is within the acceptable range.
+
+## Input/Output
+
+### Input
+
+- **color** (`string`): The base color in any valid CSS color format.
+- **transparency** (`number`): A decimal between 0 and 1 representing the transparency level.
+
+### Output
+
+- **Return Value**: An RGBA color string, or a default error color string if inputs are invalid.
+
+## Error Handling
+
+- Throws an error if `transparency` is not between 0 and 1.
+- Logs an error and returns a default color string if the input color is invalid.
+
+## Example Usage
+
+```jsx
+import React from 'react';
+import { colorTransparencyCalculator } from 'path-to-colorTransparencyCalculator';
+
+const ExampleComponent = () => {
+  const color = '#FF5733'; // Example color
+  const transparency = 0.5; // Example transparency level
+
+  const resultColor = colorTransparencyCalculator(color, transparency);
+  return <div style={{ backgroundColor: resultColor }}>Color with Transparency</div>;
+};
+
+export default ExampleComponent;
+```
+
+This example demonstrates how to use the `colorTransparencyCalculator` function in a React component. The resulting RGBA string is used to set the background color of a `div` element.

src/design/designFunctions/disabledStyle/disableStyle.mdx

@@ -0,0 +1,31 @@
+# `disabledStyle` Function
+
+The `disabledStyle` function is a utility designed to apply a disabled style to UI components. It uses styled-components to generate a CSS fragment that can be applied to components to visually indicate a disabled state.
+
+## Output
+
+- **Return Value**: A CSS fragment from styled-components. It includes styles that reduce the opacity and adjust the brightness to give a disabled appearance to the component.
+
+## Example Usage
+
+```jsx
+import styled from 'styled-components';
+import { disabledStyle } from 'path-to-disabledStyle';
+
+const StyledButton = styled.button`
+  /* Basic button styling */
+  padding: 10px 20px;
+  border: none;
+  background-color: blue;
+  color: white;
+
+  /* Apply disabled styling */
+  &:disabled {
+    ${disabledStyle}
+  }
+`;
+```
+
+In this example, the `StyledButton` is a styled button component that applies the `disabledStyle` when the `isDisabled` prop is true. The `disabledStyle` function returns CSS rules that change the appearance of the button, making it look disabled.
+
+Note: This example assumes the use of styled-components and does not include any inline CSS or additional props for styling.

src/design/designFunctions/edgeCalculation/edgeCalculation.mdx

@@ -0,0 +1,32 @@
+# `edgeCalculation` Function
+
+The `edgeCalculation` function is designed to compute the border-radius values for UI elements based on an array of up to four values. This function supports various types of inputs for the radius values, including predefined sizes from a theme, string, or number.
+
+## Input/Output
+
+### Input
+
+- **edges** (`IRoundedEdges`, optional): An array of up to four elements, each representing the border-radius for a corresponding edge (top, right, bottom, left). Each edge can be a `TBorderRadiusSizes`, `string`, or `number`.
+
+### Output
+
+- **Return Value**: A string representing the calculated border-radius values for each edge. The output format is suitable for CSS styling.
+
+## Example Usage
+
+```jsx
+import React from 'react';
+import { edgeCalculation } from 'path-to-edgeCalculation';
+
+const BoxComponent = () => {
+  const borderRadius = edgeCalculation(['small', 10, 'medium', 'large']);
+
+  return <div style={{ borderRadius: borderRadius }}>Styled Box</div>;
+};
+
+export default BoxComponent;
+```
+
+In this example, `edgeCalculation` is used to determine the border-radius for a `div` element. The array passed to `edgeCalculation` includes a mix of predefined size keys ('small', 'medium', 'large') and direct values (10), demonstrating the function's flexibility.
+
+Note: Ensure that the `borderRadius` object from your theme and the `TBorderRadiusSizes` type are correctly set up to use this function effectively.

src/design/designFunctions/flipThemeColor/flipThemeColor.mdx

@@ -0,0 +1,31 @@
+# `flipThemeColor` Function
+
+The `flipThemeColor` function is designed to flip the color theme based on the lightness of the current theme color and the overall theme setting (light or dark). It utilizes the `themeStore` to access the current theme and the `Color` library to determine the lightness of a color.
+
+## Input/Output
+
+### Input
+
+- **color** (`TThemeTypes`): The type of the theme color to be flipped.
+- **layer** (`TLayer`, optional): An optional layer parameter to specify a particular layer of the theme color.
+
+### Output
+
+- **Return Value**: A string representing the flipped color based on the theme's lightness and the specified layer.
+
+## Example Usage
+
+```jsx
+import React from 'react';
+import { flipThemeColor } from 'path-to-flipThemeColor';
+
+const ExampleComponent = () => {
+  const flippedColor = flipThemeColor('background', 'layer1');
+
+  return <div style={{ backgroundColor: flippedColor }}>Flipped Theme Color</div>;
+};
+
+export default ExampleComponent;
+```
+
+This example demonstrates how to use the `flipThemeColor` function in a React component. It calculates the flipped color for a specified theme color and layer, and then applies it to the background color of a `div` element.

src/design/designFunctions/flipThemeColor/flipThemeColor.ts

@@ -8,16 +8,23 @@ const filpColor = (isLightColor: boolean) => {
   const isDarkTheme = themeStore.getState().isDarkTheme;
   const theme = themeStore.getState().theme;
 
-  if (!isDarkTheme) return isLightColor ? theme.colors['secondary'] : theme.colors['primary'];
-  else return isLightColor ? theme.colors['primary'] : theme.colors['secondary'];
+  // If the theme is not dark, return the appropriate color based on the isLightColor parameter
+  if (!isDarkTheme) {
+    return isLightColor ? theme.colors['secondary'] : theme.colors['primary'];
+  } else {
+    // If the theme is dark, return the appropriate color based on the isLightColor parameter
+    return isLightColor ? theme.colors['primary'] : theme.colors['secondary'];
+  }
 };
 
 export default function flipThemeColor(color: TThemeTypes, layer?: TLayer) {
   const theme = themeStore.getState().theme;
 
+  // Check if the current color is light or dark
   const isCurrentColorLight = Color(theme.colors[color][layer || 0]).isLight();
 
-  const getFlipedColor = filpColor(isCurrentColorLight);
+  // Get the flipped color based on the current color's lightness
+  const getFlippedColor = filpColor(isCurrentColorLight);
 
-  return getFlipedColor[layer || 0];
+  return getFlippedColor[layer || 0];
 }

src/design/designFunctions/generateBorderRadiusForComponent/generateBorderRadiusForComponents.mdx

@@ -0,0 +1,34 @@
+# `generateBorderRadiusForComponent` Function
+
+The `generateBorderRadiusForComponent` function is designed to generate CSS for the border-radius property of a component. It utilizes the `themeStore` to access predefined border-radius values and applies them based on the specified size or custom rounded value.
+
+## Input/Output
+
+### Input
+
+- **size** (`'sm' | 'md' | 'lg'`, optional): Specifies the predefined size of the border-radius ('small', 'medium', 'large').
+- **rounded** (`TBorderRadiusSizes`, optional): Custom border-radius size defined in the `TBorderRadius` type.
+
+### Output
+
+- **Return Value**: A CSS snippet (`css` from 'styled-components') setting the border-radius of the component.
+
+## Example Usage
+
+```jsx
+import React from 'react';
+import styled from 'styled-components';
+import { generateBorderRadiusForComponent } from 'path-to-generateBorderRadiusForComponent';
+
+const StyledDiv = styled.div`
+  ${generateBorderRadiusForComponent('md')}
+`;
+
+const ExampleComponent = () => {
+  return <StyledDiv>Content with medium border radius</StyledDiv>;
+};
+
+export default ExampleComponent;
+```
+
+This example shows how to use the `generateBorderRadiusForComponent` function to apply a medium border-radius to a styled `div` component in a React application.