feat: dynamically generate utility classes

packages/react/src/atoms/Color/Color.tsx

@@ -1,16 +1,16 @@
 import React from "react";
+import Spacing from "../../foundation/Spacing";
 
 interface ColorProps {
     hexCode: string,
-    width: string,
-    height: string
+    width?: keyof typeof Spacing,
+    height?: keyof typeof Spacing
 }
 
-const Color: React.FC<ColorProps> = ({ hexCode, width, height }) => {
-    return <div style={{
+const Color: React.FC<ColorProps> = ({ hexCode, width = Spacing.sm, height = Spacing.sm }) => {
+    const className = `dse-width-${width} dse-height-${height}`;
+    return <div className={className} style={{
         backgroundColor: hexCode,
-        width,
-        height
     }}>
 
     </div>

packages/react/src/foundation/Spacing.ts

@@ -0,0 +1,33 @@
+const spaces: {
+  none: "none";
+  xxxs: "xxxs";
+  xxs: "xxs";
+  xs: "xs";
+  sm: "sm";
+  md: "md";
+  lg: "lg";
+  xl: "xl";
+  xxl: "xxl";
+  xxxl: "xxxl";
+} = {
+  none: "none",
+  xxxs: "xxxs",
+  // 4px
+  xxs: "xxs",
+  // 8px
+  xs: "xs",
+  // 12px
+  sm: "sm",
+  // 16px
+  md: "md",
+  // 24px
+  lg: "lg",
+  // 32px
+  xl: "xl",
+  // 48px
+  xxl: "xxl",
+  // 72px
+  xxxl: "xxxl",
+};
+
+export default Object.freeze(spaces);

packages/react/src/index.ts

@@ -1,4 +1,5 @@
 // import Button from "./atoms/Button";
 import Color from "./atoms/Color";
+import Spacing from "./foundation/Spacing";
 
-export { Color };
+export { Color, Spacing };

packages/scss/src/atoms/Utilities.scss

@@ -0,0 +1,11 @@
+@import "foundation/all";
+
+@each $size, $value in $spacing {
+    .dse-width-#{$size} {
+        width: $value;
+    }
+
+    .dse-height-#{$size} {
+        height: $value;
+    }
+}

playgrounds/react/src/index.tsx

@@ -2,17 +2,17 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 
 // import Button from '@ds.e/react';
-import Color from '@ds.e/react';
-
+import { Color } from '@ds.e/react';
 // import '@ds.e/scss/lib/Button.css';
+import '@ds.e/scss/lib/Utilities.css';
 
 const root = ReactDOM.createRoot(
     document.getElementById('root') as HTMLElement
 )
 
 root.render(
     <React.StrictMode>
-        <Color hexCode='#000' width="1rem" height="1rem"/>
+        <Color hexCode='#000' />
         {/* <Button label="React Playground"/> */}
     </React.StrictMode>,
 )