clone/opencode
1
0
Fork 0
mirror of https://github.com/anomalyco/opencode.git synced 2026-02-01 22:48:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: improve shadows, borders

Browse Source
This commit is contained in:
Aaron Iker
2026-01-08 13:13:00 +01:00
parent 310a276816
commit 78f3810776
4 changed files with 18 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/ui/src/components/dialog.css
View File

@@ -43,14 +43,11 @@
/* padding: 8px; */
/* padding: 8px 8px 0 8px; */
border: 1px solid color-mix(in oklch, var(--border-base) 25%, transparent);
border: 1px solid color-mix(in oklch, var(--border-base) 50%, transparent);
border-radius: var(--radius-xl);
background: var(--surface-raised-stronger-non-alpha);
background-clip: padding-box;
box-shadow:
0 15px 45px light-dark(hsl(0 0% 0% / 0.05), hsl(0 0% 0% / 0.1)),
0 4px 12px light-dark(hsl(0 0% 0% / 0.05), hsl(0 0% 0% / 0.1)),
0 1px 3px light-dark(hsl(0 0% 0% / 0.025), hsl(0 0% 0% / 0.1));
box-shadow: var(--shadow-lg);
/* animation: contentHide 300ms ease-in forwards; */
/**/

3
packages/ui/src/components/dropdown-menu.css
View File

@@ -3,7 +3,8 @@
min-width: 8rem;
overflow: hidden;
border-radius: var(--radius-md);
border: 1px solid var(--border-weak-base);
border: 1px solid color-mix(in oklch, var(--border-base) 50%, transparent);
background-clip: padding-box;
background-color: var(--surface-raised-stronger-non-alpha);
padding: 4px;
box-shadow: var(--shadow-md);

5
packages/ui/src/components/popover.css
View File

@@ -7,9 +7,12 @@
min-width: 200px;
max-width: 320px;
border-radius: var(--radius-md);
border: 1px solid var(--border-weak-base);
background-color: var(--surface-raised-stronger-non-alpha);
border: 1px solid color-mix(in oklch, var(--border-base) 50%, transparent);
background-clip: padding-box;
box-shadow: var(--shadow-md);
transform-origin: var(--kb-popover-content-transform-origin);
&:focus-within {

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

@@ -47,9 +47,17 @@
--radius-xl: 0.625rem;
--shadow-xs:
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);
0 1px 2px -0.5px light-dark(hsl(0 0% 0% / 0.04), hsl(0 0% 0% / 0.06)),
0 0.5px 1.5px 0 light-dark(hsl(0 0% 0% / 0.025), hsl(0 0% 0% / 0.08)),
0 1px 3px 0 light-dark(hsl(0 0% 0% / 0.05), hsl(0 0% 0% / 0.1));
--shadow-md:
0 6px 8px -4px rgba(19, 16, 16, 0.12), 0 4px 3px -2px rgba(19, 16, 16, 0.12), 0 1px 2px -1px rgba(19, 16, 16, 0.12);
0 6px 12px -2px light-dark(hsl(0 0% 0% / 0.075), hsl(0 0% 0% / 0.1)),
0 4px 8px -2px light-dark(hsl(0 0% 0% / 0.075), hsl(0 0% 0% / 0.15)),
0 1px 2px light-dark(hsl(0 0% 0% / 0.1), hsl(0 0% 0% / 0.15));
--shadow-lg:
0 16px 48px -6px light-dark(hsl(0 0% 0% / 0.075), hsl(0 0% 0% / 0.15)),
0 6px 12px -2px light-dark(hsl(0 0% 0% / 0.05), hsl(0 0% 0% / 0.1)),
0 1px 2.5px light-dark(hsl(0 0% 0% / 0.025), hsl(0 0% 0% / 0.1));
--shadow-xs-border:
0 0 0 1px var(--border-base, rgba(11, 6, 0, 0.2)), 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);