starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-07-03 19:41:48 +02:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Upgrade Tailwind to v4 (#491)

Browse Source
This commit is contained in:
Gregory Schier
2026-07-02 09:53:22 -07:00
committed by GitHub
parent bdf78254b5
commit 9b524e3dc7
112 changed files with 744 additions and 1027 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/Button.tsx
+3 -3
View File
@@ -61,8 +61,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
"border",
"max-w-full min-w-0",
"hocus:opacity-100",
"whitespace-nowrap outline-none",
"flex-shrink-0 flex items-center",
"whitespace-nowrap outline-hidden",
"shrink-0 flex items-center",
"outline-0",
isDisabled ? "pointer-events-none opacity-disabled" : "pointer-events-auto",
justify === "start" && "justify-start",
@@ -70,7 +70,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
size === "md" && "h-md px-3 rounded-md",
size === "sm" && "h-sm px-2.5 rounded-md",
size === "xs" && "h-xs px-2 text-sm rounded-md",
size === "2xs" && "h-2xs px-2 text-xs rounded",
size === "2xs" && "h-2xs px-2 text-xs rounded-sm",
size === "auto" && "px-3 py-2 rounded-md",
variant === "solid" && "border-transparent",
variant === "solid" &&
packages/ui/src/components/DropMarker.tsx
+2 -2
View File
@@ -23,8 +23,8 @@ export const DropMarker = memo(
<div
className={classNames(
"absolute bg-primary rounded-full",
orientation === "horizontal" && "left-2 right-2 -bottom-[0.1rem] h-[0.2rem]",
orientation === "vertical" && "-left-[0.1rem] top-0 bottom-0 w-[0.2rem]",
orientation === "horizontal" && "left-2 right-2 bottom-[-0.1rem] h-[0.2rem]",
orientation === "vertical" && "left-[-0.1rem] top-0 bottom-0 w-[0.2rem]",
)}
/>
</div>
packages/ui/src/components/FormattedError.tsx
+2 -2
View File
@@ -12,8 +12,8 @@ export function FormattedError({ children, className }: Props) {
className={classNames(
className,
"cursor-text select-auto",
"[&_*]:cursor-text [&_*]:select-auto",
"font-mono text-sm w-full bg-surface-highlight p-3 rounded",
"**:cursor-text **:select-auto",
"font-mono text-sm w-full bg-surface-highlight p-3 rounded-sm",
"whitespace-pre-wrap border border-danger border-dashed overflow-x-auto",
)}
>
packages/ui/src/components/HeaderSize.tsx
+1 -1
View File
@@ -67,7 +67,7 @@ export function HeaderSize({
style={finalStyle}
className={classNames(
className,
"pt-[1px]", // Make up for bottom border
"pt-px", // Make up for bottom border
"select-none relative flex items-center",
"w-full border-b border-border-subtle min-w-0",
)}
packages/ui/src/components/Icon.tsx
+1 -1
View File
@@ -319,7 +319,7 @@ export const Icon = memo(function Icon({
className,
!spin && "transform-gpu",
spin && "animate-spin",
"flex-shrink-0",
"shrink-0",
size === "xl" && "h-6 w-6",
size === "lg" && "h-5 w-5",
size === "md" && "h-4 w-4",
packages/ui/src/components/IconButton.tsx
+3 -3
View File
@@ -60,8 +60,8 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(functio
type={type}
className={classNames(
className,
"group/button relative flex-shrink-0",
"!px-0",
"group/button relative shrink-0",
"px-0!",
size === "md" && "w-md",
size === "sm" && "w-sm",
size === "xs" && "w-xs",
@@ -85,7 +85,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(functio
className={classNames(
iconClassName,
"group-hover/button:text-text",
confirmed && "!text-success",
confirmed && "text-success!",
props.disabled && "opacity-70",
)}
/>
packages/ui/src/components/InlineCode.tsx
+2 -2
View File
@@ -6,8 +6,8 @@ export function InlineCode({ className, ...props }: HTMLAttributes<HTMLSpanEleme
<code
className={classNames(
className,
"font-mono text-shrink bg-surface-highlight border border-border-subtle flex-grow-0",
"px-1.5 py-0.5 rounded text shadow-inner break-words",
"font-mono text-shrink bg-surface-highlight border border-border-subtle grow-0",
"px-1.5 py-0.5 rounded-sm text shadow-inner wrap-break-word",
)}
{...props}
/>
packages/ui/src/components/LoadingIcon.tsx
+1 -1
View File
@@ -8,7 +8,7 @@ interface Props {
export function LoadingIcon({ size = "md", className }: Props) {
const classes = classNames(
className,
"text-inherit flex-shrink-0",
"text-inherit shrink-0",
size === "xl" && "h-6 w-6",
size === "lg" && "h-5 w-5",
size === "md" && "h-4 w-4",
packages/ui/src/components/Overlay.tsx
+1 -1
View File
@@ -72,7 +72,7 @@ export function Overlay({
onClick={onClose}
className={classNames(
"absolute inset-0",
variant === "default" && "bg-backdrop backdrop-blur-sm",
variant === "default" && "bg-backdrop backdrop-blur-xs",
)}
/>
packages/ui/src/components/ResizeHandle.tsx
+1 -1
View File
@@ -101,7 +101,7 @@ export function ResizeHandle({
{isResizing && (
<div
className={classNames(
"fixed -left-[100vw] -right-[100vw] -top-[100vh] -bottom-[100vh]",
"fixed left-[-100vw] right-[-100vw] top-[-100vh] bottom-[-100vh]",
vertical && "cursor-row-resize",
!vertical && "cursor-col-resize",
)}
packages/ui/src/components/SidebarLayout.tsx
+1 -1
View File
@@ -130,7 +130,7 @@ export function SidebarLayout({
</div>
<ResizeHandle
style={drag}
className="-translate-x-[1px]"
className="-translate-x-px"
justify="end"
side="right"
onResizeStart={handleResizeStart}
packages/ui/src/components/Table.tsx
+2 -2
View File
@@ -87,7 +87,7 @@ export function TableCell({
<td
className={classNames(
className,
"py-2 [&:not(:first-child)]:pl-4 whitespace-nowrap",
"py-2 not-first:pl-4 whitespace-nowrap",
align === "left" ? "text-left" : align === "center" ? "text-center" : "text-right",
)}
>
@@ -119,7 +119,7 @@ export function TableHeaderCell({
<th
className={classNames(
className,
"whitespace-nowrap py-2 [&:not(:first-child)]:pl-4 text-left text-text-subtle",
"whitespace-nowrap py-2 not-first:pl-4 text-left text-text-subtle",
)}
>
{children}
packages/ui/src/components/WindowControls.tsx
+3 -3
View File
@@ -38,7 +38,7 @@ export function WindowControls({
{!onlyX && (
<>
<Button
className="!h-full px-4 text-text-subtle hocus:text hocus:bg-surface-highlight rounded-none"
className="h-full! px-4 text-text-subtle hocus:text hocus:bg-surface-highlight rounded-none"
color="custom"
onClick={() => getCurrentWebviewWindow().minimize()}
>
@@ -48,7 +48,7 @@ export function WindowControls({
</svg>
</Button>
<Button
className="!h-full px-4 text-text-subtle hocus:text hocus:bg-surface-highlight rounded-none"
className="h-full! px-4 text-text-subtle hocus:text hocus:bg-surface-highlight rounded-none"
color="custom"
onClick={async () => {
const w = getCurrentWebviewWindow();
@@ -81,7 +81,7 @@ export function WindowControls({
)}
<Button
color="custom"
className="!h-full px-4 text-text-subtle rounded-none hocus:bg-danger hocus:text-text"
className="h-full! px-4 text-text-subtle rounded-none hocus:bg-danger hocus:text-text"
onClick={() => getCurrentWebviewWindow().close()}
>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
packages/ui/src/components/tree/Tree.tsx
+3 -3
View File
@@ -662,7 +662,7 @@ function TreeInner<T extends { id: string }>(
ref={treeRef}
className={classNames(
className,
"outline-none h-full",
"outline-hidden h-full",
"overflow-y-auto overflow-x-hidden",
"grid grid-rows-[auto_1fr]",
)}
@@ -670,8 +670,8 @@ function TreeInner<T extends { id: string }>(
<div
className={classNames(
"[&_.tree-item.selected_.tree-item-inner]:text-text",
"[&:focus-within]:[&_.tree-item.selected]:bg-surface-active",
"[&:not(:focus-within)]:[&_.tree-item.selected:not([data-context-menu-open])]:bg-surface-highlight",
"focus-within:[&_.tree-item.selected]:bg-surface-active",
"not-focus-within:[&_.tree-item.selected:not([data-context-menu-open])]:bg-surface-highlight",
"[&_.tree-item.selected[data-context-menu-open]]:bg-surface-active",
// Round the items, but only if the ends of the selection.
// Also account for the drop marker being in between items
packages/ui/src/components/tree/TreeItem.tsx
+4 -4
View File
@@ -326,7 +326,7 @@ function TreeItem_<T extends { id: string }>({
<button
type="button"
tabIndex={-1}
className="h-full pl-[0.5rem] outline-none"
className="h-full pl-2 outline-hidden"
onClick={toggleCollapsed}
>
<Icon
@@ -334,7 +334,7 @@ function TreeItem_<T extends { id: string }>({
className={classNames(
"transition-transform text-text-subtlest",
"ml-auto",
"w-[1rem] h-[1rem]",
"w-4 h-4",
!isCollapsed && node.children.length > 0 && "rotate-90",
)}
/>
@@ -349,7 +349,7 @@ function TreeItem_<T extends { id: string }>({
onClick={handleClick}
onDoubleClick={handleDoubleClick}
disabled={editing}
className="cursor-default tree-item-inner pr-1 focus:outline-none flex items-center gap-2 h-full whitespace-nowrap"
className="cursor-default tree-item-inner pr-1 focus:outline-hidden flex items-center gap-2 h-full whitespace-nowrap"
{...attributes}
{...listeners}
tabIndex={isLastSelected ? 0 : -1}
@@ -366,7 +366,7 @@ function TreeItem_<T extends { id: string }>({
placeholder={placeholder}
autoCapitalize="off"
autoCorrect="off"
className="bg-transparent outline-none w-full cursor-text"
className="bg-transparent outline-hidden w-full cursor-text"
onBlur={handleEditBlur}
onKeyDown={handleEditKeyDown}
/>