feat: add foundation stories for elevation, rounded, typography

stories/foundation/Colors.vue → stories/foundation/colors/Colors.vue

@@ -11,6 +11,7 @@ colors.error = colors.rose;
 </script>
 
 <template>
+  <h1 class="text-3xl font-bold mb-5">Colors</h1>
   <h3 class="text-lg font-semibold mb-3">Brand Colors</h3>
   <div class="grid gap-4 grid-cols-2 sm:grid-cols-6">
     <div v-for="color in defaultColors" :key="color">

stories/foundation/elevation/Elevation.stories.ts

@@ -0,0 +1,11 @@
+import {Meta, Story} from '@storybook/vue3';
+import ElevationComponent from './Elevation.vue';
+
+export default {
+  title: 'Foundation/Elevation',
+} as Meta;
+
+export const Elevation: Story = () => ({
+  components: {ElevationComponent},
+  template: `<ElevationComponent />`,
+});

stories/foundation/elevation/Elevation.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import defaultTheme from 'tailwindcss/defaultTheme';
+</script>
+
+<template>
+  <h1 class="text-3xl font-bold mb-5">Elevation</h1>
+  <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
+    <template v-for="(shadow, name) in defaultTheme.boxShadow" :key="name">
+      <div :style="{boxShadow: shadow}" class="rounded-xl p-6 border bg-white">
+        <div class="mb-2 font-semibold">
+          {{ name === 'DEFAULT' ? 'shadow' : `shadow-${name}` }}
+        </div>
+        <code class="text-mono text-xs">{{ shadow }}</code>
+      </div>
+    </template>
+  </div>
+</template>

stories/foundation/rounded/Rounded.stories.ts

@@ -0,0 +1,11 @@
+import {Meta, Story} from '@storybook/vue3';
+import RoundedComponent from './Rounded.vue';
+
+export default {
+  title: 'Foundation/Rounded',
+} as Meta;
+
+export const Rounded: Story = () => ({
+  components: {RoundedComponent},
+  template: `<RoundedComponent />`,
+});

stories/foundation/rounded/Rounded.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import defaultTheme from 'tailwindcss/defaultTheme';
+</script>
+
+<template>
+  <h1 class="text-3xl font-bold mb-5">Rounded</h1>
+  <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
+    <div
+      v-for="(rounded, name) in defaultTheme.borderRadius"
+      :key="name"
+      :style="{borderRadius: rounded}"
+      class="p-6 border-2 text-center bg-white"
+    >
+      <div class="font-semibold mb-3">
+        {{ name === 'DEFAULT' ? 'rounded' : `rounded-${name}` }}
+      </div>
+      <code>{{ rounded }}</code>
+    </div>
+  </div>
+</template>

stories/foundation/typography/Typography.stories.ts

@@ -0,0 +1,11 @@
+import {Meta, Story} from '@storybook/vue3';
+import TypographyComponent from './Typography.vue';
+
+export default {
+  title: 'Foundation/Typography',
+} as Meta;
+
+export const Typography: Story = () => ({
+  components: {TypographyComponent},
+  template: `<TypographyComponent />`,
+});

stories/foundation/typography/Typography.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import defaultTheme from 'tailwindcss/defaultTheme';
+</script>
+
+<template>
+  <h1 class="text-3xl font-bold mb-5">Typography</h1>
+  <div class="space-y-5 divide-y">
+    <div v-for="(size, name) in defaultTheme.fontSize" :key="name" class="pt-4">
+      <div>
+        <div class="font-semibold text-lg">{{ `text-${name}` }}</div>
+
+        <ul class="font-mono text-xs mt-1">
+          <li>Font size: {{ size[0] }}</li>
+          <li>Line height: {{ size[1] }}</li>
+        </ul>
+      </div>
+      <p
+        class="border-2 rounded-xl p-4 mt-4"
+        :style="{fontSize: size[0], lineHeight: size[1]}"
+      >
+        Lorem ipsum dolor sit amet consectetur, adipisicing elit
+      </p>
+    </div>
+  </div>
+</template>