Skip to content

Commit 3544609

Browse files
author
billgil
authored
feat(colors): Moralis 2.0 update (#824)
* feat(colors): Moralis 2.0 update * feat(colors): final updates
1 parent 838cc48 commit 3544609

File tree

118 files changed

+1478
-1416
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

118 files changed

+1478
-1416
lines changed

‎.changeset/curly-adults-call.md

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
'@web3uikit/core': minor
3+
'@web3uikit/styles': minor
4+
'@web3uikit/web3': minor
5+
'@web3uikit/web3api': minor
6+
---
7+
8+
updated color system

‎.plop/plop-templates/with-code-examples/{{ name }}.styles.ts.hbs

+4-4
Original file line numberDiff line numberDiff line change
@@ -15,19 +15,19 @@ type TStyleProps = Pick<{{ getInterface name }}, 'state' | 'hasUnderline' | 'bgC
1515
// CSS Props should be sorted alphabetically
1616
// //////////////////
1717
const greenColor = css`
18-
color: ${color.green};
18+
color: ${color.mint40};
1919
`;
2020
const redColor = css`
21-
color: ${color.red};
21+
color: ${color.red40};
2222
`;
2323

2424
// //////////////////
2525
// Styled Components
2626
// CSS Props should be sorted alphabetically
2727
// //////////////////
2828
const SectionStyled = styled.section<TStyleProps>`
29-
border-bottom: 5px solid ${color.green};
30-
border-top: 5px solid ${color.yellow};
29+
border-bottom: 5px solid ${color.mint40};
30+
border-top: 5px solid ${color.yellow50};
3131
padding: 12px 24px;
3232
background-color: ${(p) => p.bgColor && color[p.bgColor]};
3333
`;

‎.plop/plop-templates/with-code-examples/{{ name }}.test.tsx.hbs

+6-6
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ test('Renders Default component', () => {
5252

5353
const styles = heading && getComputedStyle(heading);
5454
const colorHex = styles && rgbToHex(styles.color).toUpperCase();
55-
expect(colorHex).toBe(color.green);
55+
expect(colorHex).toBe(color.mint40);
5656

5757
const text = screen.getByTestId(testText);
5858
expect(text).not.toBeNull();
@@ -85,7 +85,7 @@ test('changes UI onClick of the button', () => {
8585

8686
const styles = headingElement && getComputedStyle(headingElement);
8787
const colorHex = styles && rgbToHex(styles.color).toUpperCase();
88-
expect(colorHex).toBe(color.red);
88+
expect(colorHex).toBe(color.red40);
8989
});
9090

9191
// Test Story 3: InitializeRed
@@ -110,7 +110,7 @@ test('Renders InitializeRed', () => {
110110

111111
const styles = heading && getComputedStyle(heading);
112112
const colorHex = styles && rgbToHex(styles.color).toUpperCase();
113-
expect(colorHex).toBe(color.red);
113+
expect(colorHex).toBe(color.red40);
114114

115115
const text = screen.getByTestId(testText);
116116
expect(text).not.toBeNull();
@@ -142,7 +142,7 @@ test('changes UI onClick of the button', () => {
142142

143143
const styles = headingElement && getComputedStyle(headingElement);
144144
const colorHex = styles && rgbToHex(styles.color).toUpperCase();
145-
expect(colorHex).toBe(color.green);
145+
expect(colorHex).toBe(color.mint40);
146146
});
147147

148148
// Test Story 4: UnderLinedText
@@ -167,7 +167,7 @@ test('Renders UnderLinedText', () => {
167167

168168
const styles = heading && getComputedStyle(heading);
169169
const colorHex = styles && rgbToHex(styles.color).toUpperCase();
170-
expect(colorHex).toBe(color.green);
170+
expect(colorHex).toBe(color.mint40);
171171

172172
const text = screen.getByTestId(testText);
173173
expect(text).not.toBeNull();
@@ -198,5 +198,5 @@ test('changes UI onClick of the button', () => {
198198

199199
const styles = headingElement && getComputedStyle(headingElement);
200200
const colorHex = styles && rgbToHex(styles.color).toUpperCase();
201-
expect(colorHex).toBe(color.red);
201+
expect(colorHex).toBe(color.red40);
202202
});

‎.plop/plop-templates/with-code-examples/{{ name }}.tsx.hbs

+2-2
Original file line numberDiff line numberDiff line change
@@ -56,10 +56,10 @@ const {{ name }}: React.FC<{{ getInterface name }}> = ({
5656
</TitleStyled>
5757
<SpanStyled>
5858
{compState?<Checkmark
59-
fill={color.green}
59+
fill={color.mint40}
6060
fontSize={30}
6161
/>:<Cross
62-
fill={color.red}
62+
fill={color.red40}
6363
fontSize={30}/>}
6464
<HeadingStyled state={compState} data-testid="test-heading">
6565
{compState === 'greenLight' ? textOn : textOff}

‎packages/core/src/IconsGallery/IconGallery.styles.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const StyledDivIcon = styled.div`
2424
border-radius: 20px;
2525
transition: all 0.1s linear;
2626
&:hover {
27-
background-color: ${color.blueCloud};
27+
background-color: ${color.aero10};
2828
}
2929
`;
3030

‎packages/core/src/IconsGallery/IconGallery.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const IconsGallery = () => {
1414
key={Icon.name.slice(3)}
1515
onClick={() => handleClick(Icon.name.slice(3), 'info')}
1616
>
17-
<Icon fontSize={30} color={color.black} />
17+
<Icon fontSize={30} color={color.blue70} />
1818
</StyledDivIcon>
1919
);
2020
});

‎packages/core/src/lib/Accordion/Accordion.styles.ts

+57-57
Original file line numberDiff line numberDiff line change
@@ -8,87 +8,87 @@ import type { AccordionProps } from './types';
88
type TStyleProps = Pick<AccordionProps, 'theme'>;
99

1010
const getThemeColor = (theme: string) => {
11-
switch (theme) {
12-
case 'blue':
13-
return color.blue;
14-
case 'red':
15-
return color.red;
16-
case 'green':
17-
return color.green;
18-
case 'yellow':
19-
return color.yellow;
20-
default:
21-
return color.blue;
22-
}
11+
switch (theme) {
12+
case 'blue':
13+
return color.navy40;
14+
case 'red':
15+
return color.red40;
16+
case 'green':
17+
return color.mint40;
18+
case 'yellow':
19+
return color.yellow50;
20+
default:
21+
return color.navy40;
22+
}
2323
};
2424

2525
const SectionStyled = styled.section<TStyleProps>`
26-
background-color: ${color.white};
27-
border: 1px solid ${(p) => getThemeColor(p.theme)};
28-
border-radius: 20px;
29-
opacity: 0%;
30-
overflow: hidden;
31-
transition-delay: 0.3s;
32-
transition: opacity 0.3s ease-out;
26+
background-color: ${color.white};
27+
border: 1px solid ${(p) => getThemeColor(p.theme)};
28+
border-radius: 20px;
29+
opacity: 0%;
30+
overflow: hidden;
31+
transition-delay: 0.3s;
32+
transition: opacity 0.3s ease-out;
3333
`;
3434

3535
const HeaderStyled = styled.header`
36-
display: flex;
37-
cursor: pointer;
38-
flex-wrap: wrap;
39-
justify-content: space-between;
40-
padding: 8px 12px;
36+
display: flex;
37+
cursor: pointer;
38+
flex-wrap: wrap;
39+
justify-content: space-between;
40+
padding: 8px 12px;
4141
42-
&:hover {
43-
background-color: ${color.paleBlue2};
44-
}
42+
&:hover {
43+
background-color: ${color.navy20};
44+
}
4545
`;
4646

4747
const H4Styled = styled.h4`
48-
${resetCSS}
49-
${fonts.heading}
48+
${resetCSS}
49+
${fonts.heading}
5050
${fonts.h4}
5151
line-height: 1;
52-
padding: 8px 0;
52+
padding: 8px 0;
5353
`;
5454

5555
const DivStyled = styled.div`
56-
align-items: center;
57-
display: flex;
58-
justify-content: center;
56+
align-items: center;
57+
display: flex;
58+
justify-content: center;
5959
60-
p {
61-
${resetCSS}
62-
${fonts.text}
60+
p {
61+
${resetCSS}
62+
${fonts.text}
6363
margin: 0 6px;
64-
min-width: 100px;
65-
text-align: right;
66-
}
64+
min-width: 100px;
65+
text-align: right;
66+
}
6767
68-
svg {
69-
margin: 0 6px;
70-
min-width: 18px;
71-
}
68+
svg {
69+
margin: 0 6px;
70+
min-width: 18px;
71+
}
7272
73-
div {
74-
margin: 0 6px;
75-
}
73+
div {
74+
margin: 0 6px;
75+
}
7676
77-
&:last-of-type {
78-
margin-left: auto;
79-
}
77+
&:last-of-type {
78+
margin-left: auto;
79+
}
8080
`;
8181

8282
const DivStyledContent = styled.div`
83-
overflow: hidden;
84-
transition: max-height 0.3s ease-out;
83+
overflow: hidden;
84+
transition: max-height 0.3s ease-out;
8585
`;
8686

8787
export default {
88-
DivStyled,
89-
DivStyledContent,
90-
H4Styled,
91-
HeaderStyled,
92-
SectionStyled,
93-
getThemeColor
88+
DivStyled,
89+
DivStyledContent,
90+
H4Styled,
91+
HeaderStyled,
92+
SectionStyled,
93+
getThemeColor,
9494
};

‎packages/core/src/lib/Accordion/Accordion.test.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -81,14 +81,14 @@ test('Renders colors', () => {
8181
render(<Default />);
8282
const element = screen.getByTestId(testId);
8383
const styles = element && getComputedStyle(element);
84-
expect(styles.border).toBe(`1px solid ${color.blue}`.toLowerCase());
84+
expect(styles.border).toBe(`1px solid ${color.navy40}`.toLowerCase());
8585
});
8686

8787
test('Renders theme colors', () => {
8888
render(<ThemeColor />);
8989
const element = screen.getByTestId(testId);
9090
const styles = element && getComputedStyle(element);
91-
expect(styles.border).toBe(`1px solid ${color.green}`.toLowerCase());
91+
expect(styles.border).toBe(`1px solid ${color.mint40}`.toLowerCase());
9292
});
9393

9494
test('Renders HasSubtitle', () => {

‎packages/core/src/lib/Badge/Badge.styles.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@ type TStyleProps = Pick<BadgeProps, 'state'>;
77
const getBackgroundColor = (type: colorState) => {
88
switch (type) {
99
case 'danger':
10-
return color.red;
10+
return color.red40;
1111
case 'success':
12-
return color.green;
12+
return color.mint40;
1313
case 'warning':
14-
return color.yellow;
14+
return color.yellow50;
1515
default:
16-
return color.blue;
16+
return color.navy40;
1717
}
1818
};
1919

‎packages/core/src/lib/Badge/Badge.test.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ test('Renders Danger', () => {
2121
const styles = element && getComputedStyle(element);
2222
const backgroundColorHex =
2323
styles && rgbToHex(styles.backgroundColor).toUpperCase();
24-
expect(backgroundColorHex).toBe(color.red);
24+
expect(backgroundColorHex).toBe(color.red40);
2525

2626
const text = screen.getByTestId(testText);
2727
expect(text).not.toBeNull();
@@ -38,7 +38,7 @@ test('Renders Normal', () => {
3838
const styles = element && getComputedStyle(element);
3939
const backgroundColorHex =
4040
styles && rgbToHex(styles.backgroundColor).toUpperCase();
41-
expect(backgroundColorHex).toBe(color.blue);
41+
expect(backgroundColorHex).toBe(color.navy40);
4242

4343
const text = screen.getByTestId(testText);
4444
expect(text).not.toBeNull();
@@ -55,7 +55,7 @@ test('Renders Success', () => {
5555
const styles = element && getComputedStyle(element);
5656
const backgroundColorHex =
5757
styles && rgbToHex(styles.backgroundColor).toUpperCase();
58-
expect(backgroundColorHex).toBe(color.green);
58+
expect(backgroundColorHex).toBe(color.mint40);
5959

6060
const text = screen.getByTestId(testText);
6161
expect(text).not.toBeNull();
@@ -72,7 +72,7 @@ test('Renders Warning', () => {
7272
const styles = element && getComputedStyle(element);
7373
const backgroundColorHex =
7474
styles && rgbToHex(styles.backgroundColor).toUpperCase();
75-
expect(backgroundColorHex).toBe(color.yellow);
75+
expect(backgroundColorHex).toBe(color.yellow50);
7676

7777
const text = screen.getByTestId(testText);
7878
expect(text).not.toBeNull();

‎packages/core/src/lib/BannerStrip/BannerStrip.styles.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@ import { BannerStripProps } from './types';
55
const getBackgroundColor = (type: string) => {
66
switch (type) {
77
case 'success':
8-
return color.green;
8+
return color.mint40;
99
case 'warning':
10-
return color.yellow;
10+
return color.yellow50;
1111
case 'error':
12-
return color.red;
12+
return color.red40;
1313
default:
14-
return color.blue;
14+
return color.navy40;
1515
}
1616
};
1717

‎packages/core/src/lib/BannerStrip/BannerStrip.test.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ test('Renders Standard', () => {
2020
const styles = element && getComputedStyle(element);
2121
const backgroundColorHex =
2222
styles && rgbToHex(styles.backgroundColor).toUpperCase();
23-
expect(backgroundColorHex).toBe(color.blue);
23+
expect(backgroundColorHex).toBe(color.navy40);
2424
});
2525

2626
test('Renders Standard with Button', () => {
@@ -34,7 +34,7 @@ test('Renders Standard with Button', () => {
3434
const styles = element && getComputedStyle(element);
3535
const backgroundColorHex =
3636
styles && rgbToHex(styles.backgroundColor).toUpperCase();
37-
expect(backgroundColorHex).toBe(color.blue);
37+
expect(backgroundColorHex).toBe(color.navy40);
3838
});
3939

4040
test('Renders Warning', () => {
@@ -48,7 +48,7 @@ test('Renders Warning', () => {
4848
const styles = element && getComputedStyle(element);
4949
const backgroundColorHex =
5050
styles && rgbToHex(styles.backgroundColor).toUpperCase();
51-
expect(backgroundColorHex).toBe(color.yellow);
51+
expect(backgroundColorHex).toBe(color.yellow50);
5252
});
5353

5454
test('Renders Error', () => {
@@ -62,7 +62,7 @@ test('Renders Error', () => {
6262
const styles = element && getComputedStyle(element);
6363
const backgroundColorHex =
6464
styles && rgbToHex(styles.backgroundColor).toUpperCase();
65-
expect(backgroundColorHex).toBe(color.red);
65+
expect(backgroundColorHex).toBe(color.red40);
6666
});
6767

6868
test('Renders Success', () => {
@@ -76,5 +76,5 @@ test('Renders Success', () => {
7676
const styles = element && getComputedStyle(element);
7777
const backgroundColorHex =
7878
styles && rgbToHex(styles.backgroundColor).toUpperCase();
79-
expect(backgroundColorHex).toBe(color.green);
79+
expect(backgroundColorHex).toBe(color.mint40);
8080
});

0 commit comments

Comments
 (0)