Skip to content

Commit

Permalink
fix: Put scales at the theme root (#34)
Browse files Browse the repository at this point in the history
  • Loading branch information
RabbitDoge authored Oct 28, 2020
1 parent 0aeb358 commit c160770
Show file tree
Hide file tree
Showing 4 changed files with 20 additions and 16 deletions.
6 changes: 3 additions & 3 deletions src/components/Layouts/BaseLayout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/Layouts/CardsLayout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
Expand Down
8 changes: 3 additions & 5 deletions src/styled.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
20 changes: 13 additions & 7 deletions src/theme/base.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)",
Expand All @@ -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,
};

0 comments on commit c160770

Please sign in to comment.