From 76049bd6582e35444cc488ef4c9ab77f9808f91e Mon Sep 17 00:00:00 2001 From: DTCurrie Date: Mon, 28 Oct 2024 15:26:33 -0400 Subject: [PATCH 1/2] Add button link as styles function, introduce tailwind-merge --- packages/core/package.json | 3 +- packages/core/src/lib/button/button-link.ts | 34 + packages/core/src/lib/index.ts | 5 + packages/core/src/routes/+page.svelte | 94 +- pnpm-lock.yaml | 21978 ++++++++---------- 5 files changed, 10229 insertions(+), 11885 deletions(-) create mode 100644 packages/core/src/lib/button/button-link.ts diff --git a/packages/core/package.json b/packages/core/package.json index 3cc51d31..15ad093a 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -52,7 +52,8 @@ "lodash-es": "^4.17.21", "nanoid": "^5.0.4", "prism-themes": "^1.9.0", - "prismjs": "^1.29.0" + "prismjs": "^1.29.0", + "tailwind-merge": "^2.5.4" }, "devDependencies": { "@sveltejs/adapter-auto": "^3.0.0", diff --git a/packages/core/src/lib/button/button-link.ts b/packages/core/src/lib/button/button-link.ts new file mode 100644 index 00000000..9816f15e --- /dev/null +++ b/packages/core/src/lib/button/button-link.ts @@ -0,0 +1,34 @@ +/** + * Link styled to look like a button. + * + * Currently, only the "ghost" variant is implemented. + * + * @function + */ + +import { twMerge, type ClassNameValue } from 'tailwind-merge'; + +export type ButtonLinkVariant = 'ghost' | 'dark'; + +export interface ButtonLinkAttributes { + variant?: ButtonLinkVariant; + extraClasses?: ClassNameValue; +} + +const BUTTON_LINK_CLASSES = + 'flex h-7.5 items-center gap-1.5 whitespace-nowrap px-3 py-1.5 text-xs'; + +const BUTTON_LINK_VARIANT_CLASSES = { + ghost: 'text-default hover:bg-ghost-light active:bg-ghost-medium', + dark: 'border border-gray-9 bg-gray-9 text-white hover:border-black hover:bg-black active:bg-[#000]', +} as const; + +export const buttonLinkStyles = ({ + variant = 'ghost', + extraClasses = '', +}: ButtonLinkAttributes) => + twMerge( + BUTTON_LINK_CLASSES, + BUTTON_LINK_VARIANT_CLASSES[variant], + extraClasses + ); diff --git a/packages/core/src/lib/index.ts b/packages/core/src/lib/index.ts index c9694658..ab189908 100644 --- a/packages/core/src/lib/index.ts +++ b/packages/core/src/lib/index.ts @@ -2,6 +2,11 @@ export { default as Badge } from './badge.svelte'; export { Banner, BannerVariant, type BannerVariantType } from './banner'; export { default as Breadcrumbs } from './breadcrumbs.svelte'; export { default as Button } from './button/button.svelte'; +export { + buttonLinkStyles, + type ButtonLinkAttributes, + type ButtonLinkVariant, +} from './button/button-link'; export { default as IconButton } from './button/icon-button.svelte'; export { clickOutside } from './click-outside'; export { default as CodeSnippet } from './code-snippet.svelte'; diff --git a/packages/core/src/routes/+page.svelte b/packages/core/src/routes/+page.svelte index 4c7dbdcf..9a448636 100644 --- a/packages/core/src/routes/+page.svelte +++ b/packages/core/src/routes/+page.svelte @@ -1,54 +1,55 @@