fix(ci): load prod deploy secrets from Infisical over GitHub OIDC

.github/actions/deploy-env/action.yml

@@ -1,8 +1,8 @@
 name: deploy setup
 description: >-
-    Toolchain and dependencies for an alchemy deploy job. Secrets come from the job's GitHub
-    Environment (`production` or `pr-preview`) as env vars; alchemy reads them through Config
-    when it plans the stack (see apps/*/alchemy.run.ts and apps/backend/src/worker/env.ts).
+    Toolchain and dependencies for an alchemy deploy job. Secrets reach the job as env vars
+    (prd: Infisical's `prod` environment; previews: the `pr-preview` GitHub Environment); alchemy
+    reads them through Config when it plans the stack (see apps/*/alchemy.run.ts and apps/backend/src/worker/env.ts).
 
 runs:
     using: composite

.github/workflows/deploy-prd.yml

@@ -14,6 +14,8 @@ concurrency:
 
 permissions:
     contents: read
+    # The Infisical step signs in with this job's GitHub OIDC token.
+    id-token: write
 
 jobs:
     deploy:
@@ -31,57 +33,26 @@ jobs:
         env:
             # On workflow_run, `github.sha` is the branch head, not the commit CI tested.
             COMMIT_SHA: ${{ github.event.workflow_run.head_sha || github.sha }}
-            CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-            CLOUDFLARE_ACCOUNT_ID: ${{ vars.CLOUDFLARE_ACCOUNT_ID }}
-            # api Worker (apps/backend/src/worker/env.ts)
-            CLERK_SECRET_KEY: ${{ secrets.CLERK_SECRET_KEY }}
-            # Hazel sign-in
-            AUTH_GITHUB_CLIENT_ID: ${{ vars.AUTH_GITHUB_CLIENT_ID || secrets.AUTH_GITHUB_CLIENT_ID }}
-            AUTH_GITHUB_CLIENT_SECRET: ${{ secrets.AUTH_GITHUB_CLIENT_SECRET }}
-            AUTH_GOOGLE_CLIENT_ID: ${{ vars.AUTH_GOOGLE_CLIENT_ID || secrets.AUTH_GOOGLE_CLIENT_ID }}
-            AUTH_GOOGLE_CLIENT_SECRET: ${{ secrets.AUTH_GOOGLE_CLIENT_SECRET }}
-            AUTH_BINDING_KEY: ${{ secrets.AUTH_BINDING_KEY }}
-            AUTH_TRANSACTION_KEY: ${{ secrets.AUTH_TRANSACTION_KEY }}
-            AUTH_ACCESS_TOKEN_KID: ${{ vars.AUTH_ACCESS_TOKEN_KID || secrets.AUTH_ACCESS_TOKEN_KID }}
-            AUTH_ACCESS_TOKEN_PRIVATE_JWK: ${{ secrets.AUTH_ACCESS_TOKEN_PRIVATE_JWK }}
-            AUTH_PASSKEY_RP_ID: ${{ vars.AUTH_PASSKEY_RP_ID }}
-            AUTH_TRUSTED_ORIGINS: ${{ vars.AUTH_TRUSTED_ORIGINS }}
-            COOKIE_DOMAIN: ${{ vars.COOKIE_DOMAIN }}
-            S3_BUCKET: ${{ vars.S3_BUCKET }}
-            S3_ENDPOINT: ${{ vars.S3_ENDPOINT }}
-            S3_PUBLIC_URL: ${{ vars.S3_PUBLIC_URL }}
-            S3_ACCESS_KEY_ID: ${{ secrets.S3_ACCESS_KEY_ID }}
-            S3_SECRET_ACCESS_KEY: ${{ secrets.S3_SECRET_ACCESS_KEY }}
-            INTEGRATION_ENCRYPTION_KEY: ${{ secrets.INTEGRATION_ENCRYPTION_KEY }}
-            INTEGRATION_ENCRYPTION_KEY_VERSION: ${{ vars.INTEGRATION_ENCRYPTION_KEY_VERSION }}
-            INTEGRATION_ENCRYPTION_KEY_PREV: ${{ secrets.INTEGRATION_ENCRYPTION_KEY_PREV }}
-            INTEGRATION_ENCRYPTION_KEY_VERSION_PREV: ${{ vars.INTEGRATION_ENCRYPTION_KEY_VERSION_PREV }}
-            LINEAR_CLIENT_ID: ${{ vars.LINEAR_CLIENT_ID }}
-            LINEAR_CLIENT_SECRET: ${{ secrets.LINEAR_CLIENT_SECRET }}
-            DISCORD_CLIENT_ID: ${{ vars.DISCORD_CLIENT_ID }}
-            DISCORD_CLIENT_SECRET: ${{ secrets.DISCORD_CLIENT_SECRET }}
-            DISCORD_BOT_TOKEN: ${{ secrets.DISCORD_BOT_TOKEN }}
-            DISCORD_GATEWAY_ENABLED: ${{ vars.DISCORD_GATEWAY_ENABLED }}
-            GITHUB_APP_ID: ${{ vars.HAZEL_GITHUB_APP_ID }}
-            GITHUB_APP_SLUG: ${{ vars.HAZEL_GITHUB_APP_SLUG }}
-            GITHUB_APP_PRIVATE_KEY: ${{ secrets.HAZEL_GITHUB_APP_PRIVATE_KEY }}
-            GITHUB_WEBHOOK_SECRET: ${{ secrets.HAZEL_GITHUB_WEBHOOK_SECRET }}
-            INTERNAL_SECRET: ${{ secrets.INTERNAL_SECRET }}
-            KLIPY_API_KEY: ${{ secrets.KLIPY_API_KEY }}
-            OPENROUTER_API_KEY: ${{ secrets.OPENROUTER_API_KEY }}
-            # First-party bots (bots/*/src/worker.ts): each deploys only when its token is set
-            HAZEL_BOT_TOKEN: ${{ secrets.HAZEL_BOT_TOKEN }}
-            LINEAR_BOT_TOKEN: ${{ secrets.LINEAR_BOT_TOKEN }}
-            # Maple: an org-admin API key with `ingest_keys:read`, `dashboards:write`, `alerts:write`; the deploy binds the ingest key onto the Workers
-            MAPLE_API_KEY: ${{ secrets.MAPLE_API_KEY }}
-            # A Hazel channel's Maple webhook URL: production alerts post there (`@hazel/infra/maple-monitoring`)
-            MAPLE_ALERTS_WEBHOOK_URL: ${{ secrets.MAPLE_ALERTS_WEBHOOK_URL }}
+            # Every deploy secret (Cloudflare, the api Worker's env, bots, Maple) comes from
+            # Infisical's `prod` environment, the same source `alchemy:deploy:prd:local` reads.
+            # Don't list them here: a job-level `env:` entry shadows what the Infisical step exports.
         steps:
             - name: Checkout
               uses: actions/checkout@v4
               with:
                   ref: ${{ env.COMMIT_SHA }}
 
+            - name: Load secrets from Infisical
+              uses: Infisical/secrets-action@v1.0.18
+              with:
+                  # A machine identity with OIDC Auth (issuer https://token.actions.githubusercontent.com)
+                  # and read access to `prod`. The repo uses immutable OIDC subjects, so it is bound to
+                  # repo:MapleTechLabs@282671153/hazel@972339714:environment:production.
+                  method: oidc
+                  identity-id: ${{ vars.INFISICAL_IDENTITY_ID }}
+                  project-id: 9e94bb4d-0348-440c-b0f3-073b6f1977f3
+                  env-slug: prod
+
             - name: Deploy setup
               uses: ./.github/actions/deploy-env
 

apps/web-foldkit/package.json

@@ -8,6 +8,7 @@
 		"typecheck": "tsc --noEmit",
 		"test": "vitest run",
 		"test:browser": "vitest run --config vitest.browser.config.ts",
+		"gallery": "vitest run --config vitest.gallery.config.ts",
 		"build:desktop": "./scripts/build-desktop.sh"
 	},
 	"dependencies": {

apps/web-foldkit/src/core/components/ui/button.styles.ts

@@ -3,7 +3,7 @@ import { tv } from "tailwind-variants"
 export const buttonStyles = tv({
 	base: [
 		"[--btn-border:var(--color-fg)]/15 [--btn-icon-active:var(--btn-fg)] [--btn-outline:var(--btn-bg)] [--btn-radius:calc(var(--radius-lg)-1px)] [--btn-ring:var(--btn-bg)]/20",
-		"bg-(--btn-bg) text-(--btn-fg) outline-(--btn-outline) ring-(--btn-ring) not-disabled:not-data-pending:hover:bg-(--btn-overlay)",
+		"bg-(--btn-bg) text-(--btn-fg) outline-(--btn-outline) ring-(--btn-ring) not-disabled:not-data-pending:hover:bg-(--btn-overlay) not-disabled:not-data-pending:active:bg-(--btn-overlay)",
 		"relative isolate inline-flex items-center justify-center border border-(--btn-border) font-medium hover:no-underline",
 		"focus:outline-0 focus-visible:outline focus-visible:outline-offset-2 focus-visible:ring-2 focus-visible:ring-offset-3 focus-visible:ring-offset-bg",
 		"*:data-[slot=icon]:-mx-0.5 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:self-center *:data-[slot=icon]:text-(--btn-icon) focus-visible:*:data-[slot=icon]:text-(--btn-icon-active)/80 not-disabled:not-data-pending:hover:*:data-[slot=icon]:text-(--btn-icon-active)/90 forced-colors:[--btn-icon:ButtonText] forced-colors:hover:[--btn-icon:ButtonText]",
@@ -14,12 +14,12 @@ export const buttonStyles = tv({
 	variants: {
 		intent: {
 			primary:
-				"[--btn-bg:var(--color-primary)] [--btn-fg:var(--color-primary-fg)] [--btn-icon-active:var(--primary-fg)]/80 [--btn-icon:var(--primary-fg)]/60 [--btn-overlay:color-mix(in_oklab,var(--color-primary-fg)_10%,var(--color-primary)_90%)]",
+				"shadow-control [--btn-border:transparent] [--btn-bg:var(--color-primary)] [--btn-fg:var(--color-primary-fg)] [--btn-icon-active:var(--primary-fg)]/80 [--btn-icon:var(--primary-fg)]/60 [--btn-overlay:color-mix(in_oklab,var(--color-primary-fg)_10%,var(--color-primary)_90%)]",
 			secondary:
-				"[--btn-bg:var(--color-secondary)] [--btn-fg:var(--color-secondary-fg)] [--btn-icon:var(--color-muted-fg)] [--btn-outline:var(--color-secondary-fg)] [--btn-overlay:color-mix(in_oklab,var(--color-secondary-fg)_10%,var(--color-secondary)_90%)] [--btn-ring:var(--color-muted-fg)]/20",
+				"[--btn-border:transparent] [--btn-bg:var(--color-secondary)] [--btn-fg:var(--color-secondary-fg)] [--btn-icon:var(--color-muted-fg)] [--btn-outline:var(--color-secondary-fg)] [--btn-overlay:color-mix(in_oklab,var(--color-secondary-fg)_10%,var(--color-secondary)_90%)] [--btn-ring:var(--color-muted-fg)]/20",
 			warning:
 				"[--btn-bg:var(--color-warning)] [--btn-fg:var(--color-warning-fg)] [--btn-icon:var(--color-warning-fg)]/60 [--btn-overlay:color-mix(in_oklab,var(--color-white)_10%,var(--color-warning)_90%)]",
-			danger: "[--btn-bg:var(--color-danger)] [--btn-fg:var(--color-danger-fg)] [--btn-icon:color-mix(in_oklab,var(--color-danger-fg)_60%,var(--danger)_40%)] [--btn-overlay:color-mix(in_oklab,var(--color-white)_10%,var(--color-danger)_90%)]",
+			danger: "shadow-control [--btn-border:transparent] [--btn-bg:var(--color-danger)] [--btn-fg:var(--color-danger-fg)] [--btn-icon:color-mix(in_oklab,var(--color-danger-fg)_60%,var(--danger)_40%)] [--btn-overlay:color-mix(in_oklab,var(--color-white)_10%,var(--color-danger)_90%)]",
 			outline:
 				"border-border [--btn-bg:transparent] [--btn-icon:var(--color-muted-fg)] [--btn-outline:var(--color-ring)] [--btn-overlay:var(--color-secondary)] [--btn-ring:var(--color-ring)]/20",
 			plain: "border-transparent [--btn-bg:transparent] [--btn-icon:var(--color-muted-fg)] [--btn-outline:var(--color-ring)] [--btn-overlay:var(--color-secondary)] [--btn-ring:var(--color-ring)]/20",

apps/web-foldkit/src/core/components/ui/card.styles.ts

@@ -1,10 +1,10 @@
 export const cardStyles = {
-	card: "overflow-hidden rounded-xl border shadow-sm",
+	card: "overflow-hidden rounded-xl border",
 	cardDefault: "border-border bg-bg",
 	cardDanger: "border-danger/20 bg-danger/5",
-	cardHeader: "border-border border-b bg-bg-muted/30 px-4 py-5 md:px-6",
+	cardHeader: "flex flex-col gap-0.5 border-border border-b px-4 py-4 md:px-6",
 	cardHeaderGroup: "flex flex-col items-start gap-4 md:flex-row",
 	cardBody: "p-4 md:p-6",
-	cardTitle: "font-semibold text-2xl leading-none tracking-tight",
-	cardDescription: "text-muted-fg text-sm",
+	cardTitle: "font-medium text-base/6 text-fg",
+	cardDescription: "text-fg-2 text-sm",
 } as const

apps/web-foldkit/src/core/components/ui/date-field.styles.ts

@@ -1,7 +1,7 @@
 export const dateInputStyles = [
 	"relative block appearance-none rounded-lg px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)]",
 	"text-base/6 text-fg placeholder:text-muted-fg sm:text-sm/6",
-	"border border-input enabled:hover:border-muted-fg/30",
+	"border border-transparent bg-field enabled:hover:bg-field-hover",
 	"focus-within:border-ring/70 focus-within:outline-hidden focus-within:ring-3 focus-within:ring-ring/20 focus-within:hover:border-ring/80",
 	"group-data-open:border-ring/70 group-data-open:outline-hidden group-data-open:ring-3 group-data-open:ring-ring/20 group-data-open:enabled:hover:border-ring/80",
 	"data-invalid:border-danger-subtle-fg/70 focus-within:data-invalid:border-danger-subtle-fg/70 focus-within:data-invalid:ring-danger-subtle-fg/20 focus-within:data-invalid:hover:border-danger-subtle-fg/80 data-invalid:enabled:hover:border-danger-subtle-fg/80",

apps/web-foldkit/src/core/components/ui/dropdown.styles.ts

@@ -19,7 +19,7 @@ export const dropdownItemStyles = tv({
 		// avatar
 		"*:data-[slot=avatar]:mr-(--mr-icon) has-[[slot=description]]:*:data-[slot=avatar]:row-span-2 *:data-[slot=avatar]:[--avatar-size:--spacing(6)] sm:*:data-[slot=avatar]:[--avatar-size:--spacing(5)]",
 		// icon
-		"*:data-[slot=icon]:col-start-1 *:data-[slot=icon]:row-start-1 *:data-[slot=icon]:mr-(--mr-icon) *:data-[slot=icon]:-ml-0.5 *:data-[slot=icon]:shrink-0 [&_[data-slot='icon']:not([class*='text-'])]:text-muted-fg",
+		"*:data-[slot=icon]:col-start-1 *:data-[slot=icon]:row-start-1 *:data-[slot=icon]:mr-(--mr-icon) *:data-[slot=icon]:-ml-0.5 *:data-[slot=icon]:shrink-0 [&_[data-slot='icon']:not([class*='text-'])]:text-fg-2",
 		"not-has-[[slot=description]]:*:data-[slot=icon]:size-5 sm:not-has-[[slot=description]]:*:data-[slot=icon]:size-4",
 		"has-[[slot=description]]:*:data-[slot=icon]:h-lh has-[[slot=description]]:[&_[data-slot='icon']:not([class*='w-'])]:w-5 sm:has-[[slot=description]]:[&_[data-slot='icon']:not([class*='w-'])]:w-4",
 		"[&>[slot=label]+[data-slot=icon]]:absolute [&>[slot=label]+[data-slot=icon]]:right-1",
@@ -46,22 +46,22 @@ export const dropdownItemStyles = tv({
 		},
 		isSelected: {
 			true: [
-				"[&_[data-slot='icon']:not([class*='text-'])]:text-accent-fg",
+				"[&_[data-slot='icon']:not([class*='text-'])]:text-fg",
 				"has-data-[slot=avatar]:pr-6 has-data-[slot=icon]:pr-6",
 			],
 		},
 		isFocused: {
 			true: [
-				"*:data-[slot=keyboard]:text-accent-fg [&_[data-slot='icon']:not([class*='text-'])]:text-accent-fg",
-				"bg-accent text-accent-fg forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]",
-				"[&_.text-muted-fg]:text-accent-fg/80 *:[[slot=description]]:text-accent-fg *:[[slot=label]]:text-accent-fg",
+				"*:data-[slot=keyboard]:text-fg-2 [&_[data-slot='icon']:not([class*='text-'])]:text-fg-3",
+				"bg-wash-strong text-fg forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]",
+				"[&_.text-muted-fg]:text-fg-2 *:[[slot=description]]:text-fg-2 *:[[slot=label]]:text-fg",
 			],
 		},
 		isHovered: {
 			true: [
-				"*:data-[slot=keyboard]:text-accent-fg [&_[data-slot='icon']:not([class*='text-'])]:text-accent-fg",
-				"bg-accent text-accent-fg forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]",
-				"[&_.text-muted-fg]:text-accent-fg/80 *:[[slot=description]]:text-accent-fg *:[[slot=label]]:text-accent-fg",
+				"*:data-[slot=keyboard]:text-fg-2 [&_[data-slot='icon']:not([class*='text-'])]:text-fg-3",
+				"bg-wash-strong text-fg forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]",
+				"[&_.text-muted-fg]:text-fg-2 *:[[slot=description]]:text-fg-2 *:[[slot=label]]:text-fg",
 			],
 		},
 	},
@@ -77,6 +77,6 @@ export const dropdownCheckIndicatorClassName = twJoin(
 /** Base classes, each merged with the caller's `className` by `twMerge`. */
 export const dropdownLabelBase = "col-start-2"
 export const dropdownDescriptionBase = "col-start-2 font-normal text-muted-fg text-sm"
-export const dropdownSeparatorBase = "col-span-full -mx-1 h-px bg-fg/10"
+export const dropdownSeparatorBase = "col-span-full -mx-1 my-1 h-px bg-border"
 export const dropdownKeyboardBase =
 	"absolute right-2 pl-2 group-hover:text-primary-fg group-data-focused:text-primary-fg"

apps/web-foldkit/src/core/components/ui/input.styles.ts

@@ -2,7 +2,7 @@
 export const inputStyles = [
 	"relative block w-full appearance-none rounded-lg px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)]",
 	"text-base/6 text-fg placeholder:text-muted-fg sm:text-sm/6",
-	"border border-input enabled:hover:border-muted-fg/30",
+	"border border-transparent bg-field enabled:hover:bg-field-hover",
 	"outline-hidden focus:border-ring/70 focus:ring-3 focus:ring-ring/20 focus:enabled:hover:border-ring/80",
 	"data-invalid:border-danger-subtle-fg/70 focus:data-invalid:border-danger-subtle-fg/70 focus:data-invalid:ring-danger-subtle-fg/20 data-invalid:enabled:hover:border-danger-subtle-fg/80 focus:data-invalid:enabled:hover:border-danger-subtle-fg/80",
 	"[&::-ms-reveal]:hidden [&::-webkit-search-cancel-button]:hidden",

apps/web-foldkit/src/core/components/ui/menu.styles.ts

@@ -16,7 +16,7 @@ export const menuPopoverBase = "min-w-32"
 export const menuItemSubmenuOpen = {
 	danger: "data-open:bg-danger-subtle data-open:text-danger-subtle-fg",
 	warning: "data-open:bg-warning-subtle data-open:text-warning-subtle-fg",
-	none: "data-open:bg-accent data-open:text-accent-fg data-open:*:data-[slot=icon]:text-accent-fg data-open:*:[.text-muted-fg]:text-accent-fg",
+	none: "data-open:bg-wash-strong data-open:text-fg data-open:*:data-[slot=icon]:text-fg-3 data-open:*:[.text-muted-fg]:text-fg-2",
 } as const
 
 export const menuChevronClassName = "absolute right-2 size-3.5"

apps/web-foldkit/src/core/components/ui/select.styles.ts

@@ -9,9 +9,9 @@ export const selectTriggerWrapperClassName = "relative block w-full"
 
 /** The `cx` arguments of SelectTrigger's button, before the caller's `className`. */
 export const selectTriggerBase = [
-	"group/select-trigger flex w-full min-w-0 cursor-default items-center gap-x-2 rounded-lg border border-input px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] text-start text-fg outline-hidden transition duration-200 sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)] sm:text-sm/6 sm:*:text-sm/6 dark:shadow-none",
+	"group/select-trigger flex w-full min-w-0 cursor-default items-center gap-x-2 rounded-lg border border-transparent bg-field px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] text-start text-fg outline-hidden sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)] sm:text-sm/6 sm:*:text-sm/6 dark:shadow-none",
 	"focus:border-ring/70 focus:bg-primary-subtle/5 focus:ring-3 focus:ring-ring/20 focus:enabled:hover:border-ring/80",
-	"enabled:hover:border-muted-fg/30",
+	"enabled:hover:bg-field-hover",
 	"group-data-open/select:border-ring/70 group-data-open/select:bg-primary-subtle/5 group-data-open/select:ring-3 group-data-open/select:ring-ring/20",
 	"group-data-open/select:data-invalid:border-danger-subtle-fg/70 group-data-open/select:data-invalid:bg-danger-subtle/5 group-data-open/select:data-invalid:ring-3 group-data-open/select:data-invalid:ring-danger-subtle-fg/20 group-data-invalid/select:border-danger-subtle-fg/70 group-data-invalid/select:bg-danger-subtle/5 group-data-invalid/select:ring-danger-subtle-fg/20 group-data-invalid/select:enabled:hover:border-danger-subtle-fg/80 group-data-focused/select:group-data-invalid/select:border-danger-subtle-fg/70 group-data-focused/select:group-data-invalid/select:ring-danger-subtle-fg/20 group-data-focused/select:group-data-invalid/select:enabled:hover:border-danger-subtle-fg/80",
 	"*:data-[slot=icon]:size-5 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:self-center *:data-[slot=icon]:text-(--btn-icon) data-pressed:*:data-[slot=icon]:text-(--btn-icon-active) focus-visible:*:data-[slot=icon]:text-(--btn-icon-active)/80 enabled:hover:*:data-[slot=icon]:text-(--btn-icon-active)/90 sm:*:data-[slot=icon]:size-4 forced-colors:[--btn-icon:ButtonText] forced-colors:hover:[--btn-icon:ButtonText]",

apps/web-foldkit/src/core/components/ui/textarea.styles.ts

@@ -2,7 +2,7 @@
 export const textareaStyles = [
 	"field-sizing-content relative block min-h-16 w-full appearance-none rounded-lg px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)]",
 	"text-base/6 text-fg placeholder:text-muted-fg sm:text-sm/6",
-	"border border-input enabled:hover:border-muted-fg/30",
+	"border border-transparent bg-field enabled:hover:bg-field-hover",
 	"outline-hidden focus:border-ring/70 focus:ring-3 focus:ring-ring/20 focus:enabled:hover:border-ring/80",
 	"data-invalid:border-danger-subtle-fg/70 focus:data-invalid:border-danger-subtle-fg/70 focus:data-invalid:ring-danger-subtle-fg/20 data-invalid:enabled:hover:border-danger-subtle-fg/80 data-invalid:focus:enabled:hover:border-danger-subtle-fg/80",
 	"data-disabled:bg-muted forced-colors:in-data-disabled:text-[GrayText]",

apps/web-foldkit/src/core/lib/theme/apply.ts

@@ -21,7 +21,7 @@ const LIGHT_MODE_GRAY_TOKENS = {
 	"--overlay-fg": "950",
 	"--muted": "100",
 	"--muted-fg": "600",
-	"--border": "300",
+	"--border": "200",
 	"--input": "300",
 	"--navbar": "25",
 	"--navbar-fg": "950",