Skip to content

Commit 13987b2

Browse files
pettinarippettinarip
committed
use colorScheme to switch badge colors
1 parent 102c13f commit 13987b2

File tree

2 files changed

+61
-54
lines changed
  • src
    • @chakra-ui/gatsby-plugin/components
    • content/developers/docs/design-and-ux

2 files changed

+61
-54
lines changed

‎src/@chakra-ui/gatsby-plugin/components/Badge.ts

Lines changed: 45 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -14,52 +14,59 @@ const baseStyle = defineMergeStyles(defaultBaseStyle, {
1414
textTransform: "uppercase",
1515
})
1616

17-
const variantSecondary = defineStyle({
18-
borderColor: "orange.100",
19-
color: "text",
20-
})
21-
22-
const variantSolid = defineStyle({
23-
color: "black300",
24-
background: "primary100",
25-
})
26-
27-
const variantGreen = defineStyle({
28-
color: "white",
29-
background: "green.500",
30-
})
31-
32-
const variantBlue = defineStyle({
33-
color: "black",
34-
background: "blue.300",
35-
})
36-
37-
const variantRed = defineStyle({
38-
color: "white",
39-
background: "red.500",
40-
})
17+
const COLOR_SCHEME_MAP = {
18+
purple: {
19+
color: "black300",
20+
background: "primary100",
21+
borderColor: "primary100",
22+
},
23+
orange: {
24+
color: "text",
25+
background: "orange.100",
26+
borderColor: "orange.100",
27+
},
28+
green: {
29+
color: "white",
30+
background: "green.500",
31+
borderColor: "green.500",
32+
},
33+
blue: {
34+
color: "black",
35+
background: "blue.300",
36+
borderColor: "blue.300",
37+
},
38+
red: {
39+
color: "white",
40+
background: "red.500",
41+
borderColor: "red.500",
42+
},
43+
pink: {
44+
color: "black",
45+
background: "red.100",
46+
borderColor: "red.100",
47+
},
48+
gray: {
49+
color: "black",
50+
background: "gray.300",
51+
borderColor: "gray.300",
52+
},
53+
}
4154

42-
const variantPink = defineStyle({
43-
color: "black",
44-
background: "red.100",
45-
})
55+
const variantSecondary = defineStyle(({ colorScheme: c = "orange" }) => ({
56+
...COLOR_SCHEME_MAP[c],
57+
background: "transparent",
58+
}))
4659

47-
const variantGray = defineStyle({
48-
color: "black",
49-
background: "gray.300",
50-
})
60+
const variantSolid = defineStyle(({ colorScheme: c = "purple" }) => ({
61+
...COLOR_SCHEME_MAP[c],
62+
borderColor: "transparent",
63+
}))
5164

