monadical/opencode
13
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

feat(ui): add critical shadow for comment input validation, set editor popover radius to 14px

Browse Source
This commit is contained in:
David Hill
2026-01-24 18:57:46 +00:00
parent e2bffc29f2
commit 48236ee0ef
4 changed files with 10 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/app/src/pages/session.tsx
View File

@@ -2100,9 +2100,9 @@ export default function Page() {
<textarea
ref={textarea}
classList={{
"w-full resize-vertical p-2 rounded-[6px] bg-surface-base border text-text-strong text-12-regular leading-5 focus:outline-none focus:shadow-xs-border-select": true,
"border-transparent": !draftError(),
"border-border-critical-base": draftError(),
"w-full resize-vertical p-2 rounded-[6px] bg-surface-base text-text-strong text-12-regular leading-5 focus:outline-none": true,
"focus:shadow-xs-border-select": !draftError(),
"shadow-xs-border-critical-base": draftError(),
}}
rows={3}
placeholder="Add comment"

1
packages/ui/src/components/line-comment.css
View File

@@ -46,4 +46,5 @@
width: 380px;
max-width: min(380px, calc(100vw - 48px));
padding: 8px;
border-radius: 14px;
}

1
packages/ui/src/styles/tailwind/index.css
View File

@@ -66,6 +66,7 @@
--shadow-xs-border-select: var(--shadow-xs-border-select);
--shadow-xs-border-focus: var(--shadow-xs-border-focus);
--shadow-xs-border-hover: var(--shadow-xs-border-hover);
--shadow-xs-border-critical-base: var(--shadow-xs-border-critical-base);
--shadow-lg-border-base: var(--shadow-lg-border-base);
--animate-pulse: var(--animate-pulse);

5
packages/ui/src/styles/theme.css
View File

@@ -76,6 +76,11 @@
--shadow-xs-border-hover:
0 0 0 1px var(--border-weak-selected, rgba(0, 112, 255, 0.22)), 0 1px 2px -1px rgba(19, 16, 16, 0.04),
0 1px 2px 0 rgba(19, 16, 16, 0.06), 0 1px 3px 0 rgba(19, 16, 16, 0.08);
--shadow-xs-border-critical-base:
0 0 0 1px var(--border-critical-selected, #FC543A);
--shadow-xs-border-critical-focus:
0 0 0 3px var(--border-critical-weak, rgba(251, 34, 0, 0.18)), 0 0 0 1px var(--border-critical-selected, #FC543A),
0 1px 2px -1px rgba(19, 16, 16, 0.25), 0 1px 2px 0 rgba(19, 16, 16, 0.08), 0 1px 3px 0 rgba(19, 16, 16, 0.12);
--shadow-lg-border-base:
0 0 0 1px var(--border-weak-base, rgba(0, 0, 0, 0.07)), 0 36px 80px 0 rgba(0, 0, 0, 0.03),
0 13.141px 29.201px 0 rgba(0, 0, 0, 0.04), 0 6.38px 14.177px 0 rgba(0, 0, 0, 0.05),