diff --git a/packages/colors/src/index.ts b/packages/colors/src/index.ts index 0ef29ea..d8bf43e 100644 --- a/packages/colors/src/index.ts +++ b/packages/colors/src/index.ts @@ -1,51 +1,51 @@ export const colors = { background: { - primary: "#1A122B", - secondary: "#1F1632", - tertiary: "#2D294A", - quaternary: "#392F4F", - quinary: "#403755", + primary: '#1A122B', + secondary: '#1F1632', + tertiary: '#2D294A', + quaternary: '#392F4F', + quinary: '#403755', }, gradient: { - start: "#1F1632", - end: "#392F4F", + start: '#1F1632', + end: '#392F4F', }, brand: { - red: "#EA4335", - yellow: "#FBBC05", - blue: "#4285F4", + red: '#EA4335', + yellow: '#FBBC05', + blue: '#4285F4', }, gray: { - 100: "#D9D9D9", - 200: "#9D9AA5", - 300: "#979CA4", + 100: '#D9D9D9', + 200: '#9D9AA5', + 300: '#979CA4', }, white: { - 100: "#FFFFFF", // 100% - 40: "#FFFFFF66", // 40% - 15: "#FFFFFF26", // 15% + 100: '#FFFFFF', // 100% + 40: '#FFFFFF66', // 40% + 15: '#FFFFFF26', // 15% }, button: { hover: { gray: { - primary: "#B2B2B2", - blue: "#2E5DAB", + primary: '#B2B2B2', + blue: '#2E5DAB', }, darkGray: { - primary: "#6A6D73", - secondary: "#989898", + primary: '#6A6D73', + secondary: '#989898', }, red: { - primary: "#B2B2B2", - secondary: "#A42F25", + primary: '#B2B2B2', + secondary: '#A42F25', }, yellow: { - primary: "#B2B2B2", - secondary: "#B08404", + primary: '#B2B2B2', + secondary: '#B08404', }, dark: { - primary: "#1F1A2C", - secondary: "#FFFFFFB3", // 70% + primary: '#1F1A2C', + secondary: '#FFFFFFB3', // 70% }, }, }, @@ -53,34 +53,34 @@ export const colors = { export const typography = { bold: { - h1: "40px", - h2: "36px", - h3: "24px", - h4: "16px", - h5: "14px", - h6: "10px", + h1: '40px', + h2: '36px', + h3: '24px', + h4: '16px', + h5: '14px', + h6: '10px', }, medium: { - h1: "20px", - h2: "16px", - h3: "14px", - h4: "13px", - h5: "12px", + h1: '20px', + h2: '16px', + h3: '14px', + h4: '13px', + h5: '12px', }, regular: { - h1: "20px", - h2: "16px", - h3: "14px", - h4: "12px", - h5: "10px", + h1: '20px', + h2: '16px', + h3: '14px', + h4: '12px', + h5: '10px', }, light: { - h1: "36px", - h2: "32px", - h3: "16px", - h4: "14px", - h5: "13px", - h6: "10px", + h1: '36px', + h2: '32px', + h3: '16px', + h4: '14px', + h5: '13px', + h6: '10px', }, } as const; diff --git a/packages/colors/src/util.ts b/packages/colors/src/util.ts index 7ed76da..2c175f0 100644 --- a/packages/colors/src/util.ts +++ b/packages/colors/src/util.ts @@ -1,4 +1,4 @@ -import { colors, typography } from "./index"; +import { colors, typography } from './index'; // colors 객체의 중첩 경로를 표현하는 타입 type ColorPath = @@ -20,12 +20,14 @@ type RegularLevel = keyof typeof typography.regular; type LightLevel = keyof typeof typography.light; export const getColor = (path: ColorPath) => { - return path.split(".").reduce((obj: any, key) => obj[key], colors); + return path.split('.').reduce((obj: any, key: string) => { + return obj[key]; + }, colors); }; export const getFontSize = ( weight: keyof typeof typography, - level: BoldLevel | MediumLevel | RegularLevel | LightLevel + level: BoldLevel | MediumLevel | RegularLevel | LightLevel, ) => { return typography[weight][level as keyof (typeof typography)[typeof weight]]; }; @@ -35,10 +37,10 @@ type CSSVariableObject = { }; export const generateCssVariables = () => { - const flattenObject = (obj: object, prefix = ""): CSSVariableObject => { + const flattenObject = (obj: object, prefix = ''): CSSVariableObject => { return Object.entries(obj).reduce((acc, [key, value]) => { const newKey = prefix ? `${prefix}-${key}` : key; - if (typeof value === "object" && value !== null) { + if (typeof value === 'object' && value !== null) { Object.assign(acc, flattenObject(value, newKey)); } else { acc[`--gdgoc-${newKey}`] = value as string; diff --git a/packages/ui/src/components/ui/button.tsx b/packages/ui/src/components/ui/button.tsx index a65b067..6cf24da 100644 --- a/packages/ui/src/components/ui/button.tsx +++ b/packages/ui/src/components/ui/button.tsx @@ -1,60 +1,48 @@ -import * as React from "react"; -import { Slot } from "@radix-ui/react-slot"; -import { cva, type VariantProps } from "class-variance-authority"; +import * as React from 'react'; +import { Slot } from '@radix-ui/react-slot'; +import { cva } from 'class-variance-authority'; -import { cn } from "@/lib/utils"; +import { cn } from '@/lib/utils'; type ButtonVariantsProps = { - variant?: - | "default" - | "destructive" - | "outline" - | "secondary" - | "ghost" - | "link"; - size?: "default" | "sm" | "lg" | "icon"; + variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'; + size?: 'default' | 'sm' | 'lg' | 'icon'; className?: string; }; const buttonVariants = cva( - "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", + 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', { variants: { variant: { - default: - "bg-primary text-primary-foreground shadow hover:bg-primary/90", - destructive: - "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90", - outline: - "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground", - secondary: - "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80", - ghost: "hover:bg-accent hover:text-accent-foreground", - link: "text-primary underline-offset-4 hover:underline", + default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90', + destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90', + outline: 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground', + secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80', + ghost: 'hover:bg-accent hover:text-accent-foreground', + link: 'text-primary underline-offset-4 hover:underline', }, size: { - default: "h-9 px-4 py-2", - sm: "h-8 rounded-md px-3 text-xs", - lg: "h-10 rounded-md px-8", - icon: "h-9 w-9", + default: 'h-9 px-4 py-2', + sm: 'h-8 rounded-md px-3 text-xs', + lg: 'h-10 rounded-md px-8', + icon: 'h-9 w-9', }, }, defaultVariants: { - variant: "default", - size: "default", + variant: 'default', + size: 'default', }, - } + }, ); -export interface ButtonProps - extends React.ButtonHTMLAttributes, - ButtonVariantsProps { +export interface ButtonProps extends React.ButtonHTMLAttributes, ButtonVariantsProps { asChild?: boolean; } const Button = React.forwardRef( - ({ className = "", variant, size, asChild = false, ...props }, ref) => { - const Comp = asChild ? Slot : "button"; + ({ className = '', variant, size, asChild = false, ...props }, ref) => { + const Comp = asChild ? Slot : 'button'; return ( ( {...props} /> ); - } + }, ); -Button.displayName = "Button"; +Button.displayName = 'Button'; export { Button, buttonVariants }; diff --git a/packages/ui/src/lib/utils.ts b/packages/ui/src/lib/utils.ts index a5ef193..2819a83 100644 --- a/packages/ui/src/lib/utils.ts +++ b/packages/ui/src/lib/utils.ts @@ -1,5 +1,5 @@ -import { clsx, type ClassValue } from "clsx"; -import { twMerge } from "tailwind-merge"; +import { clsx, type ClassValue } from 'clsx'; +import { twMerge } from 'tailwind-merge'; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs));