Still working on upgrading to Tailwind CSS v4 an dSkeleton v3.....

This commit is contained in:
Scott Idem
2025-06-18 17:59:48 -04:00
parent db6e9dd019
commit 13912fd145
169 changed files with 2343 additions and 1634 deletions

View File

@@ -43,7 +43,7 @@
'absolute left-2 top-2 h-4 rounded px-1 py-2 text-xs capitalize text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100'
})}
>{defaultLanguage}
<ChevronDown class="!size-3" />
<ChevronDown class="size-3!" />
</DropdownMenu.Trigger>
<DropdownMenu.Content class="h-60 w-40 overflow-auto" contenteditable="false">
{#each languages as language}

View File

@@ -131,7 +131,7 @@
<input
value={node.attrs.title}
type="text"
class="my-1 w-full bg-transparent text-center text-sm text-muted-foreground outline-none"
class="my-1 w-full bg-transparent text-center text-sm text-muted-foreground outline-hidden"
onchange={(e) => {
if (e.target === null) return;
//@ts-ignore

View File

@@ -1,3 +1,7 @@
@import "tailwindcss/preflight";
@tailwind utilities;
.tiptap :where(p):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
margin-top: 0 !important;
margin-bottom: 0 !important;
@@ -5,7 +9,7 @@
.tiptap code:not(pre code) {
/* Remove the before and after pseudo elements */
@apply rounded border bg-muted/50 p-1 before:content-[''] after:content-[''];
@apply rounded-sm border bg-muted/50 p-1 before:content-[''] after:content-[''];
}
.tiptap blockquote p {
@@ -54,7 +58,7 @@ ul[data-type='taskList'] li[data-checked='true'] div {
}
input[type='checkbox'] {
@apply size-4 cursor-pointer rounded !important;
@apply size-4 cursor-pointer rounded-sm !important;
}
ul[data-type='taskList'] ul[data-type='taskList'] {
@@ -67,7 +71,7 @@ ul[data-type='taskList'] ul[data-type='taskList'] {
}
.color::before {
@apply mb-[0.15rem] mr-[0.1rem] inline-block size-[1rem] rounded border border-muted align-middle;
@apply mb-[0.15rem] mr-[0.1rem] inline-block size-[1rem] rounded-sm border border-muted align-middle;
background-color: var(--color);
content: ' ';
}

View File

@@ -30,7 +30,7 @@
onclick={() => editor.chain().focus()}
>
<Highlighter />
<ChevronDown class="!size-3 text-muted-foreground" />
<ChevronDown class="size-3! text-muted-foreground" />
</Button>
</Popover.Trigger>
<Popover.Content class="bg-popover shadow-lg *:my-2">

View File

@@ -18,7 +18,7 @@
<Popover.Trigger>
<Button variant="ghost" size="sm" class="h-8">
<Image />
<ChevronDown class="!size-3 text-muted-foreground" />
<ChevronDown class="size-3! text-muted-foreground" />
</Button>
</Popover.Trigger>
<Popover.Content class="bg-popover shadow-lg *:my-2">

View File

@@ -31,7 +31,7 @@
class={cn('h-8', editor.isActive('link') && 'bg-muted')}
>
<Link />
<ChevronDown class="!size-3 text-muted-foreground" />
<ChevronDown class="size-3! text-muted-foreground" />
</Button>
</Popover.Trigger>
<Popover.Content class="bg-popover shadow-lg *:my-2">

View File

@@ -30,10 +30,10 @@
<DropdownMenu.Trigger>
<Button variant="ghost" size="sm" class="h-8" style={`color: ${currentColor}`}>
A
<ChevronDown class="!size-3" />
<ChevronDown class="size-3!" />
</Button>
</DropdownMenu.Trigger>
<DropdownMenu.Content class="max-h-[25rem] w-40 overflow-auto">
<DropdownMenu.Content class="max-h-100 w-40 overflow-auto">
<DropdownMenu.Group>
<span class="text-[0.75rem] font-medium text-muted-foreground">Text Color</span>
{#each colors as color}
@@ -56,7 +56,7 @@
>
<span>{color.label}</span>
{#if editor.isActive('textStyle', { color: color.value })}
<Check class="absolute right-2 !size-3 text-muted-foreground" />
<Check class="absolute right-2 size-3! text-muted-foreground" />
{/if}
</DropdownMenu.Item>
{/each}
@@ -80,7 +80,7 @@
>
<span>{color.label}</span>
{#if editor.isActive('highlight', { color: color.value })}
<Check class="absolute right-2 !size-3 text-muted-foreground" />
<Check class="absolute right-2 size-3! text-muted-foreground" />
{/if}
</DropdownMenu.Item>
{/each}

View File

@@ -15,10 +15,10 @@
<DropdownMenu.Trigger>
<Button variant="ghost" size="sm" class="h-8">
<Table />
<ChevronDown class="!size-3" />
<ChevronDown class="size-3!" />
</Button>
</DropdownMenu.Trigger>
<DropdownMenu.Content class="max-h-[25rem] w-40 overflow-auto">
<DropdownMenu.Content class="max-h-100 w-40 overflow-auto">
<DropdownMenu.Item
onclick={() =>
editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()}

View File

@@ -36,7 +36,7 @@
{:else}
<Minus />
{/if}
<ChevronDown class="!size-3 text-muted-foreground" />
<ChevronDown class="size-3! text-muted-foreground" />
</Button>
</DropdownMenu.Trigger>
<DropdownMenu.Content class="w-56">
@@ -46,7 +46,7 @@
>
<Heading1 /> Heading 1
{#if editor.isActive('heading', { level: 1 })}
<Check class="absolute right-2 !size-3 text-muted-foreground" />
<Check class="absolute right-2 size-3! text-muted-foreground" />
{/if}
</DropdownMenu.Item>
<DropdownMenu.Item
@@ -55,7 +55,7 @@
>
<Heading2 /> Heading 2
{#if editor.isActive('heading', { level: 2 })}
<Check class="absolute right-2 !size-3 text-muted-foreground" />
<Check class="absolute right-2 size-3! text-muted-foreground" />
{/if}
</DropdownMenu.Item>
<DropdownMenu.Item
@@ -64,7 +64,7 @@
>
<Heading3 /> Heading 3
{#if editor.isActive('heading', { level: 3 })}
<Check class="absolute right-2 !size-3 text-muted-foreground" />
<Check class="absolute right-2 size-3! text-muted-foreground" />
{/if}
</DropdownMenu.Item>
<DropdownMenu.Item
@@ -73,7 +73,7 @@
>
<Pilcrow /> Paragraph
{#if editor.isActive('paragraph')}
<Check class="absolute right-2 !size-3 text-muted-foreground" />
<Check class="absolute right-2 size-3! text-muted-foreground" />
{/if}
</DropdownMenu.Item>
<DropdownMenu.Item
@@ -82,7 +82,7 @@
>
<FileJson /> Code Block
{#if editor.isActive('codeBlock')}
<Check class="absolute right-2 !size-3 text-muted-foreground" />
<Check class="absolute right-2 size-3! text-muted-foreground" />
{/if}
</DropdownMenu.Item>
</DropdownMenu.Content>

View File

@@ -32,7 +32,7 @@
{:else}
<AlignLeft />
{/if}
<ChevronDown class="!size-3 text-muted-foreground" />
<ChevronDown class="size-3! text-muted-foreground" />
</Button>
</DropdownMenu.Trigger>
<DropdownMenu.Content class="w-56">
@@ -42,7 +42,7 @@
>
<AlignLeft /> Align Left
{#if editor.isActive({ textAlign: 'left' })}
<Check class="absolute right-2 !size-3 text-muted-foreground" />
<Check class="absolute right-2 size-3! text-muted-foreground" />
{/if}
</DropdownMenu.Item>
<DropdownMenu.Item
@@ -51,7 +51,7 @@
>
<AlignCenter /> Align Center
{#if editor.isActive({ textAlign: 'center' })}
<Check class="absolute right-2 !size-3 text-muted-foreground" />
<Check class="absolute right-2 size-3! text-muted-foreground" />
{/if}
</DropdownMenu.Item>
<DropdownMenu.Item
@@ -60,7 +60,7 @@
>
<AlignRight /> Align Right
{#if editor.isActive({ textAlign: 'right' })}
<Check class="absolute right-2 !size-3 text-muted-foreground" />
<Check class="absolute right-2 size-3! text-muted-foreground" />
{/if}
</DropdownMenu.Item>
<DropdownMenu.Item
@@ -69,7 +69,7 @@
>
<AlignJustify /> Align Justify
{#if editor.isActive({ textAlign: 'justify' })}
<Check class="absolute right-2 !size-3 text-muted-foreground" />
<Check class="absolute right-2 size-3! text-muted-foreground" />
{/if}
</DropdownMenu.Item>
</DropdownMenu.Content>

View File

@@ -30,7 +30,7 @@
onclick={() => editor.chain().focus()}
>
<Baseline />
<ChevronDown class="!size-3 text-muted-foreground" />
<ChevronDown class="size-3! text-muted-foreground" />
</Button>
</Popover.Trigger>
<Popover.Content class="bg-popover shadow-lg *:my-2">

View File

@@ -68,7 +68,7 @@ onMount(() => {
editorProps: {
attributes: {
class:
'm-auto p-2 focus:outline-none flex-1 prose text-foreground min-w-full max-h-full overflow-auto dark:prose-invert *:my-2'
'm-auto p-2 focus:outline-hidden flex-1 prose text-foreground min-w-full max-h-full overflow-auto dark:prose-invert *:my-2'
}
},
extensions: [

View File

@@ -4,7 +4,7 @@
import { type VariantProps, tv } from "tailwind-variants";
export const buttonVariants = tv({
base: "ring-offset-background focus-visible:ring-ring 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-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
base: "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 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 hover:bg-primary/90",

View File

@@ -22,7 +22,7 @@
bind:checked
bind:indeterminate
class={cn(
"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50",
className
)}
{...restProps}

View File

@@ -18,7 +18,7 @@
bind:ref
{sideOffset}
class={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md outline-none",
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md outline-hidden",
className
)}
{...restProps}

View File

@@ -15,7 +15,7 @@
<DropdownMenuPrimitive.Item
bind:ref
class={cn(
"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
inset && "pl-8",
className
)}

View File

@@ -14,7 +14,7 @@
<DropdownMenuPrimitive.RadioItem
bind:ref
class={cn(
"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50",
className
)}
{...restProps}

View File

@@ -12,7 +12,7 @@
<DropdownMenuPrimitive.SubContent
bind:ref
class={cn(
"bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-lg focus:outline-none",
"bg-popover text-popover-foreground z-50 min-w-32 rounded-md border p-1 shadow-lg focus:outline-hidden",
className
)}
{...restProps}

View File

@@ -17,7 +17,7 @@
<DropdownMenuPrimitive.SubTrigger
bind:ref
class={cn(
"data-[highlighted]:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
"data-[highlighted]:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
inset && "pl-8",
className
)}

View File

@@ -14,7 +14,7 @@
<input
bind:this={ref}
class={cn(
"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className
)}
bind:value

View File

@@ -20,7 +20,7 @@
{sideOffset}
{align}
class={cn(
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none",
"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-hidden",
className
)}
{...restProps}

View File

@@ -14,7 +14,7 @@
bind:ref
class={cn(
"bg-border shrink-0",
orientation === "horizontal" ? "h-[1px] w-full" : "min-h-full w-[1px]",
orientation === "horizontal" ? "h-px w-full" : "min-h-full w-px",
className
)}
{orientation}