From 4069999b782cc00d4e707f5eca32082bdfad45bc Mon Sep 17 00:00:00 2001 From: Adam <2363879+adamdotdevin@users.noreply.github.com> Date: Fri, 14 Nov 2025 12:38:52 -0600 Subject: wip(desktop): new layout work --- packages/ui/src/components/button.css | 42 +++++++++++++++++------------------ 1 file changed, 20 insertions(+), 22 deletions(-) (limited to 'packages/ui/src/components/button.css') diff --git a/packages/ui/src/components/button.css b/packages/ui/src/components/button.css index 0fdb49cdc..7015ea88d 100644 --- a/packages/ui/src/components/button.css +++ b/packages/ui/src/components/button.css @@ -19,13 +19,29 @@ border-color: var(--border-hover); background-color: var(--surface-brand-hover); } + &:focus:not(:disabled) { + border-color: var(--border-focus); + background-color: var(--surface-brand-focus); + } &:active:not(:disabled) { border-color: var(--border-active); background-color: var(--surface-brand-active); } + } + + &[data-variant="ghost"] { + border-color: transparent; + background-color: transparent; + color: var(--text-strong); + + &:hover:not(:disabled) { + background-color: var(--surface-raised-base-hover); + } &:focus:not(:disabled) { - border-color: var(--border-focus); - background-color: var(--surface-brand-focus); + background-color: var(--surface-raised-base-hover); + } + &:active:not(:disabled) { + background-color: var(--surface-raised-base-active); } } @@ -38,9 +54,6 @@ &:hover:not(:disabled) { background-color: var(--button-secondary-hover); } - &:active:not(:disabled) { - background-color: var(--button-secondary-base); - } &:focus:not(:disabled) { background-color: var(--button-secondary-base); } @@ -51,7 +64,8 @@ &:focus-visible:active { box-shadow: none; } - &:active { + &:active:not(:disabled) { + background-color: var(--button-secondary-base); scale: 0.99; transition: all 150ms ease-out; } @@ -61,22 +75,6 @@ } } - &[data-variant="ghost"] { - border-color: transparent; - background-color: transparent; - color: var(--text-strong); - - &:hover:not(:disabled) { - background-color: var(--button-ghost-hover); - } - &:active:not(:disabled) { - background-color: var(--button-ghost-hover-2); - } - &:focus:not(:disabled) { - background-color: var(--button-ghost-hover); - } - } - &[data-size="normal"] { height: 24px; padding: 0 6px; -- cgit v1.2.3