Merge pull request #293 from TobiTRy/fix-some-issue

Fix some issue
TobiTRy · May 16, 2024 · 47f0b58 · 47f0b58
2 parents 2d178aa + 2a122b3
commit 47f0b58
Show file tree

Hide file tree

Showing 19 changed files with 86 additions and 15 deletions.
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
     "name": "TobiTRy"
   },
   "private": false,
-  "version": "0.4.8",
+  "version": "0.4.9",
   "type": "module",
   "scripts": {
     "dev": "vite",

diff --git a/src/Routes/ExperimentalRoute/ExperimentalRoute.tsx b/src/Routes/ExperimentalRoute/ExperimentalRoute.tsx
@@ -19,6 +19,7 @@ import createMultiIntersectionObserver from '@/utils/hooks/useMiltiIntersectionO
 import { FancyVirtualScroll } from '@/components/shared/FancyVirtualScroll';
 import ActionItem from '@/components/molecules/ActionItem/ActionItem';
 import { AutoSizingBox } from '@/components/atoms/AutoSizingBox';
+import { FancyBox } from '@/components/atoms/FancyBox';
 
 const Icon = (
   <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
@@ -146,6 +147,9 @@ export default function ExperimentalRoute() {
     <>
       <DesignWrapper>
         <DesignArea title="Test">
+          <FancyBox themeType="secondary" outlined>
+            Mooiin
+          </FancyBox>
           <AutoSizingBox adjustHeight>
             <Button sizeC={undefined} onClick={addContent}>
               Mooiin

diff --git a/src/components/molecules/InputWrapper/InputWrapper.style.tsx b/src/components/molecules/InputWrapper/InputWrapper.style.tsx
@@ -3,12 +3,13 @@ import { styled, css } from 'styled-components';
 import { disabledStyle } from '@/design/designFunctions/disabledStyle';
 import { TTheme } from '@/types/TTheme';
 
-export const StyledInputWrapper = styled.div<{ disabled?: boolean; $autoWidth?: boolean }>`
+export const StyledInputWrapper = styled.div<{ disabled?: boolean; $autoWidth?: boolean; theme: TTheme }>`
   position: relative;
   display: grid;
   grid-template-columns: auto 1fr auto;
   grid-template-rows: 1fr auto;
   width: ${({ $autoWidth }) => ($autoWidth ? 'auto' : '100%')};
+  border-radius: ${({ theme }) => theme.borderRadius.sm};
 
   ${({ disabled }) => (disabled ? disabledStyle : '')};
 `;

diff --git a/src/components/molecules/InputWrapper/InputWrapper.tsx b/src/components/molecules/InputWrapper/InputWrapper.tsx
@@ -33,22 +33,25 @@ export default function InputWrapper(props: TInputWrapper) {
     layer = 2,
     outlined,
     outlinedBackgroundStrength,
+    outlinedRemoveBorder,
     themeType = 'primary',
     transparentBackground,
     externalStyle,
     labelVariant,
+    className,
   } = props;
 
   const theme = themeStore((state) => state.theme);
 
   // Render the InputWrapper component with the appropriate props
   return (
-    <StyledInputWrapper disabled={disabled} $autoWidth={autoWidth}>
+    <StyledInputWrapper disabled={disabled} className={className} $autoWidth={autoWidth}>
       <FancyBox
         themeType={transparentBackground ? 'transparent' : themeType}
         layer={layer}
         outlined={outlined}
         outlinedBackgroundStrength={outlinedBackgroundStrength}
+        outlinedRemoveBorder={outlinedRemoveBorder}
         externalStyle={css`
           ${generateInputContainerStyle(!!label, isActive, theme)}
           ${externalStyle}

diff --git a/src/components/molecules/InputWrapper/TInputWrapper.model.ts b/src/components/molecules/InputWrapper/TInputWrapper.model.ts
@@ -23,6 +23,7 @@ export type TInputWrapper = {
   placeholder?: string;
   transparentBackground?: boolean;
   labelVariant?: 'static' | 'animated';
+  className?: string;
 } & Exclude<TFancyBox, 'as' | 'themeType' | 'externalStyle' | 'borderRadius' | 'sizeC'>;
 
 export type TInputWrapperUserInputProps = Omit<

diff --git a/src/components/organisms/FancyDateInput/FancyDateInput.tsx b/src/components/organisms/FancyDateInput/FancyDateInput.tsx
@@ -23,7 +23,10 @@ export default function FancyDateInput(props: TFancyDateInput) {
     underline,
     onChange,
     transparentBackground,
+    outlinedBackgroundStrength,
+    outlinedRemoveBorder,
     externalStyle,
+    className,
     ...inputProps
   } = props;
 
@@ -57,8 +60,11 @@ export default function FancyDateInput(props: TFancyDateInput) {
       underline={underline}
       layer={layer}
       align={align}
+      className={className}
       isActive={isActiveState}
       icon={icon}
+      outlinedBackgroundStrength={outlinedBackgroundStrength}
+      outlinedRemoveBorder={outlinedRemoveBorder}
       systemMessage={systemMessage}
       transparentBackground={transparentBackground}
       externalStyle={externalStyle}

diff --git a/src/components/organisms/FancyDropDownSelect/FancyDropDownSelect.tsx b/src/components/organisms/FancyDropDownSelect/FancyDropDownSelect.tsx
@@ -20,6 +20,8 @@ export default function FancyDropDownSelect(props: TFancyDropDownSelect) {
     themeType,
     outlined,
     outlinedBackgroundStrength,
+    outlinedRemoveBorder,
+    className,
     layer,
     onFocus,
     onBlur,
@@ -44,6 +46,8 @@ export default function FancyDropDownSelect(props: TFancyDropDownSelect) {
       label={label}
       outlined={outlined}
       outlinedBackgroundStrength={outlinedBackgroundStrength}
+      outlinedRemoveBorder={outlinedRemoveBorder}
+      className={className}
       disabled={disabled}
       align={align}
       isActive={isActive}

diff --git a/src/components/organisms/FancyNumberInput/FancyNumberInput.tsx b/src/components/organisms/FancyNumberInput/FancyNumberInput.tsx
@@ -26,7 +26,11 @@ export default function FancyNumberInput(props: TFancyNumberInput) {
     onFocus,
     onBlur,
     transparentBackground,
+    outlined,
+    outlinedBackgroundStrength,
+    outlinedRemoveBorder,
     externalStyle,
+    className,
     ...inputProps
   } = props;
 
@@ -52,6 +56,10 @@ export default function FancyNumberInput(props: TFancyNumberInput) {
       systemMessage={systemMessage}
       themeType={themeType}
       layer={layer}
+      className={className}
+      outlined={outlined}
+      outlinedBackgroundStrength={outlinedBackgroundStrength}
+      outlinedRemoveBorder={outlinedRemoveBorder}
       transparentBackground={transparentBackground}
       InputElement={
         <NumberInput

diff --git a/src/components/organisms/FancyPasswordInput/FancyPasswordInput.tsx b/src/components/organisms/FancyPasswordInput/FancyPasswordInput.tsx
@@ -25,6 +25,10 @@ export default function FancyPasswordInput(props: TFancyPasswordInput) {
     underline,
     onBlur,
     transparentBackground,
+    outlined,
+    outlinedBackgroundStrength,
+    outlinedRemoveBorder,
+    className,
     ...inputProps
   } = props;
 
@@ -48,8 +52,12 @@ export default function FancyPasswordInput(props: TFancyPasswordInput) {
       underline={underline}
       isActive={isActive}
       icon={icon}
+      className={className}
       systemMessage={systemMessage}
       transparentBackground={transparentBackground}
+      outlined={outlined}
+      outlinedBackgroundStrength={outlinedBackgroundStrength}
+      outlinedRemoveBorder={outlinedRemoveBorder}
       InputElement={
         <PasswordInput
           id={usedId}

diff --git a/src/components/organisms/FancyRangeSlider/FancyRangeSlider.tsx b/src/components/organisms/FancyRangeSlider/FancyRangeSlider.tsx
@@ -27,7 +27,11 @@ export default function FancyRangeSlider(props: TFancyRangeSlider) {
     align,
     placeholder,
     themeType,
+    outlined,
+    outlinedBackgroundStrength,
+    outlinedRemoveBorder,
     disabled,
+    className,
     ...sliderProps
   } = props;
 
@@ -65,6 +69,10 @@ export default function FancyRangeSlider(props: TFancyRangeSlider) {
       id={usedId}
       label={label}
       hasValue={toutched}
+      outlined={outlined}
+      outlinedBackgroundStrength={outlinedBackgroundStrength}
+      outlinedRemoveBorder={outlinedRemoveBorder}
+      className={className}
       underline={false}
       isActive={toutched}
       transparentBackground={transparentBackground}

diff --git a/src/components/organisms/FancyTextInput/FancyTextInput.tsx b/src/components/organisms/FancyTextInput/FancyTextInput.tsx
@@ -23,7 +23,11 @@ export default function FancyTextInput(props: TFancyTextInput) {
     type = 'text',
     underline,
     onBlur,
+    outlined,
+    outlinedBackgroundStrength,
+    outlinedRemoveBorder,
     transparentBackground,
+    className,
     ...inputProps
   } = props;
 
@@ -47,8 +51,12 @@ export default function FancyTextInput(props: TFancyTextInput) {
       isActive={isActive}
       underline={underline}
       icon={icon}
+      className={className}
       systemMessage={systemMessage}
       transparentBackground={transparentBackground}
+      outlined={outlined}
+      outlinedBackgroundStrength={outlinedBackgroundStrength}
+      outlinedRemoveBorder={outlinedRemoveBorder}
       InputElement={
         <TextInput
           id={usedId}

diff --git a/src/components/organisms/FancyToastMessage/FancyToastMessage.tsx b/src/components/organisms/FancyToastMessage/FancyToastMessage.tsx
@@ -55,13 +55,13 @@ export default function FancyToastMessage() {
   return (
     <ToastsWrapper>
       {transitions(({ ...style }, item: TToastMessage) => (
-        <animated.div key={item.id} style={style}>
+        <animated.aside role="alert" key={item.id} style={style}>
           <SingleToastMessage
             ref={(ref: HTMLDivElement) => ref && refMap.set(item, ref)}
             toast={item}
             remove={removeToast}
           />
-        </animated.div>
+        </animated.aside>
       ))}
     </ToastsWrapper>
   );

diff --git a/...nFunctions/generateThemeDesignForComponent/generateThemeDesignForComponents.mdx b/...nFunctions/generateThemeDesignForComponent/generateThemeDesignForComponents.mdx
@@ -35,7 +35,7 @@ const ExampleComponent = () => {
   const styleProps = {
     themeType: 'accent', // accent is default
     outlined: false, // false is default
-    backgroundStrength: 0.05, // 0.05 is default
+    backgroundStrength: 0.5, // 0.05 is default
     backgroundState: 'hover', // hover is default
   };
 

diff --git a/src/design/designFunctions/generateThemeDesignForComponent/utils/generateOutlineStyle.ts b/src/design/designFunctions/generateThemeDesignForComponent/utils/generateOutlineStyle.ts
@@ -18,7 +18,7 @@ type TGenerateOutlineStyle = Pick<
 // ------- Generates the style for a outlined box or other compoent ---------- //
 // --------------------------------------------------------------------------- //
 export const generateOutlineStyle = (props: TGenerateOutlineStyle) => {
-  const { $themeType, theme, $layer, $backgroundState, $backgroundStrength = 0.05, $textColor } = props;
+  const { $themeType, theme, $layer, $backgroundState, $backgroundStrength = 0.1, $textColor } = props;
 
   // generates the color for the border
   const borderColor = getBackgroundColor({ theme, $themeType: $themeType ?? 'primary', $layer: $layer ?? 0 });

diff --git a/src/design/designFunctions/generateThemeDesignForComponent/utils/generateTransparentStyle.ts b/src/design/designFunctions/generateThemeDesignForComponent/utils/generateTransparentStyle.ts
@@ -3,6 +3,7 @@ import { css } from 'styled-components';
 import { IGenerateThemeDesignForComponent } from '../generateThemeDesignForComponent';
 import { generateStateStyle } from './generateHoverActiveColor';
 import { generateTextColor } from './generateTextColor';
+import { themeStore } from '@/design/theme/themeStore';
 
 type TGenerateTransparentStyle = Pick<
   IGenerateThemeDesignForComponent,
@@ -15,17 +16,24 @@ type TGenerateTransparentStyle = Pick<
   | '$textColor'
   | '$textHover'
 >;
-// --------------------------------------------------------------------------- //
+// -------------------------------------------------------- //
 // ---------- generates a transparent background ---------- //
-// --------------------------------------------------------------------------- //
+// --------------------------------------------------------- //
 export const generateTransparentStyle = (props: TGenerateTransparentStyle) => {
   const { $backgroundState, $textColor, $backgroundStrength = 0.3, $layer, $textHover } = props;
 
+  const getBackgroundStrength = themeStore((state) => state.theme.outlined.backgroundStrength);
+
   return css`
     color: ${generateTextColor({ $layer, $themeType: $textColor })};
     ${$backgroundState !== 'active' && 'background-color: transparent'};
     /* This generate the hover / active style if its needed */
     ${$backgroundState &&
-    generateStateStyle({ ...props, $backgroundStrength, $textHover: $textHover, $textColor: $textColor })}
+    generateStateStyle({
+      ...props,
+      $backgroundStrength: $backgroundStrength || getBackgroundStrength,
+      $textHover: $textHover,
+      $textColor: $textColor,
+    })}
   `;
 };
diff --git a/src/design/designFunctions/generateThemeForCard/generateThemeForCard.ts b/src/design/designFunctions/generateThemeForCard/generateThemeForCard.ts
@@ -4,6 +4,7 @@ import { TStyledPrefixAndPicker } from '../../../types/TStyledPrefixAndPicker';
 import { getBackgroundColor } from '../colorCalculatorForComponent/colorCalculatorForComponent';
 import colorTransparencyCalculator from '../colorTransparencyCalculator/colorTransparencyCalculator';
 import { IGenerateThemeForCardProps } from './IGenerateThemeForCardProps';
+import { themeStore } from '@/design/theme/themeStore';
 
 const generateOutlineStyle = (props: TGenerateColorDesign) => {
   const { $themeType, theme, $layer = 3, $outlinedBackgroundStrength = 0.5, $outlinedRemoveBorder } = props;
@@ -18,8 +19,12 @@ const generateOutlineStyle = (props: TGenerateColorDesign) => {
   );
 
   return css`
-    background-color: ${$outlinedRemoveBorder && generateSlightBackgroundColor};
-    border: 1.5px solid ${backgroundColor};
+    background-color: ${generateSlightBackgroundColor};
+
+    ${!$outlinedRemoveBorder &&
+    css`
+      border: 1.5px solid ${backgroundColor};
+    `};
   `;
 };
 
@@ -30,8 +35,9 @@ type TGenerateColorDesign = TStyledPrefixAndPicker<IGenerateThemeForCardProps> &
   theme: TTheme;
 };
 export default function generateThemeForCard(props: TGenerateColorDesign) {
-  const { $themeType, theme, $outlined, $layer, $outlinedBackgroundStrength, $outlinedRemoveBorder = true } = props;
+  const { $themeType, theme, $outlined, $layer, $outlinedBackgroundStrength, $outlinedRemoveBorder } = props;
   let outlinedStyle, backgroundColor;
+  const getBackgroundStrength = themeStore((state) => state.theme.outlined.backgroundStrength);
 
   // generate the outlined style if the outlined prop is true else generate only the background color
   if ($outlined) {
@@ -40,7 +46,7 @@ export default function generateThemeForCard(props: TGenerateColorDesign) {
       $themeType,
       theme,
       $layer,
-      $outlinedBackgroundStrength,
+      $outlinedBackgroundStrength: $outlinedBackgroundStrength || getBackgroundStrength,
       $outlinedRemoveBorder,
     });
   } else {

diff --git a/src/design/theme/generateThemeToCssVars/TgenerateThemeToCssVars.model.ts b/src/design/theme/generateThemeToCssVars/TgenerateThemeToCssVars.model.ts
@@ -1,4 +1,4 @@
-export type TThemeValue = string | TThemeObject;
+export type TThemeValue = string | number | TThemeObject;
 
 export type TThemeObject = {
   [key: string]: TThemeValue;

diff --git a/src/design/theme/themeStore/themeStore.ts b/src/design/theme/themeStore/themeStore.ts
@@ -22,6 +22,9 @@ const themeStore = create<ThemeState>((set) => ({
     fontSizes: typography,
     breakpoints: breakpoints,
     globalElementSizes: globalElementsizes,
+    outlined: {
+      backgroundStrength: 0.5,
+    },
   },
   isDarkTheme: true,
   switchTheme: () => {

diff --git a/src/types/TTheme.ts b/src/types/TTheme.ts
@@ -21,4 +21,7 @@ export type TTheme = {
   globalElementSizes: {
     [key in keyof typeof globalElementsizes]: string;
   };
+  outlined: {
+    backgroundStrength: number;
+  };
 };