ceos/opencode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: icon button weak color variant

Browse source
This commit is contained in:
Aaron Iker 2026-01-13 19:40:56 +01:00
commit 1d8f764114
2 changed files with 26 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

37
packages/ui/src/components/icon-button.css
View file

@ -71,7 +71,6 @@
&[data-variant="ghost"] { &[data-variant="ghost"] {
background-color: transparent; background-color: transparent;
/* color: var(--icon-base); */
[data-slot="icon-svg"] { [data-slot="icon-svg"] {
color: var(--icon-base); color: var(--icon-base);
@ -79,25 +78,41 @@
&:hover:not(:disabled) { &:hover:not(:disabled) {
background-color: var(--surface-raised-base-hover); background-color: var(--surface-raised-base-hover);
/* [data-slot="icon-svg"] { */
/* color: var(--icon-hover); */
/* } */
} }
&:focus:not(:disabled) { &:focus:not(:disabled) {
background-color: var(--surface-focus); background-color: var(--surface-focus);
} }
&:active:not(:disabled) { &:active:not(:disabled) {
background-color: var(--surface-raised-base-active); background-color: var(--surface-raised-base-active);
/* [data-slot="icon-svg"] { */
/* color: var(--icon-active); */
/* } */
} }
&:selected:not(:disabled) { &:selected:not(:disabled) {
background-color: var(--surface-raised-base-active); background-color: var(--surface-raised-base-active);
/* [data-slot="icon-svg"] { */ }
/* color: var(--icon-selected); */ }
/* } */
&[data-variant="weak"] {
opacity: 0.8;
background-color: transparent;
[data-slot="icon-svg"] {
color: var(--icon-base);
}
&:hover:not(:disabled) {
opacity: 1;
background-color: var(--surface-raised-base-hover);
}
&:focus:not(:disabled) {
opacity: 1;
background-color: var(--surface-focus);
}
&:active:not(:disabled) {
opacity: 1;
background-color: var(--surface-raised-base-active);
}
&:selected:not(:disabled) {
opacity: 1;
background-color: var(--surface-raised-base-active);
} }
} }

2
packages/ui/src/components/icon-button.tsx
View file

@ -6,7 +6,7 @@ export interface IconButtonProps extends ComponentProps<typeof Kobalte> {
icon: IconProps["name"] icon: IconProps["name"]
size?: "normal" | "large" size?: "normal" | "large"
iconSize?: IconProps["size"] iconSize?: IconProps["size"]
variant?: "primary" | "secondary" | "ghost" variant?: "primary" | "secondary" | "ghost" | "weak"
} }
export function IconButton(props: ComponentProps<"button"> & IconButtonProps) { export function IconButton(props: ComponentProps<"button"> & IconButtonProps) {