cfbender/snowballtools-base
1
0
Fork 0
forked from cerc-io/snowballtools-base
Code Pull Requests Activity

style: update tertiary button

Browse Source
This commit is contained in:
Zachery Ng 2024-02-28 15:45:57 +08:00
parent 4a87c100d6
commit bd4a51c830
3 changed files with 7 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/frontend/src/components/projects/create/ConnectAccount.tsx
View File

@ -75,7 +75,7 @@ const ConnectAccount: React.FC<ConnectAccountInterface> = ({
height={1000}
>
<Button
className="w-full sm:w-auto shadow-button"
className="w-full sm:w-auto"
leftIcon={<GithubIcon />}
variant="tertiary"
>
@ -83,7 +83,7 @@ const ConnectAccount: React.FC<ConnectAccountInterface> = ({
</Button>
</OauthPopup>
<Button
className="w-full sm:w-auto shadow-button"
className="w-full sm:w-auto"
leftIcon={<GitTeaIcon />}
variant="tertiary"
>

11
packages/frontend/src/components/shared/Button/Button.theme.ts
View File

@ -14,6 +14,8 @@ export const buttonTheme = tv(
'whitespace-nowrap',
'focus-ring',
'disabled:cursor-not-allowed',
'transition-colors',
'duration-150',
],
variants: {
size: {
@ -61,14 +63,13 @@ export const buttonTheme = tv(
tertiary: [
'text-elements-on-tertiary',
'border',
'border-border-interactive/10',
'border-border-interactive',
'bg-controls-tertiary',
'shadow-button',
'hover:bg-controls-tertiary-hovered',
'hover:border-border-interactive-hovered',
'hover:border-border-interactive-hovered/[0.14]',
'focus-visible:bg-controls-tertiary-hovered',
'focus-visible:border-border-interactive-hovered',
'focus-visible:border-border-interactive-hovered/[0.14]',
'disabled:text-elements-on-disabled',
'disabled:bg-controls-disabled',
'disabled:border-transparent',
@ -81,10 +82,8 @@ export const buttonTheme = tv(
'bg-transparent',
'hover:bg-controls-tertiary-hovered',
'hover:border-border-interactive-hovered',
'hover:border-border-interactive-hovered/[0.14]',
'focus-visible:bg-controls-tertiary-hovered',
'focus-visible:border-border-interactive-hovered',
'focus-visible:border-border-interactive-hovered/[0.14]',
'disabled:text-elements-on-disabled',
'disabled:bg-controls-disabled',
'disabled:border-transparent',
@ -109,10 +108,8 @@ export const buttonTheme = tv(
'bg-transparent',
'hover:bg-controls-tertiary-hovered',
'hover:border-border-interactive-hovered',
'hover:border-border-interactive-hovered/[0.14]',
'focus-visible:bg-controls-tertiary-hovered',
'focus-visible:border-border-interactive-hovered',
'focus-visible:border-border-interactive-hovered/[0.14]',
'disabled:text-elements-on-disabled',
'disabled:bg-controls-disabled',
'disabled:border-transparent',

2
packages/frontend/tailwind.config.js
View File

@ -152,7 +152,7 @@ export default withMT({
},
boxShadow: {
button:
'inset 0px 0px 4px rgba(255, 255, 255, 0.25), inset 0px -2px 0px rgba(0, 0, 0, 0.04)',
'0px -2px 0px 0px rgba(0, 0, 0, 0.04) inset, 0px 0px 4px 0px rgba(255, 255, 255, 0.25) inset',
dropdown:
'0px 3px 20px rgba(8, 47, 86, 0.1), 0px 0px 4px rgba(8, 47, 86, 0.14)',
field: '0px 1px 2px rgba(0, 0, 0, 0.04)',