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

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

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

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

@ -152,7 +152,7 @@ export default withMT({
}, },
boxShadow: { boxShadow: {
button: 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: dropdown:
'0px 3px 20px rgba(8, 47, 86, 0.1), 0px 0px 4px rgba(8, 47, 86, 0.14)', '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)', field: '0px 1px 2px rgba(0, 0, 0, 0.04)',