sandvich
/
opencode
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: icon button weak color variant

pull/8743/head
Aaron Iker 2026-01-13 19:40:56 +01:00
parent ae7e07dcb4
commit 1d8f764114
2 changed files with 27 additions and 12 deletions
Show Stats 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"] {
background-color: transparent;
/* color: var(--icon-base); */
[data-slot="icon-svg"] {
color: var(--icon-base);
@ -79,25 +78,41 @@
&:hover:not(:disabled) {
background-color: var(--surface-raised-base-hover);
/* [data-slot="icon-svg"] { */
/* color: var(--icon-hover); */
/* } */
}
&:focus:not(:disabled) {
background-color: var(--surface-focus);
}
&:active:not(:disabled) {
background-color: var(--surface-raised-base-active);
/* [data-slot="icon-svg"] { */
/* color: var(--icon-active); */
/* } */
}
&:selected:not(:disabled) {
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"]
size?: "normal" | "large"
iconSize?: IconProps["size"]
variant?: "primary" | "secondary" | "ghost"
variant?: "primary" | "secondary" | "ghost" | "weak"
}
export function IconButton(props: ComponentProps<"button"> & IconButtonProps) {