feat(colors): Moralis 2.0 update (#824)

* feat(colors): Moralis 2.0 update * feat(colors): final updates
web3ui · Oct 12, 2022 · 3544609 · 3544609
1 parent 838cc48
commit 3544609
Show file tree

Hide file tree

Showing 118 changed files with 1,478 additions and 1,416 deletions.
diff --git a/.changeset/curly-adults-call.md b/.changeset/curly-adults-call.md
@@ -0,0 +1,8 @@
+---
+'@web3uikit/core': minor
+'@web3uikit/styles': minor
+'@web3uikit/web3': minor
+'@web3uikit/web3api': minor
+---
+
+updated color system
diff --git a/.plop/plop-templates/with-code-examples/{{ name }}.styles.ts.hbs b/.plop/plop-templates/with-code-examples/{{ name }}.styles.ts.hbs
@@ -15,19 +15,19 @@ type TStyleProps = Pick<{{ getInterface name }}, 'state' | 'hasUnderline' | 'bgC
 // CSS Props should be sorted alphabetically
 // //////////////////
 const greenColor = css`
-    color: ${color.green};
+    color: ${color.mint40};
 `;
 const redColor = css`
-    color: ${color.red};
+    color: ${color.red40};
 `;
 
 // //////////////////
 // Styled Components
 // CSS Props should be sorted alphabetically
 // //////////////////
 const SectionStyled = styled.section<TStyleProps>`
-    border-bottom: 5px solid ${color.green};
-    border-top: 5px solid ${color.yellow};
+    border-bottom: 5px solid ${color.mint40};
+    border-top: 5px solid ${color.yellow50};
     padding: 12px 24px;
     background-color: ${(p) => p.bgColor && color[p.bgColor]};
 `;

diff --git a/.plop/plop-templates/with-code-examples/{{ name }}.test.tsx.hbs b/.plop/plop-templates/with-code-examples/{{ name }}.test.tsx.hbs
@@ -52,7 +52,7 @@ test('Renders Default component', () => {
 
     const styles = heading && getComputedStyle(heading);
     const colorHex = styles && rgbToHex(styles.color).toUpperCase();
-    expect(colorHex).toBe(color.green);
+    expect(colorHex).toBe(color.mint40);
 
     const text = screen.getByTestId(testText);
     expect(text).not.toBeNull();
@@ -85,7 +85,7 @@ test('changes UI onClick of the button', () => {
 
     const styles = headingElement && getComputedStyle(headingElement);
     const colorHex = styles && rgbToHex(styles.color).toUpperCase();
-    expect(colorHex).toBe(color.red);
+    expect(colorHex).toBe(color.red40);
 });
 
 // Test Story 3: InitializeRed
@@ -110,7 +110,7 @@ test('Renders InitializeRed', () => {
 
     const styles = heading && getComputedStyle(heading);
     const colorHex = styles && rgbToHex(styles.color).toUpperCase();
-    expect(colorHex).toBe(color.red);
+    expect(colorHex).toBe(color.red40);
 
     const text = screen.getByTestId(testText);
     expect(text).not.toBeNull();
@@ -142,7 +142,7 @@ test('changes UI onClick of the button', () => {
 
     const styles = headingElement && getComputedStyle(headingElement);
     const colorHex = styles && rgbToHex(styles.color).toUpperCase();
-    expect(colorHex).toBe(color.green);
+    expect(colorHex).toBe(color.mint40);
 });
 
 // Test Story 4: UnderLinedText
@@ -167,7 +167,7 @@ test('Renders UnderLinedText', () => {
 
     const styles = heading && getComputedStyle(heading);
     const colorHex = styles && rgbToHex(styles.color).toUpperCase();
-    expect(colorHex).toBe(color.green);
+    expect(colorHex).toBe(color.mint40);
 
     const text = screen.getByTestId(testText);
     expect(text).not.toBeNull();
@@ -198,5 +198,5 @@ test('changes UI onClick of the button', () => {
 
     const styles = headingElement && getComputedStyle(headingElement);
     const colorHex = styles && rgbToHex(styles.color).toUpperCase();
-    expect(colorHex).toBe(color.red);
+    expect(colorHex).toBe(color.red40);
 });
diff --git a/.plop/plop-templates/with-code-examples/{{ name }}.tsx.hbs b/.plop/plop-templates/with-code-examples/{{ name }}.tsx.hbs
@@ -56,10 +56,10 @@ const {{ name }}: React.FC<{{ getInterface name }}> = ({
             </TitleStyled>
             <SpanStyled>
                 {compState?<Checkmark
-                    fill={color.green}
+                    fill={color.mint40}
                     fontSize={30}
                 />:<Cross 
-                    fill={color.red}
+                    fill={color.red40}
                     fontSize={30}/>}
                 <HeadingStyled state={compState} data-testid="test-heading">
                     {compState === 'greenLight' ? textOn : textOff}

diff --git a/packages/core/src/IconsGallery/IconGallery.styles.ts b/packages/core/src/IconsGallery/IconGallery.styles.ts
@@ -24,7 +24,7 @@ const StyledDivIcon = styled.div`
     border-radius: 20px;
     transition: all 0.1s linear;
     &:hover {
-        background-color: ${color.blueCloud};
+        background-color: ${color.aero10};
     }
 `;
 

diff --git a/packages/core/src/IconsGallery/IconGallery.tsx b/packages/core/src/IconsGallery/IconGallery.tsx
@@ -14,7 +14,7 @@ const IconsGallery = () => {
                 key={Icon.name.slice(3)}
                 onClick={() => handleClick(Icon.name.slice(3), 'info')}
             >
-                <Icon fontSize={30} color={color.black} />
+                <Icon fontSize={30} color={color.blue70} />
             </StyledDivIcon>
         );
     });

diff --git a/packages/core/src/lib/Accordion/Accordion.styles.ts b/packages/core/src/lib/Accordion/Accordion.styles.ts
@@ -8,87 +8,87 @@ import type { AccordionProps } from './types';
 type TStyleProps = Pick<AccordionProps, 'theme'>;
 
 const getThemeColor = (theme: string) => {
-  switch (theme) {
-    case 'blue':
-      return color.blue;
-    case 'red':
-      return color.red;
-    case 'green':
-      return color.green;
-    case 'yellow':
-      return color.yellow;
-    default:
-      return color.blue;
-  }
+    switch (theme) {
+        case 'blue':
+            return color.navy40;
+        case 'red':
+            return color.red40;
+        case 'green':
+            return color.mint40;
+        case 'yellow':
+            return color.yellow50;
+        default:
+            return color.navy40;
+    }
 };
 
 const SectionStyled = styled.section<TStyleProps>`
-  background-color: ${color.white};
-  border: 1px solid ${(p) => getThemeColor(p.theme)};
-  border-radius: 20px;
-  opacity: 0%;
-  overflow: hidden;
-  transition-delay: 0.3s;
-  transition: opacity 0.3s ease-out;
+    background-color: ${color.white};
+    border: 1px solid ${(p) => getThemeColor(p.theme)};
+    border-radius: 20px;
+    opacity: 0%;
+    overflow: hidden;
+    transition-delay: 0.3s;
+    transition: opacity 0.3s ease-out;
 `;
 
 const HeaderStyled = styled.header`
-  display: flex;
-  cursor: pointer;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  padding: 8px 12px;
+    display: flex;
+    cursor: pointer;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    padding: 8px 12px;
 
-  &:hover {
-    background-color: ${color.paleBlue2};
-  }
+    &:hover {
+        background-color: ${color.navy20};
+    }
 `;
 
 const H4Styled = styled.h4`
-  ${resetCSS}
-  ${fonts.heading}
+    ${resetCSS}
+    ${fonts.heading}
     ${fonts.h4}
     line-height: 1;
-  padding: 8px 0;
+    padding: 8px 0;
 `;
 
 const DivStyled = styled.div`
-  align-items: center;
-  display: flex;
-  justify-content: center;
+    align-items: center;
+    display: flex;
+    justify-content: center;
 
-  p {
-    ${resetCSS}
-    ${fonts.text}
+    p {
+        ${resetCSS}
+        ${fonts.text}
         margin: 0 6px;
-    min-width: 100px;
-    text-align: right;
-  }
+        min-width: 100px;
+        text-align: right;
+    }
 
-  svg {
-    margin: 0 6px;
-    min-width: 18px;
-  }
+    svg {
+        margin: 0 6px;
+        min-width: 18px;
+    }
 
-  div {
-    margin: 0 6px;
-  }
+    div {
+        margin: 0 6px;
+    }
 
-  &:last-of-type {
-    margin-left: auto;
-  }
+    &:last-of-type {
+        margin-left: auto;
+    }
 `;
 
 const DivStyledContent = styled.div`
-  overflow: hidden;
-  transition: max-height 0.3s ease-out;
+    overflow: hidden;
+    transition: max-height 0.3s ease-out;
 `;
 
 export default {
-  DivStyled,
-  DivStyledContent,
-  H4Styled,
-  HeaderStyled,
-  SectionStyled,
-  getThemeColor
+    DivStyled,
+    DivStyledContent,
+    H4Styled,
+    HeaderStyled,
+    SectionStyled,
+    getThemeColor,
 };
diff --git a/packages/core/src/lib/Accordion/Accordion.test.tsx b/packages/core/src/lib/Accordion/Accordion.test.tsx
@@ -81,14 +81,14 @@ test('Renders colors', () => {
     render(<Default />);
     const element = screen.getByTestId(testId);
     const styles = element && getComputedStyle(element);
-    expect(styles.border).toBe(`1px solid ${color.blue}`.toLowerCase());
+    expect(styles.border).toBe(`1px solid ${color.navy40}`.toLowerCase());
 });
 
 test('Renders theme colors', () => {
     render(<ThemeColor />);
     const element = screen.getByTestId(testId);
     const styles = element && getComputedStyle(element);
-    expect(styles.border).toBe(`1px solid ${color.green}`.toLowerCase());
+    expect(styles.border).toBe(`1px solid ${color.mint40}`.toLowerCase());
 });
 
 test('Renders HasSubtitle', () => {

diff --git a/packages/core/src/lib/Badge/Badge.styles.ts b/packages/core/src/lib/Badge/Badge.styles.ts
@@ -7,13 +7,13 @@ type TStyleProps = Pick<BadgeProps, 'state'>;
 const getBackgroundColor = (type: colorState) => {
     switch (type) {
         case 'danger':
-            return color.red;
+            return color.red40;
         case 'success':
-            return color.green;
+            return color.mint40;
         case 'warning':
-            return color.yellow;
+            return color.yellow50;
         default:
-            return color.blue;
+            return color.navy40;
     }
 };
 

diff --git a/packages/core/src/lib/Badge/Badge.test.tsx b/packages/core/src/lib/Badge/Badge.test.tsx
@@ -21,7 +21,7 @@ test('Renders Danger', () => {
     const styles = element && getComputedStyle(element);
     const backgroundColorHex =
         styles && rgbToHex(styles.backgroundColor).toUpperCase();
-    expect(backgroundColorHex).toBe(color.red);
+    expect(backgroundColorHex).toBe(color.red40);
 
     const text = screen.getByTestId(testText);
     expect(text).not.toBeNull();
@@ -38,7 +38,7 @@ test('Renders Normal', () => {
     const styles = element && getComputedStyle(element);
     const backgroundColorHex =
         styles && rgbToHex(styles.backgroundColor).toUpperCase();
-    expect(backgroundColorHex).toBe(color.blue);
+    expect(backgroundColorHex).toBe(color.navy40);
 
     const text = screen.getByTestId(testText);
     expect(text).not.toBeNull();
@@ -55,7 +55,7 @@ test('Renders Success', () => {
     const styles = element && getComputedStyle(element);
     const backgroundColorHex =
         styles && rgbToHex(styles.backgroundColor).toUpperCase();
-    expect(backgroundColorHex).toBe(color.green);
+    expect(backgroundColorHex).toBe(color.mint40);
 
     const text = screen.getByTestId(testText);
     expect(text).not.toBeNull();
@@ -72,7 +72,7 @@ test('Renders Warning', () => {
     const styles = element && getComputedStyle(element);
     const backgroundColorHex =
         styles && rgbToHex(styles.backgroundColor).toUpperCase();
-    expect(backgroundColorHex).toBe(color.yellow);
+    expect(backgroundColorHex).toBe(color.yellow50);
 
     const text = screen.getByTestId(testText);
     expect(text).not.toBeNull();

diff --git a/packages/core/src/lib/BannerStrip/BannerStrip.styles.ts b/packages/core/src/lib/BannerStrip/BannerStrip.styles.ts
@@ -5,13 +5,13 @@ import { BannerStripProps } from './types';
 const getBackgroundColor = (type: string) => {
     switch (type) {
         case 'success':
-            return color.green;
+            return color.mint40;
         case 'warning':
-            return color.yellow;
+            return color.yellow50;
         case 'error':
-            return color.red;
+            return color.red40;
         default:
-            return color.blue;
+            return color.navy40;
     }
 };
 

diff --git a/packages/core/src/lib/BannerStrip/BannerStrip.test.tsx b/packages/core/src/lib/BannerStrip/BannerStrip.test.tsx
@@ -20,7 +20,7 @@ test('Renders Standard', () => {
     const styles = element && getComputedStyle(element);
     const backgroundColorHex =
         styles && rgbToHex(styles.backgroundColor).toUpperCase();
-    expect(backgroundColorHex).toBe(color.blue);
+    expect(backgroundColorHex).toBe(color.navy40);
 });
 
 test('Renders Standard with Button', () => {
@@ -34,7 +34,7 @@ test('Renders Standard with Button', () => {
     const styles = element && getComputedStyle(element);
     const backgroundColorHex =
         styles && rgbToHex(styles.backgroundColor).toUpperCase();
-    expect(backgroundColorHex).toBe(color.blue);
+    expect(backgroundColorHex).toBe(color.navy40);
 });
 
 test('Renders Warning', () => {
@@ -48,7 +48,7 @@ test('Renders Warning', () => {
     const styles = element && getComputedStyle(element);
     const backgroundColorHex =
         styles && rgbToHex(styles.backgroundColor).toUpperCase();
-    expect(backgroundColorHex).toBe(color.yellow);
+    expect(backgroundColorHex).toBe(color.yellow50);
 });
 
 test('Renders Error', () => {
@@ -62,7 +62,7 @@ test('Renders Error', () => {
     const styles = element && getComputedStyle(element);
     const backgroundColorHex =
         styles && rgbToHex(styles.backgroundColor).toUpperCase();
-    expect(backgroundColorHex).toBe(color.red);
+    expect(backgroundColorHex).toBe(color.red40);
 });
 
 test('Renders Success', () => {
@@ -76,5 +76,5 @@ test('Renders Success', () => {
     const styles = element && getComputedStyle(element);
     const backgroundColorHex =
         styles && rgbToHex(styles.backgroundColor).toUpperCase();
-    expect(backgroundColorHex).toBe(color.green);
+    expect(backgroundColorHex).toBe(color.mint40);
 });