@liguelead/design-system 0.0.23 → 0.0.24

package/components/Button/Button.appearance.ts

@@ -1,28 +1,40 @@
-import { ButtonVariantTypes} from './Button.types'
+import { ButtonVariantTypes } from './Button.types'
 import { colorType } from '../../types'
 import { useTheme } from 'styled-components'
-import {darkenOrLighten, getTextColor, parseColor} from '../../utils'
+import { darkenOrLighten, getTextColor, parseColor, getHoverColor } from '../../utils'
+
 
 export const ButtonVariant = (
     color: colorType,
     variant: ButtonVariantTypes
 ) => {
-    const theme = useTheme()
-    const parsedColor = parseColor(theme.colors[color])
+    const theme = useTheme();
+
+    const colorValue = theme.colors[color];
+
+    if (!colorValue) {
+        return '';
+    }
 
-    const solidtextColor = parseColor(theme.colors[getTextColor(parsedColor)])
+    const parsedColor = parseColor(colorValue);
 
-    const colorHover = darkenOrLighten(0.2, parsedColor)
+    const hoverBackground = getHoverColor(color, parsedColor, theme);
 
-    const variants = {
+    const solidtextColor = parseColor(theme.colors[getTextColor(parsedColor)]);
+
+    const colorHover = darkenOrLighten(0.2, parsedColor);
+
+    const variants: Record<ButtonVariantTypes, string> = {
         solid: `
         background-color: ${parsedColor};
         color: ${solidtextColor};
         border: 1px solid ${parsedColor};
+
         &:hover {
-            background-color: ${colorHover};
+            background-color: ${hoverBackground};
             border-color: ${colorHover};
         }
+
         &:disabled {
             background-color: ${parsedColor}80;
             color: ${solidtextColor}cc;
@@ -59,8 +71,44 @@ export const ButtonVariant = (
             color: ${parseColor(theme.colors.neutral1100)}80;
             cursor: not-allowed;
         }
+    `,
+        neutralOutline: `
+        background-color: transparent;
+        color: ${parseColor(theme.colors.textDark)};
+        border: 1px solid ${parseColor(theme.colors.neutral900)};
+
+        &:hover {
+            background-color: ${parseColor(theme.colors.primaryDarker)};
+            color: ${parseColor(theme.colors.textLight)};
+            border-color: ${parseColor(theme.colors.neutral400)};
+        }
+
+        &:disabled {
+            background-color: transparent;
+            color: ${parseColor(theme.colors.textDark)}80;
+            border-color: ${parseColor(theme.colors.neutral400)}80;
+            cursor: not-allowed;
+        }
+    `,
+        neutralGhost: `
+        background-color: transparent;
+        color: ${parseColor(theme.colors.textDark)};
+        border: 1px solid transparent;
+        &:hover {
+            background-color: ${parseColor(theme.colors.neutral1000)};
+            color: ${parseColor(theme.colors.textLight)};
+        }
+        &:disabled {
+            background-color: transparent;
+            color: ${parseColor(theme.colors.textDark)}80;
+            cursor: not-allowed;
+        }
     `
+    };
+
+    if (!variants[variant]) {
+        return '';
     }
 
-    return variants[variant]
+    return variants[variant];
 }

package/components/Button/Button.types.ts

@@ -1,7 +1,7 @@
 import { colorType } from '../../types'
 
 export type ButtonSizeTypes = 'sm' | 'md' | 'lg'
-export type ButtonVariantTypes = 'solid' | 'outline' | 'ghost'
+export type ButtonVariantTypes = 'solid' | 'outline' | 'ghost' | 'neutralOutline' | 'neutralGhost'
 
 export interface ButtonProps {
     variant?: ButtonVariantTypes

package/components/Dialog/Dialog.style.ts

@@ -3,6 +3,8 @@ import styled from 'styled-components';
 import { spacing, shadow, fontSize } from '@liguelead/foundation';
 import { parseColor } from '../../utils';
 
+type variant = 'default' | 'danger'
+
 export const Overlay = styled(DialogPrimitive.Overlay)`
   background: rgba(0, 0, 0, 0.3);
   position: fixed;
@@ -19,13 +21,22 @@ export const Content = styled(DialogPrimitive.Content)<{$centerContent?: boolean
   flex-direction: column;
   align-items: ${({ $centerContent }) => ($centerContent ? 'center' : 'flex-start')};
 
-  min-width: 425px;
-  max-width: 90vw;
+  min-width: 448px;
+  max-width: 688px;
   position: fixed;
   top: 8vh;
   left: 50%;
   transform: translateX(-50%);
 `
+
+export const TitleDescriptionContainer = styled.div<{$centerContent?: boolean, $variant?: variant}>`
+  display: flex;
+  flex-direction: column;
+  align-items: ${({ $centerContent }) => ($centerContent ? 'center' : 'flex-start')};
+  gap: ${({$variant}) => ($variant === 'danger' ? `${spacing.spacing8}px` : `${spacing.spacing4}px`)};
+  width: 100%;
+`
+
 export const CloseDialogIconButton = styled.button`
   position: absolute;
   top: 10px;
@@ -47,6 +58,7 @@ export const CloseDialogIconButton = styled.button`
     box-shadow: ${shadow.focusShadow};
   }
 `
+
 export const ChildrenContainer = styled.div`
   margin-top: ${spacing.spacing24}px;
   width: 100%;
@@ -57,12 +69,15 @@ export const ButtonContainer = styled.div<{$centerContent?: boolean}>`
   display: flex;
   justify-content: ${({ $centerContent }) => ($centerContent ? 'center' : 'flex-end')};
   flex-direction: ${({ $centerContent }) => ($centerContent ? 'column-reverse' : 'row')};
-  gap: ${spacing.spacing12}px;
+  gap: ${({ $centerContent }) => ($centerContent ? `${spacing.spacing8}px` : `${spacing.spacing16}px`)};
   margin-top: ${spacing.spacing24}px;
 `;
 
-export const DialogDescription = styled(DialogPrimitive.Description)`
-  color: ${({ theme }) => parseColor(theme.colors.textMedium)};
+export const DialogDescription = styled(DialogPrimitive.Description)<{$variant?: variant}>`
+  color: ${({ theme, $variant }) =>  $variant === 'danger'
+    ? parseColor(theme.colors.textDark) 
+    : parseColor(theme.colors.textMedium)};
+
   font-size: ${fontSize.fontSize14}px;
   font-weight: 400;
   white-space: pre-line;

package/components/Dialog/Dialog.tsx

@@ -8,8 +8,10 @@ import {
   Content,
   DialogDescription,
   DialogTitle,
-  Overlay
+  Overlay,
+  TitleDescriptionContainer
 } from "./Dialog.style"
+
 import { TDialogProps } from "./Dialog.types"
 
 import Button from "../Button"
@@ -49,6 +51,7 @@ export const Dialog: React.FC<TDialogProps> = ({
 
         <Content
           {...rest}
+          onOpenAutoFocus={(event) => event.preventDefault()}
           className={className}
           $centerContent={centerContent}
           onInteractOutside={(event) => {
@@ -58,27 +61,34 @@ export const Dialog: React.FC<TDialogProps> = ({
             if (variant === 'danger') event.preventDefault()
           }}
         >
-          {title && (
-            <DialogTitle>
-                {title}
-            </DialogTitle>
-          )}
+          <TitleDescriptionContainer 
+            $centerContent={centerContent} 
+            $variant={variant}
+          >
+            {title && (
+              <DialogTitle>
+                  {title}
+              </DialogTitle>
+            )}
 
-          {description && (
-            <DialogDescription>
-                {description}
-            </DialogDescription>
-          )}
+            {description && (
+              <DialogDescription $variant={variant}>
+                  {description}
+              </DialogDescription>
+            )}
+          </TitleDescriptionContainer>
 
-          <ChildrenContainer>
+          {variant === 'danger' ? null : (
+            <ChildrenContainer>
               {children}
-          </ChildrenContainer>
+            </ChildrenContainer>
+          )}
 
           <ButtonContainer $centerContent={centerContent}>
             <DialogPrimitive.Close asChild>
               {cancelButton && (
                 <Button
-                variant="outline"
+                  variant="neutralOutline"
                 >
                   {cancelLabel}
                 </Button>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@liguelead/design-system",
-    "version": "0.0.23",
+    "version": "0.0.24",
     "type": "module",
     "main": "components/index.ts",
     "publishConfig": {

package/utils/getHolverColor.ts

@@ -0,0 +1,23 @@
+import { colorType } from '../types'
+import darkenOrLighten from './darkenOrLighen';
+import parseColor from './parseColor';
+import { DefaultTheme } from 'styled-components';
+
+const getHoverColor = (color: colorType, parsedColor: string, theme: DefaultTheme) => {
+
+  switch (color) {
+    case 'primary':
+      return parseColor(theme.colors.primaryDarker);
+    
+    case 'secondary':
+      return parseColor(theme.colors.secondaryDarker);
+    
+    case 'danger200':
+      return parseColor(theme.colors.danger300);
+    
+    default:
+      return darkenOrLighten(0.2, parsedColor);
+  }
+};
+
+export default getHoverColor;

package/utils/index.ts

@@ -3,3 +3,4 @@ export {default as getTextColor} from './getTextColor'
 export {default as darken} from './colorDarken'
 export {default as lighten} from './colorLighten'
 export {default as darkenOrLighten} from './darkenOrLighen'
+export {default as getHoverColor} from './getHolverColor'