Skip to content

Commit 91b2305

Browse files
corwintinescorwintines
committed
add variants
1 parent 4416d3f commit 91b2305

File tree

2 files changed

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

2 files changed

+48
-17
lines changed

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

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const baseStyle = defineMergeStyles(defaultBaseStyle, {
1414
})
1515

1616
const variantSecondary = defineStyle({
17-
borderColor: "primary100",
17+
borderColor: "orange.100",
1818
color: "text",
1919
})
2020

@@ -23,11 +23,42 @@ const variantSolid = defineStyle({
2323
background: "primary100",
2424
})
2525

26+
const variantGreen = defineStyle({
27+
color: "white",
28+
background: "green.500",
29+
})
30+
31+
const variantBlue = defineStyle({
32+
color: "black",
33+
background: "blue.300",
34+
})
35+
36+
const variantRed = defineStyle({
37+
color: "white",
38+
background: "red.500",
39+
})
40+
41+
const variantPink = defineStyle({
42+
color: "black",
43+
background: "red.100",
44+
})
45+
46+
const variantGray = defineStyle({
47+
color: "black",
48+
background: "gray.300",
49+
})
50+
2651
export const Badge = defineStyleConfig({
2752
baseStyle,
2853
variants: {
2954
solid: variantSolid,
3055
secondary: variantSecondary,
56+
green: variantGreen,
57+
purple: variantSolid,
58+
red: variantRed,
59+
pink: variantPink,
60+
gray: variantGray,
61+
blue: variantBlue,
3162
},
3263
sizes: {
3364
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 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) |
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) |
4040

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

0 commit comments

Comments
 (0)