fix: Put scales at the theme root (#34)

pancakeswap · Oct 28, 2020 · c160770 · c160770
1 parent 0aeb358
commit c160770
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 16 deletions.
diff --git a/src/components/Layouts/BaseLayout.tsx b/src/components/Layouts/BaseLayout.tsx
@@ -4,15 +4,15 @@ const GridLayout = styled.div`
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   grid-gap: 16px;
-  ${({ theme }) => theme.scales.mediaQueries.sm} {
+  ${({ theme }) => theme.mediaQueries.sm} {
     grid-template-columns: repeat(8, 1fr);
     grid-gap: 24px;
   }
-  ${({ theme }) => theme.scales.mediaQueries.md} {
+  ${({ theme }) => theme.mediaQueries.md} {
     grid-template-columns: repeat(12, 1fr);
     grid-gap: 24px;
   }
-  ${({ theme }) => theme.scales.mediaQueries.lg} {
+  ${({ theme }) => theme.mediaQueries.lg} {
     grid-template-columns: repeat(12, 1fr);
     grid-gap: 32px;
   }

diff --git a/src/components/Layouts/CardsLayout.tsx b/src/components/Layouts/CardsLayout.tsx
@@ -4,7 +4,7 @@ import BaseLayout from "./BaseLayout";
 const GridLayout = styled(BaseLayout)`
   & > div {
     grid-column: span 6;
-    ${({ theme }) => theme.scales.mediaQueries.sm} {
+    ${({ theme }) => theme.mediaQueries.sm} {
       grid-column: span 4;
     }
   }

diff --git a/src/styled.d.ts b/src/styled.d.ts
@@ -49,11 +49,9 @@ declare module "styled-components" {
     card: CardTheme;
     tag: TagTheme;
     toggle: ToggleTheme;
-    scales: {
-      breakpoints: Breakpoints;
-      mediaQueries: MediaQueries;
-      spacing: Spacing;
-    };
+    breakpoints: Breakpoints;
+    mediaQueries: MediaQueries;
+    spacing: Spacing;
     shadows: Shadows;
   }
 }
diff --git a/src/theme/base.ts b/src/theme/base.ts
@@ -10,8 +10,6 @@ const mediaQueries: MediaQueries = {
   xl: `@media screen and (min-width: ${breakpoints[4]})`,
 };
 
-const spacing: Spacing = [0, 4, 8, 16, 24, 32, 48, 64];
-
 export const shadows = {
   level1: "0px 2px 12px -8px rgba(25, 19, 38, 0.1), 0px 1px 1px rgba(25, 19, 38, 0.05)",
   active: "0px 0px 0px 1px #0098A1, 0px 0px 4px 8px rgba(31, 199, 212, 0.4)",
@@ -20,11 +18,19 @@ export const shadows = {
   focus: "0px 0px 0px 1px #7645D9, 0px 0px 0px 4px rgba(118, 69, 217, 0.6)",
 };
 
+const spacing: Spacing = [0, 4, 8, 16, 24, 32, 48, 64];
+
+const radii = {
+  default: "16px",
+  card: "32px",
+  circle: "50%",
+};
+
 export default {
-  scales: {
-    breakpoints,
-    mediaQueries,
-    spacing,
-  },
+  siteWidth: 1200,
+  breakpoints,
+  mediaQueries,
+  spacing,
   shadows,
+  radii,
 };