From aa0f8a51a6adba273d0f4ac283aa8aee6bcd5be0 Mon Sep 17 00:00:00 2001 From: MrTRyy Date: Thu, 16 May 2024 17:45:00 +0200 Subject: [PATCH 1/4] refactor: Update InputWrapper style to include border-radius --- src/components/molecules/InputWrapper/InputWrapper.style.tsx | 3 ++- src/components/molecules/InputWrapper/InputWrapper.tsx | 5 ++++- src/components/molecules/InputWrapper/TInputWrapper.model.ts | 1 + 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/molecules/InputWrapper/InputWrapper.style.tsx b/src/components/molecules/InputWrapper/InputWrapper.style.tsx index 4a2b6486..3de9101c 100644 --- 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 index 5503013f..7f5dda87 100644 --- 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 ( - + ; export type TInputWrapperUserInputProps = Omit< From 34b42184445d386fe31e6bf3de80f0ea91a7ebca Mon Sep 17 00:00:00 2001 From: MrTRyy Date: Thu, 16 May 2024 17:45:32 +0200 Subject: [PATCH 2/4] chore: Update outlined background strength to 0.5 --- .../generateThemeDesignForComponents.mdx | 2 +- .../utils/generateOutlineStyle.ts | 2 +- .../utils/generateTransparentStyle.ts | 14 +++++++++++--- .../generateThemeForCard/generateThemeForCard.ts | 14 ++++++++++---- .../TgenerateThemeToCssVars.model.ts | 2 +- src/design/theme/themeStore/themeStore.ts | 3 +++ src/types/TTheme.ts | 3 +++ 7 files changed, 30 insertions(+), 10 deletions(-) diff --git a/src/design/designFunctions/generateThemeDesignForComponent/generateThemeDesignForComponents.mdx b/src/design/designFunctions/generateThemeDesignForComponent/generateThemeDesignForComponents.mdx index 66b64f40..f9fa94d6 100644 --- a/src/design/designFunctions/generateThemeDesignForComponent/generateThemeDesignForComponents.mdx +++ b/src/design/designFunctions/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 index b1a68310..837b445a 100644 --- 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 index c6466fc8..f4e1eac1 100644 --- 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 index 36c9d3c0..965df706 100644 --- 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 & 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 index fe1a06ec..3188829d 100644 --- 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 index cbdfa44c..47b458d1 100644 --- a/src/design/theme/themeStore/themeStore.ts +++ b/src/design/theme/themeStore/themeStore.ts @@ -22,6 +22,9 @@ const themeStore = create((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 index bd1cdd4e..560db857 100644 --- 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; + }; }; From ffb59668b60655f0c4c90038676f5a1c93c1eba9 Mon Sep 17 00:00:00 2001 From: MrTRyy Date: Thu, 16 May 2024 17:45:55 +0200 Subject: [PATCH 3/4] refactor: Update FancyToastMessage to use