clone/opencode
1
0
Fork 0
mirror of https://github.com/anomalyco/opencode.git synced 2026-04-24 23:04:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: button transition

Browse Source
This commit is contained in:
Aaron Iker
2026-01-29 17:52:00 +01:00
parent 9a526d9cba
commit 50f10ed7c0
2 changed files with 13 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,8 +8,13 @@
text-decoration: none; text-decoration: none;
user-select: none; user-select: none;
cursor: default; cursor: default;
outline: none; padding: 4px 8px;
white-space: nowrap; white-space: nowrap;
transition-property: background-color, border-color, color, box-shadow, opacity;
transition-duration: var(--transition-duration);
transition-timing-function: var(--transition-easing);
outline: none;
line-height: 20px;
&[data-variant="primary"] { &[data-variant="primary"] {
background-color: var(--button-primary-base); background-color: var(--button-primary-base);
@@ -87,7 +92,6 @@
&:active:not(:disabled) { &:active:not(:disabled) {
background-color: var(--button-secondary-base); background-color: var(--button-secondary-base);
scale: 0.99; scale: 0.99;
transition: all 150ms ease-out;
} }
&:disabled { &:disabled {
border-color: var(--border-disabled); border-color: var(--border-disabled);
@@ -102,34 +106,27 @@
} }
&[data-size="small"] { &[data-size="small"] {
height: 22px; padding: 2px 8px;
padding: 0 8px;
&[data-icon] { &[data-icon] {
padding: 0 12px 0 4px; padding: 2px 12px 2px 4px;
} }
font-size: var(--font-size-small);
line-height: var(--line-height-large);
gap: 4px; gap: 4px;
/* text-12-medium */ /* text-12-medium */
font-family: var(--font-family-sans); font-family: var(--font-family-sans);
font-size: var(--font-size-small); font-size: var(--font-size-base);
font-style: normal; font-style: normal;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
line-height: var(--line-height-large); /* 166.667% */
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
} }
&[data-size="normal"] { &[data-size="normal"] {
height: 24px; padding: 4px 6px;
line-height: 24px;
padding: 0 6px;
&[data-icon] { &[data-icon] {
padding: 0 12px 0 4px; padding: 4px 12px 4px 4px;
} }
font-size: var(--font-size-small);
gap: 6px; gap: 6px;
/* text-12-medium */ /* text-12-medium */
@@ -141,11 +138,10 @@
} }
&[data-size="large"] { &[data-size="large"] {
height: 32px;
padding: 6px 12px; padding: 6px 12px;
&[data-icon] { &[data-icon] {
padding: 0 12px 0 8px; padding: 6px 12px 6px 8px;
} }
gap: 8px; gap: 8px;
@@ -155,7 +151,6 @@
font-size: 14px; font-size: 14px;
font-style: normal; font-style: normal;
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
line-height: var(--line-height-large); /* 142.857% */
letter-spacing: var(--letter-spacing-normal); letter-spacing: var(--letter-spacing-normal);
} }

2
packages/ui/src/components/button.tsx
View File

@@ -4,7 +4,7 @@ import { Icon, IconProps } from "./icon"
export interface ButtonProps export interface ButtonProps
extends ComponentProps<typeof Kobalte>, extends ComponentProps<typeof Kobalte>,
Pick<ComponentProps<"button">, "class" | "classList" | "children"> { Pick<ComponentProps<"button">, "class" | "classList" | "children" | "style"> {
size?: "small" | "normal" | "large" size?: "small" | "normal" | "large"
variant?: "primary" | "secondary" | "ghost" variant?: "primary" | "secondary" | "ghost"
icon?: IconProps["name"] icon?: IconProps["name"]