Add properties for spacing/breakpoints/initial palette

penumbra-zone · Jul 11, 2024 · 08f2edd · 08f2edd
1 parent 0ffa68d
commit 08f2edd
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 0 deletions.
diff --git a/packages/ui/src/ThemeProvider/theme.ts b/packages/ui/src/ThemeProvider/theme.ts
@@ -1,6 +1,13 @@
 import { DefaultTheme } from 'styled-components';
 
 export const theme: DefaultTheme = {
+  breakpoints: {
+    mobile: 0,
+    tablet: 600,
+    desktop: 900,
+    lg: 1200,
+    xl: 1600,
+  },
   fonts: {
     default: 'Poppins',
     mono: 'Iosevka Term, monospace',
@@ -21,4 +28,12 @@ export const theme: DefaultTheme = {
     textSm: '0.875rem',
     textXs: '0.75rem',
   },
+  palette: {
+    neutral: {
+      100: '#f5f5f5',
+      400: '#a3a3a3',
+      700: '#404040',
+    },
+  },
+  spacing: spacingUnits => `${spacingUnits * 4}px`,
 };
diff --git a/packages/ui/src/styled-components.d.ts b/packages/ui/src/styled-components.d.ts
@@ -2,6 +2,13 @@ import 'styled-components';
 
 declare module 'styled-components' {
   export interface DefaultTheme {
+    breakpoints: {
+      mobile: number;
+      tablet: number;
+      desktop: number;
+      lg: number;
+      xl: number;
+    };
     fonts: {
       default: string;
       mono: string;
@@ -22,5 +29,17 @@ declare module 'styled-components' {
       textSm: string;
       textXs: string;
     };
+    palette: {
+      neutral: {
+        100: string;
+        400: string;
+        700: string;
+      };
+    };
+    /**
+     * A function that takes a number of spacing units, and returns a string to
+     * use for a CSS property.
+     */
+    spacing: (spacingUnits: number) => string;
   }
 }