5265
export const Badge = defineStyleConfig({
5366
baseStyle,
5467
variants: {
5568
solid: variantSolid,
5669
secondary: variantSecondary,
57-
green: variantGreen,
58-
purple: variantSolid,
59-
red: variantRed,
60-
pink: variantPink,
61-
gray: variantGray,
62-
blue: variantBlue,
6370
},
6471
sizes: {
6572
sm: {

‎src/content/developers/docs/design-and-ux/index.md

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -21,22 +21,22 @@ Effective design goes beyond creating visually appealing user interfaces. It inv
2121

2222
This is a curated list of user research done in web3 that may help with design and product decisions or work as an inspiration to conduct own study.
2323

24-
| Area of focus | Name |
25-
| :-------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
26-
| <Badge variant="green">Crypto onboarding</Badge> | [CRADL: Crypto Research and Design Lab](https://project-cradl.notion.site/Crypto-Research-and-Design-Lab-50a7127f34ed4c88ad95c7cedf7fbe36) |
27-
| <Badge variant="green">Crypto onboarding</Badge> | [CRADL: UX in Cryptocurrency](https://docs.google.com/presentation/d/1s2OPSH5sMJzxRYaJSSRTe8W2iIoZx0PseIV-WeZWD1s/edit?usp=sharing) |
28-
| <Badge variant="green">Crypto onboarding</Badge> | [CRADL: Onboarding to Cryptocurrency](https://docs.google.com/presentation/d/1R9nFuzA-R6SxaGCKhoMbE4Vxe0JxQSTiHXind3LVq_w/edit?usp=sharing) |
29-
| <Badge variant="green">Crypto onboarding</Badge> | [Bitcoin UX report](https://github.com/patestevao/BitcoinUX-report/blob/master/report.md) |
30-
| <Badge variant="green">Crypto onboarding</Badge> | [ConSensys: The State of Web3 perception around the world 2023](https://consensys.io/insight-report/web3-and-crypto-global-survey-2023) |
31-
| <Badge variant="purple">Staking</Badge> | [Staking: Key trends, takeaways, and predictions - Eth Staker](https://lookerstudio.google.com/u/0/reporting/cafcee00-e1af-4148-bae8-442a88ac75fa/page/p_ja2srdhh2c?s=hmbTWDh9hJo) |
32-
| <Badge variant="purple">Staking</Badge> | [Multi App Staking](<https://github.com/threshold-network/UX-User-Research/blob/main/Multi-App%20Staking%20(MAS)/iterative-user-study/MAS%20Iterative%20User%20Study.pdf>) |
33-
| <Badge variant="red">DAO</Badge> | [2022 DAO Research Update: What do DAO Builders Need?](https://blog.aragon.org/2022-dao-research-update/) |
34-
| <Badge variant="pink">DeFi</Badge> | [The state of Defi 2023](https://stateofdefi.org/) |
35-
| <Badge variant="pink">DeFi</Badge> | [Coverage pools](https://github.com/threshold-network/UX-User-Research/tree/main/Keep%20Coverage%20Pool) |
36-
| <Badge variant="pink">DeFi</Badge> | [ConSensys: DeFi User Research Report 2022](https://cdn2.hubspot.net/hubfs/4795067/ConsenSys%20Codefi-Defi%20User%20ResearchReport.pdf) |
37-
| <Badge variant="gray">Metaverse</Badge> | [Metaverse: User Research Report](https://www.politico.com/f/?id=00000187-7685-d820-a7e7-7e85d1420000) |
38-
| <Badge variant="gray">Metaverse</Badge> | [Going on Safari: Researching Users in the Metaverse](https://archive.devcon.org/archive/watch/6/going-on-safari-researching-users-in-the-metaverse/?tab=YouTube) (video, 27 min) |
39-
| <Badge variant="blue">Ethereum.org UX stats</Badge> | [Usability and user satisfaction survey dashboard - Ethereum.org](https://lookerstudio.google.com/reporting/0a189a7c-a890-40db-a5c6-009db52c81c9) |
24+
| Area of focus | Name |
25+
| :------------------------------------------------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
26+
| <Badge colorScheme="green">Crypto onboarding</Badge> | [CRADL: Crypto Research and Design Lab](https://project-cradl.notion.site/Crypto-Research-and-Design-Lab-50a7127f34ed4c88ad95c7cedf7fbe36) |
27+
| <Badge colorScheme="green">Crypto onboarding</Badge> | [CRADL: UX in Cryptocurrency](https://docs.google.com/presentation/d/1s2OPSH5sMJzxRYaJSSRTe8W2iIoZx0PseIV-WeZWD1s/edit?usp=sharing) |
28+
| <Badge colorScheme="green">Crypto onboarding</Badge> | [CRADL: Onboarding to Cryptocurrency](https://docs.google.com/presentation/d/1R9nFuzA-R6SxaGCKhoMbE4Vxe0JxQSTiHXind3LVq_w/edit?usp=sharing) |
29+
| <Badge colorScheme="green">Crypto onboarding</Badge> | [Bitcoin UX report](https://github.com/patestevao/BitcoinUX-report/blob/master/report.md) |
30+
| <Badge colorScheme="green">Crypto onboarding</Badge> | [ConSensys: The State of Web3 perception around the world 2023](https://consensys.io/insight-report/web3-and-crypto-global-survey-2023) |
31+
| <Badge colorScheme="purple">Staking</Badge> | [Staking: Key trends, takeaways, and predictions - Eth Staker](https://lookerstudio.google.com/u/0/reporting/cafcee00-e1af-4148-bae8-442a88ac75fa/page/p_ja2srdhh2c?s=hmbTWDh9hJo) |
32+
| <Badge colorScheme="purple">Staking</Badge> | [Multi App Staking](<https://github.com/threshold-network/UX-User-Research/blob/main/Multi-App%20Staking%20(MAS)/iterative-user-study/MAS%20Iterative%20User%20Study.pdf>) |
33+
| <Badge colorScheme="red">DAO</Badge> | [2022 DAO Research Update: What do DAO Builders Need?](https://blog.aragon.org/2022-dao-research-update/) |
34+
| <Badge colorScheme="pink">DeFi</Badge> | [The state of Defi 2023](https://stateofdefi.org/) |
35+
| <Badge colorScheme="pink">DeFi</Badge> | [Coverage pools](https://github.com/threshold-network/UX-User-Research/tree/main/Keep%20Coverage%20Pool) |
36+
| <Badge colorScheme="pink">DeFi</Badge> | [ConSensys: DeFi User Research Report 2022](https://cdn2.hubspot.net/hubfs/4795067/ConsenSys%20Codefi-Defi%20User%20ResearchReport.pdf) |
37+
| <Badge colorScheme="gray">Metaverse</Badge> | [Metaverse: User Research Report](https://www.politico.com/f/?id=00000187-7685-d820-a7e7-7e85d1420000) |
38+
| <Badge colorScheme="gray">Metaverse</Badge> | [Going on Safari: Researching Users in the Metaverse](https://archive.devcon.org/archive/watch/6/going-on-safari-researching-users-in-the-metaverse/?tab=YouTube) (video, 27 min) |
39+
| <Badge colorScheme="blue">Ethereum.org UX stats</Badge> | [Usability and user satisfaction survey dashboard - Ethereum.org](https://lookerstudio.google.com/reporting/0a189a7c-a890-40db-a5c6-009db52c81c9) |
4040

4141
## Design for web3 {#design-for-web3}
4242

0 commit comments

Comments
 (0)