authorgravatar for 91240327+shivamhwp@users.noreply.github.comshivam <91240327+shivamhwp@users.noreply.github.com> 2026-08-01 01:41:28+05:30
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-07-31 16:11:28-04:00
log03adf215ceebedeb9c5e813406154dd8353b36f6
tree8b2d322e6291d54e48e2617763e843d45691512b
parent916cff733cd00c85fe0419df5bcb9372a6384746
signature Signed by PGP key B5690EEEBB952194

follow-up normalization after #4700. (#4498)

Co-authored-by: T3 Code Test <t3code-test@example.com>

12 files changed, 181 insertions(+), 23 deletions(-)

apps/web/src/components/ProjectScriptsControl.test.tsx created+65
......@@ -0,0 +1,65 @@
1import type { ProjectScript, ResolvedKeybindingsConfig } from "@t3tools/contracts";
2import { renderToStaticMarkup } from "react-dom/server";
3import { describe, expect, it } from "vite-plus/test";
4
5import ProjectScriptsControl from "./ProjectScriptsControl";
6
7const EMPTY_KEYBINDINGS: ResolvedKeybindingsConfig = [];
8const PRIMARY_SCRIPT: ProjectScript = {
9 id: "dev",
10 name: "Dev",
11 command: "vp dev",
12 icon: "play",
13 runOnWorktreeCreate: false,
14};
15
16function renderControl(scripts: ReadonlyArray<ProjectScript>) {
17 return renderToStaticMarkup(
18 <ProjectScriptsControl
19 scripts={scripts}
20 keybindings={EMPTY_KEYBINDINGS}
21 onRunScript={() => {}}
22 onAddScript={async () => undefined as never}
23 onUpdateScript={async () => undefined as never}
24 onDeleteScript={async () => undefined as never}
25 />,
26 );
27}
28
29function buttonTag(html: string, ariaLabel: string) {
30 return html.match(new RegExp(`<button[^>]*aria-label="${ariaLabel}"[^>]*>`))?.[0];
31}
32
33function expectResponsiveXsControl(markup: string | undefined) {
34 expect(markup).toBeDefined();
35 expect(markup).toContain("h-7");
36 expect(markup).toContain("gap-1");
37 expect(markup).toContain("text-sm");
38 expect(markup).toContain("sm:h-6");
39 expect(markup).toContain("sm:text-xs");
40 expect(markup).toContain("w-7");
41 expect(markup).toContain("px-0");
42 expect(markup).toContain("sm:w-6");
43 expect(markup).toContain("@3xl/header-actions:w-auto!");
44 expect(markup).toContain("@3xl/header-actions:px-[calc(--spacing(2)-1px)]");
45}
46
47describe("ProjectScriptsControl compact controls", () => {
48 it("keeps the primary Run control compact and expands it with its label", () => {
49 const html = renderControl([PRIMARY_SCRIPT]);
50
51 expectResponsiveXsControl(buttonTag(html, "Run Dev"));
52 expect(html).toContain(
53 'class="sr-only @3xl/header-actions:not-sr-only @3xl/header-actions:ml-0.5"',
54 );
55 });
56
57 it("keeps the standalone Add control compact and expands it with its label", () => {
58 const html = renderControl([]);
59
60 expectResponsiveXsControl(buttonTag(html, "Add action"));
61 expect(html).toContain(
62 'class="sr-only @3xl/header-actions:not-sr-only @3xl/header-actions:ml-0.5"',
63 );
64 });
65});
apps/web/src/components/ProjectScriptsControl.tsx+8-1
......@@ -341,6 +341,7 @@ export default function ProjectScriptsControl({
341341 <Button
342342 size="xs"
343343 variant="outline"
344 className="w-7 px-0 sm:w-6 @3xl/header-actions:w-auto! @3xl/header-actions:px-[calc(--spacing(2)-1px)]"
344345 aria-label={`Run ${primaryScript.name}`}
345346 onClick={() => onRunScript(primaryScript)}
346347 />
......@@ -441,7 +442,13 @@ export default function ProjectScriptsControl({
441442 <Tooltip>
442443 <TooltipTrigger
443444 render={
444 <Button size="xs" variant="outline" aria-label="Add action" onClick={openAddDialog} />
445 <Button
446 size="xs"
447 variant="outline"
448 className="w-7 px-0 sm:w-6 @3xl/header-actions:w-auto! @3xl/header-actions:px-[calc(--spacing(2)-1px)]"
449 aria-label="Add action"
450 onClick={openAddDialog}
451 />
445452 }
446453 >
447454 <PlusIcon className="size-3.5" />
apps/web/src/components/SidebarV2.tsx+5-5
......@@ -261,9 +261,9 @@ function SidebarV2ThreadTooltip({
261261 align="start"
262262 sideOffset={4}
263263 variant="glass"
264 className="max-w-80 text-left whitespace-normal"
264 className="max-w-80 text-left whitespace-normal [&_[data-slot=tooltip-viewport]]:p-0"
265265 >
266 <div className="flex min-w-0 max-w-80 flex-col gap-2 px-0.5 py-1.5">
266 <div className="flex min-w-0 max-w-80 flex-col gap-2 p-[var(--floating-content-inset)]">
267267 <div className="min-w-0 truncate text-xs leading-none font-medium text-foreground">
268268 {thread.title}
269269 </div>
......@@ -918,7 +918,7 @@ const SidebarV2Row = memo(function SidebarV2Row(props: {
918918 />
919919 }
920920 >
921 <div className="relative z-10 h-[4.875rem] px-2.5 py-2">
921 <div className="relative z-10 h-[4.875rem] px-[var(--sidebar-row-content-inset)] py-[var(--sidebar-content-inset)]">
922922 <div className="flex h-5 min-w-0 items-center gap-1.5">
923923 <ProjectFavicon
924924 environmentId={thread.environmentId}
......@@ -2410,7 +2410,7 @@ export default function SidebarV2() {
24102410 <SidebarContent
24112411 className="gap-0"
24122412 fixedHeader={
2413 <SidebarGroup className="gap-1 p-2">
2413 <SidebarGroup className="gap-1 p-[var(--sidebar-content-inset)]">
24142414 <div className="flex items-center gap-1">
24152415 <div className="min-w-0 flex-1">
24162416 <CommandDialogTrigger
......@@ -2558,7 +2558,7 @@ export default function SidebarV2() {
25582558 </SidebarGroup>
25592559 }
25602560 >
2561 <SidebarGroup className="px-2 pb-1 pt-0">
2561 <SidebarGroup className="px-[var(--sidebar-content-inset)] pb-1 pt-0">
25622562 <TooltipProvider
25632563 key="sidebar-thread-tooltips-150"
25642564 delay={150}
apps/web/src/components/settings/SettingsSidebarNav.tsx+2-2
......@@ -75,7 +75,7 @@ export function SettingsSidebarNav({ pathname }: { pathname: string }) {
7575 return (
7676 <>
7777 <SidebarContent className="overflow-x-hidden">
78 <SidebarGroup className="p-2">
78 <SidebarGroup className="p-[var(--sidebar-content-inset)]">
7979 <SidebarMenu>
8080 {SETTINGS_NAV_ITEMS.map((item) => {
8181 const Icon = item.icon;
......@@ -95,7 +95,7 @@ export function SettingsSidebarNav({ pathname }: { pathname: string }) {
9595 </SidebarMenu>
9696 </SidebarGroup>
9797 </SidebarContent>
98 <SidebarFooter className="p-2">
98 <SidebarFooter className="p-[var(--sidebar-content-inset)]">
9999 <T3ConnectSidebarSignIn />
100100 <div className="flex items-center gap-1">
101101 <SidebarMenu className="min-w-0 flex-1">
apps/web/src/components/sidebar/SidebarChrome.tsx+1-1
......@@ -119,7 +119,7 @@ export const SidebarChromeFooter = memo(function SidebarChromeFooter() {
119119 }, [isMobile, navigate, setOpenMobile]);
120120
121121 return (
122 <SidebarFooter className="p-2">
122 <SidebarFooter className="p-[var(--sidebar-content-inset)]">
123123 <SidebarProviderUpdatePill />
124124 <SidebarUpdatePill />
125125 <SidebarMenu>
apps/web/src/components/ui/button.test.tsx created+31
......@@ -0,0 +1,31 @@
1import { renderToStaticMarkup } from "react-dom/server";
2import { describe, expect, it } from "vite-plus/test";
3import { FlaskConicalIcon } from "lucide-react";
4
5import { Button } from "./button";
6
7describe("button geometry tokens", () => {
8 it("uses the shared control radius and an opaque semantic icon color", () => {
9 const html = renderToStaticMarkup(
10 <Button size="icon-xs" variant="outline" aria-label="Run tests">
11 <FlaskConicalIcon />
12 </Button>,
13 );
14
15 expect(html).toContain("rounded-[var(--control-radius)]");
16 expect(html).toContain("[--control-icon-color:var(--muted-foreground)]");
17 expect(html).toContain("text-[var(--control-icon-color)]");
18 expect(html).not.toContain("opacity-80");
19 });
20
21 it("keeps compact icon buttons square at every breakpoint", () => {
22 const html = renderToStaticMarkup(
23 <Button size="icon-xs" aria-label="Add action">
24 <span>+</span>
25 </Button>,
26 );
27
28 expect(html).toContain("size-7");
29 expect(html).toContain("sm:size-6");
30 });
31});
apps/web/src/components/ui/button.tsx+5-5
......@@ -8,7 +8,7 @@ import type * as React from "react";
88import { cn } from "~/lib/utils";
99
1010const buttonVariants = cva(
11 "[&_svg]:-mx-0.5 relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-lg border font-medium text-base outline-none transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
11 "[--control-icon-color:currentColor] [&_svg]:-mx-0.5 relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-[var(--control-radius)] border font-medium text-base outline-none transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--control-radius)-1px)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 sm:text-sm [&_svg:not([class*='text-'])]:text-[var(--control-icon-color)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
1212 {
1313 defaultVariants: {
1414 size: "default",
......@@ -23,11 +23,11 @@ const buttonVariants = cva(
2323 "icon-xl":
2424 "size-11 sm:size-10 [&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4.5",
2525 "icon-xs":
26 "size-7 rounded-md before:rounded-[calc(var(--radius-md)-1px)] sm:size-6 not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-4 sm:not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-3.5",
26 "size-7 sm:size-6 not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-4 sm:not-in-data-[slot=input-group]:[&_svg:not([class*='size-'])]:size-3.5",
2727 lg: "h-10 px-[calc(--spacing(3.5)-1px)] sm:h-9",
2828 sm: "h-8 gap-1.5 px-[calc(--spacing(2.5)-1px)] sm:h-7",
2929 xl: "h-11 px-[calc(--spacing(4)-1px)] text-lg sm:h-10 sm:text-base [&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4.5",
30 xs: "h-7 gap-1 rounded-md px-[calc(--spacing(2)-1px)] text-sm before:rounded-[calc(var(--radius-md)-1px)] sm:h-6 sm:text-xs [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5",
30 xs: "h-7 gap-1 px-[calc(--spacing(2)-1px)] text-sm sm:h-6 sm:text-xs [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5",
3131 },
3232 variant: {
3333 default:
......@@ -37,10 +37,10 @@ const buttonVariants = cva(
3737 "destructive-outline":
3838 "border-input bg-popover not-dark:bg-clip-padding text-destructive-foreground shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-input/32 dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none [:hover,[data-pressed]]:border-destructive/32 [:hover,[data-pressed]]:bg-destructive/4",
3939 ghost:
40 "border-transparent text-foreground data-pressed:bg-accent [:hover,[data-pressed]]:bg-accent [&_svg:not([class*='text-'])]:text-muted-foreground",
40 "[--control-icon-color:var(--muted-foreground)] border-transparent text-foreground data-pressed:bg-accent [:hover,[data-pressed]]:bg-accent",
4141 link: "border-transparent underline-offset-4 [:hover,[data-pressed]]:underline",
4242 outline:
43 "border-input bg-popover not-dark:bg-clip-padding text-foreground shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-input/32 dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none [:hover,[data-pressed]]:bg-accent/50 dark:[:hover,[data-pressed]]:bg-input/64 [&_svg:not([class*='text-'])]:text-muted-foreground",
43 "[--control-icon-color:var(--muted-foreground)] border-input bg-popover not-dark:bg-clip-padding text-foreground shadow-xs/5 not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-input/32 dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/2%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)] [:disabled,:active,[data-pressed]]:shadow-none [:hover,[data-pressed]]:bg-accent/50 dark:[:hover,[data-pressed]]:bg-input/64",
4444 secondary:
4545 "border-transparent bg-secondary text-secondary-foreground [:active,[data-pressed]]:bg-secondary/80 [:hover,[data-pressed]]:bg-secondary/90",
4646 },
apps/web/src/components/ui/command.test.tsx created+31
......@@ -0,0 +1,31 @@
1import { renderToStaticMarkup } from "react-dom/server";
2import { describe, expect, it } from "vite-plus/test";
3
4import { Command, CommandFooter, CommandInput } from "./command";
5
6describe("command compact geometry", () => {
7 it("keeps shell selectors on the wrapper and direct-input padding on AutocompleteInput", () => {
8 const html = renderToStaticMarkup(
9 <Command>
10 <CommandInput placeholder="Search commands" />
11 </Command>,
12 );
13 const shellClass = html.match(/class="([^"]*px-\[var\(--command-shell-inset\)[^"]*)"/)?.[1];
14 const inputClass = html.match(/class="([^"]*has-focus-visible:ring-0[^"]*)"/)?.[1];
15
16 expect(shellClass).toContain(
17 "[&amp;_[data-slot=autocomplete-start-addon]]:ps-[calc(var(--command-shell-inset)+0.0625rem)]",
18 );
19 expect(shellClass).not.toContain("sm:*:data-[slot=autocomplete-input]");
20 expect(inputClass).toContain(
21 "sm:*:data-[slot=autocomplete-input]:ps-[calc(var(--command-shell-inset)+1.5rem)]!",
22 );
23 });
24
25 it("uses the semantic footer inset without changing compact vertical padding", () => {
26 const html = renderToStaticMarkup(<CommandFooter>Shortcuts</CommandFooter>);
27
28 expect(html).toContain("px-[var(--command-content-inset)]");
29 expect(html).toContain("py-2.5");
30 });
31});
apps/web/src/components/ui/command.tsx+8-3
......@@ -103,11 +103,16 @@ function CommandInput({
103103 wrapperClassName?: string | undefined;
104104}) {
105105 return (
106 <div className={cn("px-1.25 py-1.5", wrapperClassName)}>
106 <div
107 className={cn(
108 "px-[var(--command-shell-inset)] py-1.5 [&_[data-slot=autocomplete-start-addon]]:ps-[calc(var(--command-shell-inset)+0.0625rem)]",
109 wrapperClassName,
110 )}
111 >
107112 <AutocompleteInput
108113 autoFocus
109114 className={cn(
110 "border-transparent! bg-transparent! shadow-none before:hidden has-focus-visible:ring-0 placeholder:text-muted-foreground/80 *:data-[slot=autocomplete-input]:ps-9! sm:*:data-[slot=autocomplete-input]:ps-8.5!",
115 "border-transparent! bg-transparent! shadow-none before:hidden has-focus-visible:ring-0 placeholder:text-muted-foreground/80 *:data-[slot=autocomplete-input]:ps-9! sm:*:data-[slot=autocomplete-input]:ps-[calc(var(--command-shell-inset)+1.5rem)]!",
111116 className,
112117 )}
113118 placeholder={placeholder}
......@@ -211,7 +216,7 @@ function CommandFooter({ className, ...props }: React.ComponentProps<"div">) {
211216 return (
212217 <div
213218 className={cn(
214 "relative flex items-center justify-between gap-2 rounded-b-[calc(var(--radius-2xl)-1px)] bg-foreground/[0.025] px-4 py-2.5 font-medium text-sm text-muted-foreground [&_[data-slot=kbd-group]]:font-sans [&_[data-slot=kbd]]:bg-foreground/[0.08] [&_[data-slot=kbd]]:text-foreground [&_[data-slot=kbd]]:ring-0",
219 "relative flex items-center justify-between gap-2 rounded-b-[calc(var(--radius-2xl)-1px)] bg-foreground/[0.025] px-[var(--command-content-inset)] py-2.5 font-medium text-sm text-muted-foreground [&_[data-slot=kbd-group]]:font-sans [&_[data-slot=kbd]]:bg-foreground/[0.08] [&_[data-slot=kbd]]:text-foreground [&_[data-slot=kbd]]:ring-0",
215220 className,
216221 )}
217222 data-slot="command-footer"
apps/web/src/components/ui/sidebar.test.tsx+5-2
......@@ -55,12 +55,15 @@ describe("sidebar interactive cursors", () => {
5555
5656 expect(html).toContain('data-slot="sidebar-menu-button"');
5757 expect(html).toContain("h-8");
58 expect(html).toContain("rounded-md");
59 expect(html).toContain("px-2");
58 expect(html).toContain("rounded-[var(--control-radius)]");
59 expect(html).toContain("px-[var(--sidebar-row-content-inset)]");
6060 expect(html).toContain("py-1.5");
6161 expect(html).toContain("]:size-4");
6262 expect(html).toContain("]:shrink-0");
6363 expect(html).toContain("cursor-pointer");
64 expect(html).toContain("gap-[var(--sidebar-control-gap)]");
65 expect(html).toContain("text-[var(--sidebar-icon-color)]");
66 expect(html).not.toContain("[&amp;&gt;svg]:opacity-60");
6467 });
6568
6669 it("applies the shared default treatment to icon-only menu buttons", () => {
apps/web/src/components/ui/sidebar.tsx+8-4
......@@ -712,7 +712,10 @@ function SidebarContent({
712712function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
713713 return (
714714 <div
715 className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
715 className={cn(
716 "relative flex w-full min-w-0 flex-col p-[var(--sidebar-content-inset)]",
717 className,
718 )}
716719 data-sidebar="group"
717720 data-slot="sidebar-group"
718721 {...props}
......@@ -792,7 +795,7 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
792795}
793796
794797const sidebarMenuButtonVariants = cva(
795 "peer/menu-button flex w-full cursor-pointer items-center gap-2 overflow-hidden text-left outline-hidden ring-ring transition-[width,height,padding] hover:bg-sidebar-row-hover hover:text-sidebar-foreground focus-visible:ring-2 active:bg-sidebar-row-active active:text-sidebar-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pe-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-row-selected data-[active=true]:font-medium data-[active=true]:text-sidebar-foreground data-[state=open]:hover:bg-sidebar-row-hover data-[state=open]:hover:text-sidebar-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-muted-foreground [&>svg]:opacity-60 hover:[&>svg]:text-sidebar-foreground hover:[&>svg]:opacity-100 active:[&>svg]:text-sidebar-foreground active:[&>svg]:opacity-100 data-[active=true]:[&>svg]:text-sidebar-foreground data-[active=true]:[&>svg]:opacity-100",
798 "peer/menu-button flex w-full cursor-pointer items-center gap-[var(--sidebar-control-gap)] overflow-hidden text-left outline-hidden ring-ring transition-[width,height,padding] hover:bg-sidebar-row-hover hover:text-sidebar-foreground focus-visible:ring-2 active:bg-sidebar-row-active active:text-sidebar-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pe-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-row-selected data-[active=true]:font-medium data-[active=true]:text-sidebar-foreground data-[state=open]:hover:bg-sidebar-row-hover data-[state=open]:hover:text-sidebar-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-[var(--sidebar-content-inset)]! [&>span:last-child]:truncate [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0 [&>svg]:text-[var(--sidebar-icon-color)] hover:[&>svg]:text-sidebar-foreground active:[&>svg]:text-sidebar-foreground data-[active=true]:[&>svg]:text-sidebar-foreground",
796799 {
797800 defaultVariants: {
798801 size: "default",
......@@ -800,8 +803,9 @@ const sidebarMenuButtonVariants = cva(
800803 },
801804 variants: {
802805 size: {
803 default: "h-8 rounded-md px-2.5 py-1.5 text-sm",
804 icon: "size-8 justify-center rounded-md p-0",
806 default:
807 "h-8 rounded-[var(--control-radius)] px-[var(--sidebar-row-content-inset)] py-1.5 text-sm",
808 icon: "size-8 justify-center rounded-[var(--control-radius)] p-0",
805809 lg: "h-12 rounded-lg p-2 text-sm group-data-[collapsible=icon]:p-0!",
806810 sm: "h-7 rounded-lg p-2 text-xs",
807811 },
apps/web/src/index.css+12
......@@ -79,6 +79,18 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
7979 --app-scrollbar-width: 6px;
8080 --app-scrollbar-thumb: rgb(217 217 217);
8181 --app-scrollbar-thumb-hover: rgb(191 191 191);
82 /*
83 * Compact UI geometry. Keep these values semantic so sidebar, palette,
84 * tooltip, and toolbar controls cannot quietly drift apart.
85 */
86 --control-radius: 0.5rem;
87 --sidebar-content-inset: 0.5rem;
88 --sidebar-control-gap: 0.5rem;
89 --sidebar-icon-color: color-mix(in srgb, var(--sidebar-muted-foreground) 60%, var(--sidebar));
90 --sidebar-row-content-inset: 0.625rem;
91 --command-shell-inset: 0.5rem;
92 --command-content-inset: 1rem;
93 --floating-content-inset: 0.75rem;
8294 --glass-blur: 12px;
8395 --glass-opacity: 80%;
8496 --glass-saturation: 1.14;