diff --git a/packages/core/package.json b/packages/core/package.json index 3cc51d31f..15ad093a7 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/prime.css b/packages/core/prime.css index 889f16477..72f2a05e3 100644 --- a/packages/core/prime.css +++ b/packages/core/prime.css @@ -15,3 +15,16 @@ button { :host([hidden]) { display: none; } + +/* Just give me the CSS classes option */ +.button-link { + @apply flex h-7.5 items-center gap-1.5 whitespace-nowrap px-3 py-1.5 text-xs; +} + +.button-link-ghost { + @apply button-link text-default hover:bg-ghost-light active:bg-ghost-medium; +} + +.button-link-dark { + @apply button-link border border-gray-9 bg-gray-9 text-white hover:border-black hover:bg-black active:bg-[#000]; +} 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 000000000..66906ee7d --- /dev/null +++ b/packages/core/src/lib/button/button-link.ts @@ -0,0 +1,46 @@ +/** + * Link styled to look like a button. + * + * Currently, only the "ghost" variant is implemented. + * + * @function + */ + +import { twJoin, 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; + +// Just export the classes option (I can handle overrides myself) +export const BUTTON_LINK_GHOST = twJoin( + BUTTON_LINK_CLASSES, + BUTTON_LINK_VARIANT_CLASSES.ghost +); + +export const BUTTON_LINK_DARK = twJoin( + BUTTON_LINK_CLASSES, + BUTTON_LINK_VARIANT_CLASSES.dark +); + +// Give me a function to generate the classes function (allows overrides) +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 c96946584..6802d66b1 100644 --- a/packages/core/src/lib/index.ts +++ b/packages/core/src/lib/index.ts @@ -2,6 +2,7 @@ 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 * 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 4c7dbdcfa..90812eb7f 100644 --- a/packages/core/src/routes/+page.svelte +++ b/packages/core/src/routes/+page.svelte @@ -1,54 +1,58 @@