From cd3340d28c461096f9b878c87fcde46593943612 Mon Sep 17 00:00:00 2001 From: PedroBailaAndrade Date: Mon, 18 Dec 2023 15:05:03 +0000 Subject: [PATCH 1/2] Add gradient button style --- .../src/components/Button/Button.stories.tsx | 10 + .../website/src/components/Button/Button.tsx | 3 +- .../src/components/Button/ButtonStyles.ts | 590 ++++++++++-------- 3 files changed, 340 insertions(+), 263 deletions(-) diff --git a/workspaces/website/src/components/Button/Button.stories.tsx b/workspaces/website/src/components/Button/Button.stories.tsx index 176dde46c8..ba2bcff430 100644 --- a/workspaces/website/src/components/Button/Button.stories.tsx +++ b/workspaces/website/src/components/Button/Button.stories.tsx @@ -97,6 +97,16 @@ export const Ghost = () => ( ); +export const Gradient = () => ( + + + <> + + + + +); + export const PrimaryHero = () => ( diff --git a/workspaces/website/src/components/Button/Button.tsx b/workspaces/website/src/components/Button/Button.tsx index 1114caa463..c334d0b232 100644 --- a/workspaces/website/src/components/Button/Button.tsx +++ b/workspaces/website/src/components/Button/Button.tsx @@ -15,7 +15,8 @@ type props = { | "filter" | "filterActive" | "category" - | "icon"; + | "icon" + | "gradient"; children: React.ReactNode; toId?: string; href?: string; diff --git a/workspaces/website/src/components/Button/ButtonStyles.ts b/workspaces/website/src/components/Button/ButtonStyles.ts index ab37d43c67..db89faa4a5 100644 --- a/workspaces/website/src/components/Button/ButtonStyles.ts +++ b/workspaces/website/src/components/Button/ButtonStyles.ts @@ -1,50 +1,118 @@ import { defineStyle, defineStyleConfig } from "@chakra-ui/react"; -const outline = defineStyle({ +const category = defineStyle({ + cursor: "pointer", + borderRadius: 0, + fontWeight: "medium", + fontSize: "14px", + lineHeight: "14px", + padding: "8px 0 16px", + color: "tabs-fg", + borderBottomWidth: "1px", + borderColor: "tabs-border-bg", + + bg: "tabs-bg", + _hover: { + bg: "tabs-bg", + color: "tabs-hover-fg", + }, + _active: { + bg: "tabs-bg", + color: "tabs-fg-active", + borderColor: "tabs-border-active-bg", + }, +}); + +const filter = defineStyle({ borderRadius: 4, fontWeight: "medium", - fontSize: "16px", - paddingLeft: "40px", - paddingRight: "40px", + fontSize: "12px", + lineHeight: "12px", + padding: "8px 16px", + color: "btn-filter-fg", + + bg: "btn-filter-bg", + _hover: { + bg: "btn-filter-hover-bg", + color: "btn-filter-hover-fg", + }, + _active: { + bg: "btn-filter-active-bg", + color: "btn-filter-active-fg", + }, +}); + +const filterActive = defineStyle({ + borderRadius: 4, + fontWeight: "medium", + fontSize: "12px", + lineHeight: "12px", + padding: "8px 16px", + bg: "btn-filter-active-bg", + color: "btn-filter-active-fg", + _hover: { + bg: "btn-filter-active-hover-bg", + color: "btn-filter-active-hover-fg", + }, +}); + +const ghost = defineStyle({ + borderRadius: 4, + fontWeight: "medium", + fontSize: "14px", color: "grey.darkText", - borderColor: "grey.morning", + borderColor: "transparent", + borderWidth: "1px", bg: "transparent", minWidth: "none", - lineHeight: "24px", + minHeight: 42, + lineHeight: "100%", height: "auto", - padding: "12px 24px", + padding: "8px 16px", + "& svg path": { + fill: "grey.morning" + }, _hover: { bg: "transparent", - color: "btn-outline-hover-fg", - borderColor: "grey.morning", - _dark: { - color: "selected.100" + "& svg path": { + fill: "selected.main" }, + _dark: { + color: "white", + borderColor: "transparent", + bg: "black" + } }, _active: { - bg: "bg.200", - color: "grey.greyDusk", - borderColor: "grey.morning", - borderWidth: "1px", + bg: "transparent", boxShadow: "inset 0px 4px 0px rgba(0, 0, 0, 0.1)", outlineWidth: 1, + color: "grey.greyDusk", + borderWidth: "1px", + borderColor: "transparent", + "& svg path": { + fill: "grey.greyDusk" + }, _focus: { - bg: "bg.200", + bg: "transparent", color: "grey.greyDusk", - borderColor: "grey.morning", - borderWidth: "1px", boxShadow: "inset 0px 4px 0px rgba(0, 0, 0, 0.1)", - outlineWidth: 1 + outlineWidth: 1, + borderWidth: "1px", + borderColor: "transparent", + "& svg path": { + fill: "grey.greyDusk" + }, }, _dark: { bg: "black", - color: "grey.greyDusk", - borderColor: "grey.greyDusk", + color: "btn-outline-active-fg", + borderColor: "black", outlineWidth: 1, _focus: { bg: "black", - color: "grey.greyDusk", - borderColor: "grey.greyDusk", + color: "btn-outline-active-fg", + borderColor: "black", outlineWidth: 1 } } @@ -60,46 +128,106 @@ const outline = defineStyle({ } }, _dark: { - border: "1px solid grey.greyDusk", + borderColor: "transparent", color: "white" } }); -const outlineLight = defineStyle({ - borderRadius: 4, - fontWeight: "medium", - fontSize: "14px", - color: "grey.coolerText", - borderColor: "grey.line", - borderWidth: "1px", - bg: "transparent", +const gradient = defineStyle({ + borderRadius: 8, + fontWeight: 600, + fontSize: "16px", minWidth: "none", - lineHeight: "16px", + lineHeight: "24px", height: "auto", - padding: "16px 40px", + color: "bg.200", + padding: "12px 24px", + background: "linear-gradient(270deg, #171870 0%, #3928A0 51%, #A15882 100%)", + _dark: { + background: + "linear-gradient(270deg, #9090E0 0%, #A4A4EA 44.79%, #FEAEA4 100%)", + }, + "&:disabled": { + background: "surface.accent.disabled", + color: "content.on-surface-inverted.disabled", + boxShadow: "none", + }, _hover: { - bg: "transparent", - color: "btn-outline-hover-fg", - borderColor: "selected.main", + background: + "linear-gradient(270deg, #6565B3 0%, #7666D8 51%, #D586B5 100%)", + "&:disabled": { + background: "btn-primary-disabled-bg !important", + color: "btn-primary-disabled-fg", + boxShadow: "none !important", + }, _dark: { - color: "selected.100", - borderColor: "selected.200" - } + background: + "linear-gradient(270deg, #B7B7F5 0%, #C7C7F9 44.79%, #FFDBD6 100%)", + }, }, _active: { - bg: "grey.line", - color: "grey.coolerText", - borderColor: "grey.line", - borderWidth: "1px", - boxShadow: "inset 0px 8px 0px rgba(0, 0, 0, 0.14)", + background: + "linear-gradient(270deg, #171870 0%, #3928A0 51%, #A15882 100%)", + boxShadow: "0px 6px 0px 0px rgba(17, 17, 17, 0.24) inset !important", + outlineOffset: 1, + "&:disabled": { + background: "btn-primary-disabled-bg !important", + color: "btn-primary-disabled-fg", + boxShadow: "none !important", + }, + _dark: { + background: + "linear-gradient(270deg, #9090E0 0%, #A4A4EA 44.79%, #FEAEA4 100%)", + boxShadow: "inset 0px 4px 0px rgba(0, 0, 0, 0.1)", + _focus: { + background: + "linear-gradient(270deg, #9090E0 0%, #A4A4EA 44.79%, #FEAEA4 100%)", + boxShadow: "inset 0px 4px 0px rgba(0, 0, 0, 0.1)", + }, + }, + }, + _focusVisible: { + outlineOffset: 1, + outline: "3px solid #3F8CFF", + boxShadow: "none", + border: "none", + _dark: { + outlineOffset: 0, + }, + }, +}); + +const icon = defineStyle({ + height: "auto", + padding: "11px", + color: "darkMode.card", + bg: "transparent", + borderColor: "transparent", + borderWidth: 1, + _hover: { + bg: "bg.200", + _focus: { + bg: "bg.200", + borderColor: "transparent", + borderWidth: 1, + }, + _dark: { + bg: "black", + }, + }, + _active: { + bg: "transparent", + boxShadow: "inset 0px 4px 0px rgba(0, 0, 0, 0.1)", outlineWidth: 1, + borderWidth: "1px", + borderColor: "transparent", + color: "darkMode.card", _focus: { - bg: "grey.line", - color: "grey.coolerText", - borderColor: "grey.line", + bg: "transparent", + boxShadow: "inset 0px 4px 0px rgba(0, 0, 0, 0.1)", + outlineWidth: 1, borderWidth: "1px", - boxShadow: "inset 0px 8px 0px rgba(0, 0, 0, 0.14)", - outlineWidth: 1 + borderColor: "transparent" }, _dark: { bg: "black", @@ -108,7 +236,7 @@ const outlineLight = defineStyle({ outlineWidth: 1, _focus: { bg: "black", - color: "btn-outline-active-fg", + color: "grey.greyDusk", borderColor: "black", outlineWidth: 1 } @@ -125,56 +253,56 @@ const outlineLight = defineStyle({ } }, _dark: { - border: "1px solid grey.greyDusk", + borderColor: "transparent", color: "white" } }); -const outlineRounded = defineStyle({ - borderRadius: 24, +const outline = defineStyle({ + borderRadius: 4, fontWeight: "medium", - fontSize: "14px", - color: "grey.coolerText", - borderColor: "grey.line", - borderWidth: "1px", + fontSize: "16px", + paddingLeft: "40px", + paddingRight: "40px", + color: "grey.darkText", + borderColor: "grey.morning", bg: "transparent", minWidth: "none", - lineHeight: "16px", + lineHeight: "24px", height: "auto", - padding: "16px 40px", + padding: "12px 24px", _hover: { bg: "transparent", color: "btn-outline-hover-fg", - borderColor: "selected.main", + borderColor: "grey.morning", _dark: { - color: "selected.100", - borderColor: "selected.200" - } + color: "selected.100" + }, }, _active: { - bg: "grey.line", - color: "grey.coolerText", - borderColor: "grey.line", + bg: "bg.200", + color: "grey.greyDusk", + borderColor: "grey.morning", borderWidth: "1px", - boxShadow: "inset 0px 8px 0px rgba(0, 0, 0, 0.14)", + boxShadow: "inset 0px 4px 0px rgba(0, 0, 0, 0.1)", outlineWidth: 1, _focus: { - bg: "grey.line", - color: "grey.coolerText", - borderColor: "grey.line", + bg: "bg.200", + color: "grey.greyDusk", + borderColor: "grey.morning", borderWidth: "1px", - boxShadow: "inset 0px 8px 0px rgba(0, 0, 0, 0.14)", + boxShadow: "inset 0px 4px 0px rgba(0, 0, 0, 0.1)", outlineWidth: 1 }, _dark: { bg: "black", - color: "btn-outline-active-fg", - borderColor: "black", + color: "grey.greyDusk", + borderColor: "grey.greyDusk", outlineWidth: 1, _focus: { bg: "black", - color: "btn-outline-active-fg", - borderColor: "black", + color: "grey.greyDusk", + borderColor: "grey.greyDusk", outlineWidth: 1 } } @@ -195,53 +323,41 @@ const outlineRounded = defineStyle({ } }); -const ghost = defineStyle({ +const outlineLight = defineStyle({ borderRadius: 4, fontWeight: "medium", fontSize: "14px", - color: "grey.darkText", - borderColor: "transparent", + color: "grey.coolerText", + borderColor: "grey.line", borderWidth: "1px", bg: "transparent", minWidth: "none", - minHeight: 42, - lineHeight: "100%", + lineHeight: "16px", height: "auto", - padding: "8px 16px", - "& svg path": { - fill: "grey.morning" - }, + padding: "16px 40px", _hover: { bg: "transparent", - "& svg path": { - fill: "selected.main" - }, + color: "btn-outline-hover-fg", + borderColor: "selected.main", _dark: { - color: "white", - borderColor: "transparent", - bg: "black" + color: "selected.100", + borderColor: "selected.200" } }, _active: { - bg: "transparent", - boxShadow: "inset 0px 4px 0px rgba(0, 0, 0, 0.1)", - outlineWidth: 1, - color: "grey.greyDusk", + bg: "grey.line", + color: "grey.coolerText", + borderColor: "grey.line", borderWidth: "1px", - borderColor: "transparent", - "& svg path": { - fill: "grey.greyDusk" - }, + boxShadow: "inset 0px 8px 0px rgba(0, 0, 0, 0.14)", + outlineWidth: 1, _focus: { - bg: "transparent", - color: "grey.greyDusk", - boxShadow: "inset 0px 4px 0px rgba(0, 0, 0, 0.1)", - outlineWidth: 1, + bg: "grey.line", + color: "grey.coolerText", + borderColor: "grey.line", borderWidth: "1px", - borderColor: "transparent", - "& svg path": { - fill: "grey.greyDusk" - }, + boxShadow: "inset 0px 8px 0px rgba(0, 0, 0, 0.14)", + outlineWidth: 1 }, _dark: { bg: "black", @@ -267,56 +383,63 @@ const ghost = defineStyle({ } }, _dark: { - borderColor: "transparent", + border: "1px solid grey.greyDusk", color: "white" } }); -const solid = defineStyle({ - borderRadius: 4, +const outlineRounded = defineStyle({ + borderRadius: 24, fontWeight: "medium", - fontSize: "16px", + fontSize: "14px", + color: "grey.coolerText", + borderColor: "grey.line", + borderWidth: "1px", + bg: "transparent", minWidth: "none", - lineHeight: "24px", + lineHeight: "16px", height: "auto", - padding: "12px 24px", - color: "white", - bg: "btn-primary-bg", - borderWidth: "1px", - borderStyle: "solid", - borderColor: "btn-primary-bg", + padding: "16px 40px", _hover: { - bg: "btn-primary-hover-bg", - color: "btn-primary-hover-fg", + bg: "transparent", + color: "btn-outline-hover-fg", + borderColor: "selected.main", _dark: { - bg: "bg.main", - color: "grey.darkText", - }, + color: "selected.100", + borderColor: "selected.200" + } }, _active: { - bg: "btn-primary-active-bg", - color: "btn-primary-active-fg", + bg: "grey.line", + color: "grey.coolerText", + borderColor: "grey.line", + borderWidth: "1px", + boxShadow: "inset 0px 8px 0px rgba(0, 0, 0, 0.14)", outlineWidth: 1, + _focus: { + bg: "grey.line", + color: "grey.coolerText", + borderColor: "grey.line", + borderWidth: "1px", + boxShadow: "inset 0px 8px 0px rgba(0, 0, 0, 0.14)", + outlineWidth: 1 + }, _dark: { - bg: "grey.morning", - boxShadow: "inset 0px 4px 0px rgba(0, 0, 0, 0.1)", - color: "grey.darkText", + bg: "black", + color: "btn-outline-active-fg", + borderColor: "black", + outlineWidth: 1, _focus: { - bg: "grey.morning", - boxShadow: "inset 0px 4px 0px rgba(0, 0, 0, 0.1)", - color: "grey.darkText", + bg: "black", + color: "btn-outline-active-fg", + borderColor: "black", + outlineWidth: 1 } - }, - }, - _dark: { - bg: "white", - color: "grey.darkText", + } }, _focus: { boxShadow: "none", borderColor: "selected.main", - borderWidth: "1px", - borderStyle: "solid", _dark: { boxShadow: "none", borderColor: "selected.100", @@ -324,6 +447,10 @@ const solid = defineStyle({ borderStyle: "solid" } }, + _dark: { + border: "1px solid grey.greyDusk", + color: "white" + } }); const primaryHero = defineStyle({ @@ -389,6 +516,7 @@ const primaryHero = defineStyle({ } }, }); + const secondaryHero = defineStyle({ borderRadius: 4, fontWeight: "medium", @@ -456,6 +584,60 @@ const secondaryHero = defineStyle({ }, }); +const solid = defineStyle({ + borderRadius: 4, + fontWeight: "medium", + fontSize: "16px", + minWidth: "none", + lineHeight: "24px", + height: "auto", + padding: "12px 24px", + color: "white", + bg: "btn-primary-bg", + borderWidth: "1px", + borderStyle: "solid", + borderColor: "btn-primary-bg", + _hover: { + bg: "btn-primary-hover-bg", + color: "btn-primary-hover-fg", + _dark: { + bg: "bg.main", + color: "grey.darkText", + }, + }, + _active: { + bg: "btn-primary-active-bg", + color: "btn-primary-active-fg", + outlineWidth: 1, + _dark: { + bg: "grey.morning", + boxShadow: "inset 0px 4px 0px rgba(0, 0, 0, 0.1)", + color: "grey.darkText", + _focus: { + bg: "grey.morning", + boxShadow: "inset 0px 4px 0px rgba(0, 0, 0, 0.1)", + color: "grey.darkText", + } + }, + }, + _dark: { + bg: "white", + color: "grey.darkText", + }, + _focus: { + boxShadow: "none", + borderColor: "selected.main", + borderWidth: "1px", + borderStyle: "solid", + _dark: { + boxShadow: "none", + borderColor: "selected.100", + borderWidth: "1px", + borderStyle: "solid" + } + }, +}); + const switchButton = defineStyle({ height: "auto", padding: "11px", @@ -521,136 +703,20 @@ const switchButton = defineStyle({ }, }); -const filter = defineStyle({ - borderRadius: 4, - fontWeight: "medium", - fontSize: "12px", - lineHeight: "12px", - padding: "8px 16px", - color: "btn-filter-fg", - - bg: "btn-filter-bg", - _hover: { - bg: "btn-filter-hover-bg", - color: "btn-filter-hover-fg", - }, - _active: { - bg: "btn-filter-active-bg", - color: "btn-filter-active-fg", - }, -}); - -const filterActive = defineStyle({ - borderRadius: 4, - fontWeight: "medium", - fontSize: "12px", - lineHeight: "12px", - padding: "8px 16px", - bg: "btn-filter-active-bg", - color: "btn-filter-active-fg", - _hover: { - bg: "btn-filter-active-hover-bg", - color: "btn-filter-active-hover-fg", - }, -}); - -const category = defineStyle({ - cursor: "pointer", - borderRadius: 0, - fontWeight: "medium", - fontSize: "14px", - lineHeight: "14px", - padding: "8px 0 16px", - color: "tabs-fg", - borderBottomWidth: "1px", - borderColor: "tabs-border-bg", - - bg: "tabs-bg", - _hover: { - bg: "tabs-bg", - color: "tabs-hover-fg", - }, - _active: { - bg: "tabs-bg", - color: "tabs-fg-active", - borderColor: "tabs-border-active-bg", - }, -}); - -const icon = defineStyle({ - height: "auto", - padding: "11px", - color: "darkMode.card", - bg: "transparent", - borderColor: "transparent", - borderWidth: 1, - _hover: { - bg: "bg.200", - _focus: { - bg: "bg.200", - borderColor: "transparent", - borderWidth: 1, - }, - _dark: { - bg: "black", - }, - }, - _active: { - bg: "transparent", - boxShadow: "inset 0px 4px 0px rgba(0, 0, 0, 0.1)", - outlineWidth: 1, - borderWidth: "1px", - borderColor: "transparent", - color: "darkMode.card", - _focus: { - bg: "transparent", - boxShadow: "inset 0px 4px 0px rgba(0, 0, 0, 0.1)", - outlineWidth: 1, - borderWidth: "1px", - borderColor: "transparent" - }, - _dark: { - bg: "black", - color: "btn-outline-active-fg", - borderColor: "black", - outlineWidth: 1, - _focus: { - bg: "black", - color: "grey.greyDusk", - borderColor: "black", - outlineWidth: 1 - } - } - }, - _focus: { - boxShadow: "none", - borderColor: "selected.main", - _dark: { - boxShadow: "none", - borderColor: "selected.100", - borderWidth: "1px", - borderStyle: "solid" - } - }, - _dark: { - borderColor: "transparent", - color: "white" - } -}); - export const buttonTheme = defineStyleConfig({ variants: { + category, + filter, + filterActive, + ghost, + gradient, + icon, outline, outlineLight, outlineRounded, - secondaryHero, primaryHero, + secondaryHero, solid, - ghost, - filter, - filterActive, - category, - switch: switchButton, - icon + switch: switchButton }, }); From 723fb243437fbe9bdd50587dd70469fa99a25e97 Mon Sep 17 00:00:00 2001 From: PedroBailaAndrade Date: Mon, 18 Dec 2023 15:05:39 +0000 Subject: [PATCH 2/2] Add gradient button to large card --- .../website/src/components/Card/ImageIconCard.tsx | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/workspaces/website/src/components/Card/ImageIconCard.tsx b/workspaces/website/src/components/Card/ImageIconCard.tsx index e2ce294c0a..e3732f7932 100644 --- a/workspaces/website/src/components/Card/ImageIconCard.tsx +++ b/workspaces/website/src/components/Card/ImageIconCard.tsx @@ -15,6 +15,7 @@ import { CardGradientBorder } from "@ui/Card/components/CardGradientBorder"; import { getComputedLinkData } from "src/utils/utils"; import { CustomLink } from "@ui/Link/CustomLink"; import { LinkData } from "@starknet-io/cms-data/src/settings/main-menu"; +import { Button } from "@ui/Button"; type Props = { variant?: "image_icon_link_card" | "icon_link_card" | "dapp" | "large_card" | "community_card"; @@ -69,6 +70,7 @@ export const ImageIconCard = ({ let linkVariant; let cardFooterPadding; let globalPadding; + let buttonVariant; switch (variant) { case "image_icon_link_card": titleVariant = size === "large" ? "h3" : "h4"; @@ -92,6 +94,7 @@ export const ImageIconCard = ({ descriptionVariant = "body"; cardFooterPadding = "24px 0 0 0"; linkVariant = "cardLink"; + buttonVariant = "gradient"; break; case "community_card": titleVariant = "h4"; @@ -200,7 +203,17 @@ export const ImageIconCard = ({ - {link && variant !== "dapp" && variant !== "community_card" && ( + {link && variant === "large_card" && ( + + + + + + )} + + {link && variant !== "dapp" && variant !== "community_card" && variant !== "large_card" && (