aljaz/opencode
1
0
Fork 0
mirror of https://github.com/aljazceru/opencode.git synced 2025-12-21 17:54:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

wip: Tweaking button styles

Browse Source
This commit is contained in:
David Hill
2025-10-31 17:02:12 +00:00
parent 5379abe330
commit 16f5e16395
2 changed files with 23 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
packages/ui/src/components/button.css
View File

@@ -7,6 +7,7 @@
border-radius: 6px; border-radius: 6px;
text-decoration: none; text-decoration: none;
user-select: none; user-select: none;
outline: none;
&[data-variant="primary"] { &[data-variant="primary"] {
border-color: var(--border-base); border-color: var(--border-base);
@@ -28,22 +29,26 @@
} }
&[data-variant="secondary"] { &[data-variant="secondary"] {
border-color: transparent; border: transparent;
background-color: var(--button-secondary-base); background-color: var(--button-secondary-base);
color: var(--text-strong); color: var(--text-strong);
box-shadow: var(--shadow-xs-border); box-shadow: var(--shadow-xs-border);
&:hover:not(:disabled) { &:hover:not(:disabled) {
border-color: var(--border-hover); background-color: var(--button-secondary-hover);
background-color: var(--surface-hover);
} }
&:active:not(:disabled) { &:active:not(:disabled) {
border-color: var(--border-active); background-color: var(--button-secondary-base);
background-color: var(--surface-active);
} }
&:focus:not(:disabled) { &:focus:not(:disabled) {
border-color: var(--border-focus); background-color: var(--button-secondary-base);
background-color: var(--surface-focus); }
&:focus-visible:not(:active) {
background-color: var(--button-secondary-base);
box-shadow: var(--shadow-xs-border-focus);
}
&:focus-visible:active {
box-shadow: none;
} }
[data-slot="icon"] { [data-slot="icon"] {

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

@@ -60,10 +60,18 @@
0 1px 2px -1px rgba(19, 16, 16, 0.04), 0 1px 2px -1px rgba(19, 16, 16, 0.04),
0 1px 2px 0 rgba(19, 16, 16, 0.06), 0 1px 2px 0 rgba(19, 16, 16, 0.06),
0 1px 3px 0 rgba(19, 16, 16, 0.08); 0 1px 3px 0 rgba(19, 16, 16, 0.08);
--shadow-xs-border-selected: --shadow-xs-border-select:
0 0 0 3px var(--border-weak-selected, rgba(1, 103, 255, 0.29)), 0 0 0 3px var(--border-weak-selected, rgba(1, 103, 255, 0.29)),
0 0 0 1px var(--border-selected, rgba(0, 74, 255, 0.99)), 0 1px 2px -1px rgba(19, 16, 16, 0.25), 0 0 0 1px var(--border-selected, rgba(0, 74, 255, 0.99)), 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); 0 1px 2px 0 rgba(19, 16, 16, 0.08), 0 1px 3px 0 rgba(19, 16, 16, 0.12);
--shadow-xs-border-focus:
0 0 0 1px var(--border-base, rgba(11, 6, 0, 0.20)),
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),
0 0 0 2px var(--background-weak, #F1F0F0),
0 0 0 3px var(--border-selected, rgba(0, 74, 255, 0.99));
--text-mix-blend-mode: multiply; --text-mix-blend-mode: multiply;
} }
@@ -170,7 +178,7 @@
--text-on-brand-weaker: var(--smoke-light-alpha-8); --text-on-brand-weaker: var(--smoke-light-alpha-8);
--text-on-brand-strong: var(--smoke-light-alpha-12); --text-on-brand-strong: var(--smoke-light-alpha-12);
--button-secondary-base: #fdfcfc; --button-secondary-base: #fdfcfc;
--button-secondary-base-hover: #faf9f9; --button-secondary-hover: #fafafa;
--border-base: var(--smoke-light-alpha-7); --border-base: var(--smoke-light-alpha-7);
--border-hover: var(--smoke-light-alpha-8); --border-hover: var(--smoke-light-alpha-8);
--border-active: var(--smoke-light-alpha-9); --border-active: var(--smoke-light-alpha-9);
@@ -405,7 +413,7 @@
--text-on-brand-weaker: var(--smoke-dark-alpha-8); --text-on-brand-weaker: var(--smoke-dark-alpha-8);
--text-on-brand-strong: var(--smoke-dark-alpha-12); --text-on-brand-strong: var(--smoke-dark-alpha-12);
--button-secondary-base: var(--smoke-dark-4); --button-secondary-base: var(--smoke-dark-4);
--button-secondary-base-hover: #2a2727; --button-secondary-hover: #2A2727;
--border-base: var(--smoke-dark-alpha-7); --border-base: var(--smoke-dark-alpha-7);
--border-hover: var(--smoke-dark-alpha-8); --border-hover: var(--smoke-dark-alpha-8);
--border-active: var(--smoke-dark-alpha-9); --border-active: var(--smoke-dark-alpha-9);