chore: purge shadcn from codebase. Replace with bits-ui components and other tools
This commit is contained in:
@@ -3,7 +3,7 @@
|
||||
design-system button. Uppercase, zero border-radius, Space Grotesk.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import { cn } from '$shared/shadcn/utils/shadcn-utils';
|
||||
import clsx from 'clsx';
|
||||
import type { Snippet } from 'svelte';
|
||||
import type { HTMLButtonAttributes } from 'svelte/elements';
|
||||
import type {
|
||||
@@ -71,7 +71,7 @@ let {
|
||||
const isIconOnly = $derived(!!icon && !children);
|
||||
|
||||
const variantStyles: Record<ButtonVariant, string> = {
|
||||
primary: cn(
|
||||
primary: clsx(
|
||||
'bg-swiss-red text-white',
|
||||
'hover:bg-swiss-red/90',
|
||||
'active:bg-swiss-red/80',
|
||||
@@ -87,7 +87,7 @@ const variantStyles: Record<ButtonVariant, string> = {
|
||||
'disabled:cursor-not-allowed',
|
||||
'disabled:transform-none',
|
||||
),
|
||||
secondary: cn(
|
||||
secondary: clsx(
|
||||
'bg-surface dark:bg-paper',
|
||||
'text-swiss-black dark:text-neutral-200',
|
||||
'border border-black/10 dark:border-white/10',
|
||||
@@ -98,7 +98,7 @@ const variantStyles: Record<ButtonVariant, string> = {
|
||||
'disabled:text-neutral-400 dark:disabled:text-neutral-600',
|
||||
'disabled:cursor-not-allowed',
|
||||
),
|
||||
outline: cn(
|
||||
outline: clsx(
|
||||
'bg-transparent',
|
||||
'text-swiss-black dark:text-neutral-200',
|
||||
'border border-black/20 dark:border-white/20',
|
||||
@@ -109,7 +109,7 @@ const variantStyles: Record<ButtonVariant, string> = {
|
||||
'disabled:text-neutral-400 dark:disabled:text-neutral-600',
|
||||
'disabled:cursor-not-allowed',
|
||||
),
|
||||
ghost: cn(
|
||||
ghost: clsx(
|
||||
'bg-transparent',
|
||||
'text-secondary',
|
||||
'border border-transparent',
|
||||
@@ -119,7 +119,7 @@ const variantStyles: Record<ButtonVariant, string> = {
|
||||
'disabled:text-neutral-400 dark:disabled:text-neutral-600',
|
||||
'disabled:cursor-not-allowed',
|
||||
),
|
||||
icon: cn(
|
||||
icon: clsx(
|
||||
'bg-surface dark:bg-dark-bg',
|
||||
'text-secondary',
|
||||
'border border-transparent',
|
||||
@@ -130,8 +130,8 @@ const variantStyles: Record<ButtonVariant, string> = {
|
||||
'disabled:text-neutral-400 dark:disabled:text-neutral-600',
|
||||
'disabled:cursor-not-allowed',
|
||||
),
|
||||
tertiary: cn(
|
||||
// Font override — must come after base in cn() to win via tailwind-merge
|
||||
tertiary: clsx(
|
||||
// Font override — must come after base in clsx() to win via tailwind-merge
|
||||
'font-secondary font-medium normal-case tracking-normal',
|
||||
// Inactive state
|
||||
'bg-transparent',
|
||||
@@ -175,7 +175,7 @@ const activeStyles: Partial<Record<ButtonVariant, string>> = {
|
||||
icon: 'bg-paper dark:bg-paper text-brand border-subtle',
|
||||
};
|
||||
|
||||
const classes = $derived(cn(
|
||||
const classes = $derived(clsx(
|
||||
// Base
|
||||
'inline-flex items-center justify-center',
|
||||
'font-primary font-bold tracking-tight uppercase',
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
Use for segmented controls, view toggles, or any mutually exclusive button set.
|
||||
-->
|
||||
<script lang="ts">
|
||||
import { cn } from '$shared/shadcn/utils/shadcn-utils';
|
||||
import clsx from 'clsx';
|
||||
import type { Snippet } from 'svelte';
|
||||
import type { HTMLAttributes } from 'svelte/elements';
|
||||
|
||||
@@ -23,7 +23,7 @@ let { children, class: className, ...rest }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div
|
||||
class={cn(
|
||||
class={clsx(
|
||||
'flex items-center gap-1 p-1',
|
||||
'bg-surface dark:bg-dark-bg',
|
||||
'border border-subtle',
|
||||
|
||||
Reference in New Issue
Block a user