Spacing and border radius (#49)

packages/design-system/config/borderRadius.ts

@@ -0,0 +1,14 @@
+import { ThemeConfig } from "tailwindcss/types/config";
+
+const borderRadius: Pick<Partial<ThemeConfig>, "borderRadius"> = {
+  // !!! We replace the default Tailwind CSS borderRadius scale with our own
+  borderRadius: {
+    none: "0px",
+    DEFAULT: "1rem",
+    md: "1.5rem",
+    lg: "2rem",
+    full: "9999px",
+  },
+};
+
+export default borderRadius;

packages/design-system/config/spacing.ts

@@ -0,0 +1,15 @@
+import { ThemeConfig } from "tailwindcss/types/config";
+
+const spacing: Pick<Partial<ThemeConfig>, "spacing"> = {
+  // We're adding these as a default spacing scale, but feel free to use any multiplies of 0.25rem as part of default Tailwind CSS spacing scale e.g. h-10 p-2
+  spacing: {
+    xxs: "0.25rem",
+    xs: "0.5rem",
+    sm: "1rem",
+    md: "1.5rem",
+    lg: "2rem",
+    xl: "3rem",
+  },
+};
+
+export default spacing;

packages/design-system/src/heading.tsx

@@ -5,7 +5,7 @@ type Props = {
 };
 
 const Heading = ({ children }: Props): JSX.Element => {
-  return <h1 className="k1-text-primary">{children}</h1>;
+  return <h1 className="k1-text-primary k1-px-md k1-h-xl">{children}</h1>;
 };
 
 export { Heading };

packages/design-system/tailwind.config.ts

@@ -1,6 +1,8 @@
 import type { Config } from "tailwindcss";
 import colors from "./config/colors";
 import typography from "./config/typography";
+import spacing from "./config/spacing";
+import borderRadius from "./config/borderRadius";
 
 // Each package is responsible for its own content
 const config: Config = {
@@ -10,7 +12,10 @@ const config: Config = {
     extend: {
       ...colors,
       ...typography,
+      ...spacing,
     },
+    // Replace the default Tailwind CSS with our own
+    ...borderRadius,
   },
   plugins: [],
 };