feat: add spaces

src/components/ColorsFoundation.vue

@@ -19,7 +19,6 @@ const getRootColors = () => {
       rootColors[key] = props.colors[key]
     }
   }
-  console.log(rootColors)
   return rootColors
 }
 
@@ -38,7 +37,7 @@ const getRootColors = () => {
 </template>
 
 
-<style>
+<style scoped>
 .colors-padding {
   margin-left: auto;
   margin-right: auto;

src/components/ColorsGrid.vue

@@ -54,7 +54,7 @@ function hexToRgb(hex) {
 </template>
 
 
-<style>
+<style scoped>
 h2 {
   font-size: 1.5rem;
   font-weight: bold;

src/components/SpacesFoundation.vue

@@ -0,0 +1,43 @@
+<script setup>
+const props = defineProps({
+  spaces: {
+    type: Object,
+    required: true
+  }
+})
+</script>
+
+
+<template>
+  <h2 class="title">
+    Spaces
+  </h2>
+  <div class="spaces">
+    <div v-for="(space, key) in spaces">
+      <div class="spaces__space" :style="`width: ${space}`"/>
+        <div>{{ key }}</div>
+    </div>
+  </div>
+</template>
+
+
+<style scoped>
+.title {
+  text-align: center;
+}
+
+.spaces {
+  padding: 5rem;
+  margin-left: auto;
+  margin-right: auto;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.spaces__space {
+  border-radius: 0.75rem;
+  background-color: gray;
+  margin-bottom: 1rem;
+  height: 5rem;
+}
+</style>

src/stories/Spaces.stories.js

@@ -0,0 +1,19 @@
+import SpacesFoundation from '../components/SpacesFoundation.vue';
+
+export default {
+  title: 'Foundations/Spaces',
+  component: SpacesFoundation,
+};
+
+const Template = (args) => ({
+  components: { SpacesFoundation },
+  setup() {
+    return { args };
+  },
+  template: '<SpacesFoundation v-bind="args" />',
+});
+
+export const Spaces = Template.bind({});
+Spaces.args = {
+  spaces: import.meta.env.STORYBOOK_TAILWIND.theme.space,
+}

tailwind.config.js

@@ -7,7 +7,7 @@ module.exports = {
   ],
   theme: {
     extend: {
-
+      'test': 'rgba(1, 1, 1, 0.1)',
     },
   },
   plugins: [],