diff --git a/public/h-icon/solid/blue-heart.svg b/public/h-icon/solid/blue-heart.svg new file mode 100644 index 0000000..193b4d6 --- /dev/null +++ b/public/h-icon/solid/blue-heart.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/h-icon/solid/darkpink-heart.svg b/public/h-icon/solid/darkpink-heart.svg new file mode 100644 index 0000000..60f797c --- /dev/null +++ b/public/h-icon/solid/darkpink-heart.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/h-icon/solid/full-blue-heart.svg b/public/h-icon/solid/full-blue-heart.svg new file mode 100644 index 0000000..91110f9 --- /dev/null +++ b/public/h-icon/solid/full-blue-heart.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/h-icon/solid/full-green-heart.svg b/public/h-icon/solid/full-green-heart.svg new file mode 100644 index 0000000..8161525 --- /dev/null +++ b/public/h-icon/solid/full-green-heart.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/h-icon/solid/full-purple-heart.svg b/public/h-icon/solid/full-purple-heart.svg new file mode 100644 index 0000000..ddcdf87 --- /dev/null +++ b/public/h-icon/solid/full-purple-heart.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/h-icon/solid/full-red-heart.svg b/public/h-icon/solid/full-red-heart.svg new file mode 100644 index 0000000..fb7ea01 --- /dev/null +++ b/public/h-icon/solid/full-red-heart.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/h-icon/solid/full-yellow-heart.svg b/public/h-icon/solid/full-yellow-heart.svg new file mode 100644 index 0000000..9508f0b --- /dev/null +++ b/public/h-icon/solid/full-yellow-heart.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/h-icon/solid/heart.svg b/public/h-icon/solid/heart.svg new file mode 100644 index 0000000..a0e2dc3 --- /dev/null +++ b/public/h-icon/solid/heart.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/h-icon/solid/pink-heart.svg b/public/h-icon/solid/pink-heart.svg new file mode 100644 index 0000000..3cb7f31 --- /dev/null +++ b/public/h-icon/solid/pink-heart.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/h-icon/solid/purple-heart.svg b/public/h-icon/solid/purple-heart.svg new file mode 100644 index 0000000..c4671ec --- /dev/null +++ b/public/h-icon/solid/purple-heart.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/app/page.tsx b/src/app/page.tsx index 3eee014..8e9dded 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,3 +1,7 @@ +import { CapsuleButton } from "@/components/buttons/capsule-buttons/capsule-button"; +import { CapsuleButtonPlainBG } from "@/components/buttons/capsule-buttons/capsule-button-whiteBG"; +import { RoundButton } from "@/components/buttons/round-buttons/round-button"; +import { RoundButtonPlainBG } from "@/components/buttons/round-buttons/round-button-whiteBG"; import Image from "next/image"; export default function Home() { diff --git a/src/components/buttons/capsule-buttons/capsule-button-whiteBG.tsx b/src/components/buttons/capsule-buttons/capsule-button-whiteBG.tsx new file mode 100644 index 0000000..633c012 --- /dev/null +++ b/src/components/buttons/capsule-buttons/capsule-button-whiteBG.tsx @@ -0,0 +1,98 @@ +import React from "react"; + +const sizeClasses = { + xs: "h-6 px-2 gap-2 width-auto", // Custom height and padding for xs + sm: "h-8 px-3 gap-2 width-auto", // Custom height and padding for sm + md: "h-9 px-4 gap-2 width-auto", // Custom height and padding for md + lg: "h-11 px-4 gap-2 width-auto", // Custom height and padding for lg +} as const; + +const colorClasses = { + default: "text-base-content border-base-content", + primary: "text-primary border-primary", + secondary: "text-secondary border-secondary", + accent: "text-accent border-accent", + // neutral: "text-base-content border-line-color", + // ghost: "bg-ghost text-base-content", + // link: "bg-transparent text-link-text underline decoration-[#790E4A]", + success: "text-success border-success", + warning: "text-warning border-warning", + error: "text-error border-error", +} as const; + +const iconSrc = { + default: "/h-icon/solid/heart.svg", + primary: "/h-icon/solid/darkpink-heart.svg", + secondary: "/h-icon/solid/full-blue-heart.svg", + accent: "/h-icon/solid/full-purple-heart.svg", + // neutral: "/h-icon/solid/heart.svg", + // ghost: "/h-icon/solid/heart.svg", + // link: "/h-icon/solid/darkpink-heart.svg", + success: "/h-icon/solid/full-green-heart.svg", + warning: "/h-icon/solid/full-yellow-heart.svg", + error: "/h-icon/solid/full-red-heart.svg", +} as const; + +const iconSizeClasses = { + xs: "w-[14px] h-[14px]", + sm: "w-[14px] h-[14px]", + md: "w-[16px] h-[16px]", + lg: "w-[20px] h-[20px]", +} as const; + +type CapsuleButtonPlainBGProps = { + label: string; + size?: keyof typeof sizeClasses; // 'xs' | 'sm' | 'md' | 'lg' + color?: keyof typeof colorClasses; // Explicitly type `color` to be a key of `colorClasses` + onClick?: () => void; // Optional click handler + className?: string; // Additional Tailwind classes +}; + +export const CapsuleButtonPlainBG: React.FC = ({ + label, + size = "md", // Default size + color = "secondary", // Default color + onClick, + className, +}) => { + // Shared button styles + const commonClasses = ` + inline-flex + items-center + justify-center + gap-2 + flex-shrink-0 + rounded-full + border-2 + `; + + const iconPath = iconSrc[color]; + const iconSize = iconSizeClasses[size]; + + // Combine all classes + const buttonClasses = ` + ${commonClasses} + ${colorClasses[color]} + ${sizeClasses[size]} + drop-shadow-lg + `; + // Custom box shadow + const customBoxShadow = "shadow-[1px_2px_0px_0px_#000,1px_4px_0px_0px_#000]"; + + //console.log("Button Classes:", buttonClasses); + + return ( + + ); +}; + +export default CapsuleButtonPlainBG; diff --git a/src/components/buttons/capsule-buttons/capsule-button.tsx b/src/components/buttons/capsule-buttons/capsule-button.tsx new file mode 100644 index 0000000..d2530ce --- /dev/null +++ b/src/components/buttons/capsule-buttons/capsule-button.tsx @@ -0,0 +1,100 @@ +import React from "react"; + +const sizeClasses = { + xs: "h-6 px-2 gap-2 width-auto", // Custom height and padding for xs + sm: "h-8 px-3 gap-2 width-auto", // Custom height and padding for sm + md: "h-9 px-4 gap-2 width-auto", // Custom height and padding for md + lg: "h-11 px-4 gap-2 width-auto", // Custom height and padding for lg +} as const; + +const colorClasses = { + default: "bg-default text-base-content border-line-color", + primary: "bg-primary text-primary-text border-line-color", + secondary: "bg-secondary text-secondary-text border-line-color", + accent: "bg-accent text-accent-text border-line-color", + neutral: "bg-neutral text-base-content border-line-color", + ghost: "bg-ghost text-base-content", + link: "bg-transparent text-link-text underline decoration-[#790E4A]", + success: "bg-success text-base-content border-line-color", + warning: "bg-warning text-base-content border-line-color", + error: "bg-error text-base-content border-line-color", +} as const; + +const iconSrc = { + default: "/h-icon/solid/heart.svg", + primary: "/h-icon/solid/pink-heart.svg", + secondary: "/h-icon/solid/blue-heart.svg", + accent: "/h-icon/solid/purple-heart.svg", + neutral: "/h-icon/solid/heart.svg", + ghost: "/h-icon/solid/heart.svg", + link: "/h-icon/solid/darkpink-heart.svg", + success: "/h-icon/solid/heart.svg", + warning: "/h-icon/solid/heart.svg", + error: "/h-icon/solid/heart.svg", +} as const; + +const iconSizeClasses = { + xs: "w-[14px] h-[14px]", + sm: "w-[14px] h-[14px]", + md: "w-[16px] h-[16px]", + lg: "w-[20px] h-[20px]", +} as const; + +type CapsuleButtonProps = { + label: string; + size?: keyof typeof sizeClasses; // 'xs' | 'sm' | 'md' | 'lg' + color?: keyof typeof colorClasses; // Explicitly type `color` to be a key of `colorClasses` + onClick?: () => void; // Optional click handler + className?: string; // Additional Tailwind classes +}; + +export const CapsuleButton: React.FC = ({ + label, + size = "md", // Default size + color = "secondary", // Default color + onClick, + className, +}) => { + // Shared button styles + const commonClasses = ` + inline-flex + items-center + justify-center + gap-2 + flex-shrink-0 + rounded-full + ${color === "ghost" || color === "link" ? "" : "border-2"} + `; + + const iconPath = iconSrc[color]; + const iconSize = iconSizeClasses[size]; + + // Combine all classes + const buttonClasses = ` + ${commonClasses} + ${colorClasses[color]} + ${sizeClasses[size]} + drop-shadow-lg + `; + // Custom box shadow + const customBoxShadow = "shadow-[1px_2px_0px_0px_#000,1px_4px_0px_0px_#000]"; + + //console.log("Button Classes:", buttonClasses); + + return ( + + ); +}; + +export default CapsuleButton; diff --git a/src/components/buttons/round-buttons/round-button-whiteBG.tsx b/src/components/buttons/round-buttons/round-button-whiteBG.tsx new file mode 100644 index 0000000..4e06f53 --- /dev/null +++ b/src/components/buttons/round-buttons/round-button-whiteBG.tsx @@ -0,0 +1,94 @@ +import React from "react"; + +const sizeClasses = { + xs: "w-[var(--t-spacing-6, 24px)] h-[var(--t-spacing-6, 24px)] p-[var(--t-spacing-0, 0px)] var(--t-spacing-2, 8px) gap-2", // Circle size for xs + sm: "w-[var(--t-spacing-8, 32px)] h-[var(--t-spacing-8, 32px)] p-[var(--t-spacing-0, 0px)] var(--t-spacing-3, 12px) gap-2", // Circle size for sm + md: "w-[var(--t-spacing-9, 36px)] h-[var(--t-spacing-9, 36px)] p-[var(--t-spacing-0, 0px)] var(--t-spacing-4, 16px) gap-2", // Circle size for md + lg: "w-[var(--t-spacing-11, 44px)] h-[var(--t-spacing-11, 44px)] p-[var(--t-spacing-0, 0px)] var(--t-spacing-4, 16px) gap-2", // Circle size for lg +} as const; + +const colorClasses = { + default: "text-base-content border-base-content", + primary: "text-primary border-primary", + secondary: "text-secondary border-secondary", + accent: "text-accent border-accent", + success: "text-success border-success", + warning: "text-warning border-warning", + error: "text-error border-error", +} as const; + +const iconSrc = { + default: "/h-icon/solid/heart.svg", + primary: "/h-icon/solid/darkpink-heart.svg", + secondary: "/h-icon/solid/full-blue-heart.svg", + accent: "/h-icon/solid/full-purple-heart.svg", + success: "/h-icon/solid/full-green-heart.svg", + warning: "/h-icon/solid/full-yellow-heart.svg", + error: "/h-icon/solid/full-red-heart.svg", +} as const; + +const iconSizeClasses = { + xs: "w-[14px] h-[14px]", + sm: "w-[14px] h-[14px]", + md: "w-[16px] h-[16px]", + lg: "w-[20px] h-[20px]", +} as const; + +type RoundButtonPlainBGProps = { + size?: keyof typeof sizeClasses; // 'xs' | 'sm' | 'md' | 'lg' + color?: keyof typeof colorClasses; // Explicitly type `color` to be a key of `colorClasses` + onClick?: () => void; // Optional click handler + className?: string; // Additional Tailwind classes +}; + +export const RoundButtonPlainBG: React.FC = ({ + size = "md", // Default size + color = "secondary", // Default color + onClick, + className, +}) => { + // Shared button styles + const commonClasses = ` + flex + items-center + justify-center + flex-shrink-0 + gap-2 + rounded-full + border-2 + `; + + const iconPath = iconSrc[color]; + const iconSize = iconSizeClasses[size]; + + console.log("icon path: iconsize", iconPath, iconSize); + + // Combine all classes + const buttonClasses = ` + ${commonClasses} + ${colorClasses[color]} + ${sizeClasses[size]} + drop-shadow-lg + `; + console.log("Button Classes:", buttonClasses); + // Custom box shadow + const customBoxShadow = "shadow-[1px_2px_0px_0px_#000,1px_4px_0px_0px_#000]"; + + //console.log("Button Classes:", buttonClasses); + + return ( + + ); +}; + +export default RoundButtonPlainBG; diff --git a/src/components/buttons/round-buttons/round-button.tsx b/src/components/buttons/round-buttons/round-button.tsx new file mode 100644 index 0000000..91f507a --- /dev/null +++ b/src/components/buttons/round-buttons/round-button.tsx @@ -0,0 +1,123 @@ +import React from "react"; + +// const sizeClasses = { +// xs: "h-6 w-6 px-2 gap-2", // Custom height and padding for xs +// sm: "h-8 w-8 px-3 gap-2", // Custom height and padding for sm +// md: "h-9 w-9 px-4 gap-2", // Custom height and padding for md +// lg: "h-11 w-11 px-4 gap-2", // Custom height and padding for lg +// } as const; + +// const sizeClasses = { +// xs: "h-6 px-2 gap-2 width-auto", // Custom height and padding for xs +// sm: "h-8 px-3 gap-2 width-auto", // Custom height and padding for sm +// md: "h-9 px-4 gap-2 width-auto", // Custom height and padding for md +// lg: "h-11 px-4 gap-2 width-auto", // Custom height and padding for lg +// } as const; + +const sizeClasses = { + xs: "w-[var(--t-spacing-6, 24px)] h-[var(--t-spacing-6, 24px)] p-[var(--t-spacing-0, 0px)] var(--t-spacing-2, 8px) gap-2", // Circle size for xs + sm: "w-[var(--t-spacing-8, 32px)] h-[var(--t-spacing-8, 32px)] p-[var(--t-spacing-0, 0px)] var(--t-spacing-3, 12px) gap-2", // Circle size for sm + md: "w-[var(--t-spacing-9, 36px)] h-[var(--t-spacing-9, 36px)] p-[var(--t-spacing-0, 0px)] var(--t-spacing-4, 16px) gap-2", // Circle size for md + lg: "w-[var(--t-spacing-11, 44px)] h-[var(--t-spacing-11, 44px)] p-[var(--t-spacing-0, 0px)] var(--t-spacing-4, 16px) gap-2", // Circle size for lg +} as const; + +// const iconSizeClasses = { +// xs: "w-[var(--t-spacing-35, 14px)] h-[var(--t-spacing-35, 14px)]", // Icon size for xs +// sm: "w-[var(--t-spacing-35, 14px)] h-[var(--t-spacing-35, 14px)]", // Icon size for sm +// md: "w-[var(--t-spacing-4, 16px)] h-[var(--t-spacing-4, 16px)]", // Icon size for md +// lg: "w-[var(--t-spacing-5, 20px)] h-[var(--t-spacing-5, 20px)]", // Icon size for lg +// } as const; + +const colorClasses = { + default: "bg-default border-line-color", + primary: "bg-primary border-line-color", + secondary: "bg-secondary border-line-color", + accent: "bg-accent border-line-color", + neutral: "bg-neutral border-line-color", + ghost: "bg-ghost", + // link: "bg-transparent text-link-text underline decoration-[#790E4A]", + success: "bg-success border-line-color", + warning: "bg-warning border-line-color", + error: "bg-error border-line-color", +} as const; + +const iconSrc = { + default: "/h-icon/solid/heart.svg", + primary: "/h-icon/solid/pink-heart.svg", + secondary: "/h-icon/solid/blue-heart.svg", + accent: "/h-icon/solid/purple-heart.svg", + neutral: "/h-icon/solid/heart.svg", + ghost: "/h-icon/solid/heart.svg", + link: "/h-icon/solid/darkpink-heart.svg", + success: "/h-icon/solid/heart.svg", + warning: "/h-icon/solid/heart.svg", + error: "/h-icon/solid/heart.svg", +} as const; + +const iconSizeClasses = { + xs: "w-[14px] h-[14px]", + sm: "w-[14px] h-[14px]", + md: "w-[16px] h-[16px]", + lg: "w-[20px] h-[20px]", +} as const; + +type RoundButtonProps = { + size?: keyof typeof sizeClasses; // 'xs' | 'sm' | 'md' | 'lg' + color?: keyof typeof colorClasses; // Explicitly type `color` to be a key of `colorClasses` + onClick?: () => void; // Optional click handler + className?: string; // Additional Tailwind classes +}; + +export const RoundButton: React.FC = ({ + size = "md", // Default size + color = "secondary", // Default color + onClick, + className, +}) => { + // Shared button styles + const commonClasses = ` + flex + items-center + justify-center + flex-shrink-0 + gap-2 + rounded-full + ${color === "ghost" ? "" : "border-2"} + `; + + const iconPath = iconSrc[color]; + const iconSize = iconSizeClasses[size]; + + console.log("icon path: iconsize", iconPath, iconSize); + + // Combine all classes + const buttonClasses = ` + ${commonClasses} + ${colorClasses[color]} + ${sizeClasses[size]} + drop-shadow-lg + `; + console.log("Button Classes:", buttonClasses); + // Custom box shadow + const customBoxShadow = "shadow-[1px_2px_0px_0px_#000,1px_4px_0px_0px_#000]"; + + console.log("Button Classes:", buttonClasses); + + return ( + + ); +}; + +export default RoundButton; diff --git a/tailwind.config.ts b/tailwind.config.ts index 46f16cf..8fca0dd 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,5 +1,5 @@ import type { Config } from "tailwindcss"; -import daisyui from 'daisyui'; +import daisyui from "daisyui"; export default { content: [ @@ -11,13 +11,13 @@ export default { themes: [ { ruminate: { - "primary": "#790e4a", + primary: "#790e4a", "primary-content": "#f7cbc0", - "secondary": "#11639a", + secondary: "#11639a", "secondary-content": "#def7ea", - "accent": "#563058", + accent: "#563058", "accent-content": "#f8f5f1", - "neutral": "#f8f5f1", + neutral: "#f8f5f1", "neutral-content": "#222737", "base-0": "#ffffff", "base-100": "#f6f6f8", @@ -31,25 +31,25 @@ export default { "base-900": "#3A3E4C", "base-1000": "#000000", "base-content": "#222737", - "info": "#563058", + info: "#563058", "info-content": "#f8f5f1", - "success": "#7eb672", + success: "#7eb672", "success-content": "#222737", - "warning": "#fba63a", + warning: "#fba63a", "warning-content": "#222737", - "error": "#D93226", + error: "#D93226", "error-content": "#222737", }, }, { ruminatedark: { - "primary": "#f7cbc0", + primary: "#f7cbc0", "primary-content": "#790e4a", - "secondary": "#def7ea", + secondary: "#def7ea", "secondary-content": "#11639a", - "accent": "#f8f5f1", + accent: "#f8f5f1", "accent-content": "#563058", - "neutral": "#222737", + neutral: "#222737", "neutral-content": "#f8f5f1", "base-0": "#000000", "base-100": "#80838D", @@ -63,19 +63,62 @@ export default { "base-900": "#AFB1B8", "base-1000": "#ffffff", "base-content": "#222737", - "info": "#563058", + info: "#563058", "info-content": "#f8f5f1", - "success": "#7eb672", + success: "#7eb672", "success-content": "#222737", - "warning": "#fba63a", + warning: "#fba63a", "warning-content": "#222737", - "error": "#D93226", + error: "#D93226", "error-content": "#222737", - } - } + }, + }, ], }, - plugins: [ - daisyui - ], + //Button Themes + theme: { + extend: { + spacing: { + "t-spacing-0": "0px", + "t-spacing-2": "8px", + "t-spacing-3": "12px", + "t-spacing-4": "16px", + "t-spacing-5": "20px", + "t-spacing-6": "24px", + "t-spacing-8": "32px", + "t-spacing-9": "36px", + "t-spacing-11": "44px", + "t-spacing-35": "14px", + }, + borderRadius: { + "u-borderRadius-rounded": "1000px", + }, + colors: { + "d-color-base-200": "#DEDFE3", + "d-color-semantic-neutral-content": "#1F2739", + "line-color": "#222737", + "base-content": "var(--d-color-base-content, #1F2739)", + "primary-text": "var(--d-color-semantic-primary-content, #FFC6BC)", + "secondary-text": "var(--d-color-semantic-secondary-content, #DEF7EA)", + "accent-text": "var(--d-color-semantic-accent-content, #E0D9E1)", + "link-text": "var(--d-color-semantic-primary-bg, #790E4A)", + default: "var(--d-color-base-200, #DEDFE3)", // Default color + primary: "var(--d-color-semantic-primary-bg, #92004C)", // Primary color + secondary: "var(--d-color-semantic-secondary-bg, #0067A4)", // Secondary color + accent: "var(--d-color-semantic-accent-bg, #632B5C)", // Accent color + neutral: "var(--d-color-semantic-neutral-bg, #FAF5F1)", // Neutral color + ghost: "var(--d-sys-colors-empty, rgba(255, 255, 255, 0.00))", // Ghost color + link: "var(--d-sys-colors-empty, rgba(255, 255, 255, 0.00))", // Link color + success: "var(--d-color-status-success-bg, #4EBA60)", // Success color + warning: "var(--d-color-status-warning-bg, #FF9B00)", // Warning color + error: "var(--d-color-status-error-bg, #F00)", // Error color + }, + boxShadow: { + "custom-lg": "1px 2px 0px 0px #000, 1px 4px 0px 0px #000", + "custom-lg-color": + "1px 2px 0px 0px color(display-p3 0 0 0), 1px 4px 0px 0px color(display-p3 0 0 0)", + }, + }, + }, + plugins: [daisyui], } satisfies Config;