add style.developomp.com

apps/docs/package.json

@@ -1,30 +0,0 @@
-{
-  "name": "@developomp-site/docs",
-  "version": "0.0.0",
-  "private": true,
-  "scripts": {
-    "dev": "start-storybook -p 6006",
-    "build": "build-storybook --docs",
-    "preview-storybook": "serve storybook-static",
-    "clean": "rm -rf .turbo && rm -rf node_modules"
-  },
-  "dependencies": {
-    "@developomp-site/components-react": "workspace:0.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
-  "devDependencies": {
-	"@developomp-site/eslint-config": "workspace:0.0.0",
-    "@developomp-site/tsconfig": "workspace:0.0.0",
-    "@storybook/addon-actions": "^6.5.14",
-    "@storybook/addon-docs": "^6.5.14",
-    "@storybook/addon-essentials": "^6.5.14",
-    "@storybook/addon-links": "^6.5.14",
-    "@storybook/builder-vite": "^0.1.41",
-    "@storybook/react": "^6.5.14",
-    "@vitejs/plugin-react": "^1.3.2",
-    "serve": "^13.0.4",
-    "typescript": "^4.9.3",
-    "vite": "^2.9.15"
-  }
-}

apps/style/package.json

@@ -0,0 +1,31 @@
+{
+	"name": "@developomp-site/style",
+	"version": "0.0.0",
+	"private": true,
+	"scripts": {
+		"dev": "start-storybook -p 6006",
+		"build": "build-storybook --docs",
+		"preview-storybook": "serve storybook-static",
+		"clean": "rm -rf .turbo && rm -rf node_modules"
+	},
+	"dependencies": {
+		"@developomp-site/components-react": "workspace:*",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0"
+	},
+	"devDependencies": {
+		"@developomp-site/eslint-config": "workspace:*",
+		"@developomp-site/tsconfig": "workspace:*",
+		"@developomp-site/utils": "workspace:*",
+		"@storybook/addon-actions": "^6.5.14",
+		"@storybook/addon-docs": "^6.5.14",
+		"@storybook/addon-essentials": "^6.5.14",
+		"@storybook/addon-links": "^6.5.14",
+		"@storybook/builder-vite": "^0.1.41",
+		"@storybook/react": "^6.5.14",
+		"@vitejs/plugin-react": "^1.3.2",
+		"serve": "^13.0.4",
+		"typescript": "^4.9.4",
+		"vite": "^2.9.15"
+	}
+}

apps/style/stories/docs/1.Intro.stories.mdx

@@ -0,0 +1,25 @@
+import { Meta } from "@storybook/addon-docs"
+
+<Meta title="Introduction" />
+
+# Introduction
+
+Hello! Welcome to developomp's design system!
+
+## What is this?
+
+This is a [Storybook](https://storybook.js.org) of style guidelines and
+reference component implementations made in [ReactJS](https://reactjs.org) made
+primarily for websites under the [developomp.com](https://developomp.com)
+domain.
+
+## What is "developomp style"?
+
+The developomp style is the "theme" used in my design system, and is a set of
+visual elements such as colors, font styles, and spacing. These elements are
+then combined appropriately to create a coherent look across my websites.
+
+## Source Code
+
+You can find all the source code on
+[GitHub](https://github.com/developomp/developomp-site)

apps/style/stories/docs/2.Colors.stories.mdx

@@ -0,0 +1,58 @@
+import { Meta, ColorPalette, ColorItem } from "@storybook/addon-docs"
+import darkTheme from "@developomp-site/theme/dark"
+
+<Meta title="Colors" />
+
+# Colors
+
+## Layers
+
+```
+┌────────────────────┐
+│       Header       │
+╞════════════════════╡
+│                    │
+│ ┌────────────────┐ │                    header  ━━━
+│ │                │ │              interactives           ━━     ━
+│ │ [Interactives] │ │     --->         contents         ━    ━━━   ━━
+│ │                │ │     --->            cards       ━━━━━━━━━━━━━━━━━
+│ │                │ │                    footer                          ━━━━
+│ │    Contents    │ │                background  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+│ │                │ │
+│ └────────────────┘ │
+│                    │
+├────────────────────┤
+│       Footer       │
+└────────────────────┘
+```
+
+## Dark Theme
+
+<ColorPalette>
+	<ColorItem
+		title="Header"
+		colors={{
+			"background (custom)": darkTheme.component.header.color.background,
+			"hover (zinc-700)": darkTheme.component.header.color.hover,
+			"text (zinc-300)": darkTheme.component.header.color.text,
+		}}
+	/>
+	<ColorItem
+		title="Scroll Progress Bar"
+		colors={{
+			"background (zinc-600)":
+				darkTheme.component.scrollProgressBar.color.background,
+			"foreground (zinc-300)":
+				darkTheme.component.scrollProgressBar.color.foreground,
+		}}
+	/>
+	<ColorItem
+		title="Links"
+		colors={{
+			"default (blue-400)": "#60a5fa",
+			"hover (blue-500)": "#3b82f6",
+		}}
+	/>
+</ColorPalette>
+
+## Light Theme

apps/style/stories/docs/3.Font.stories.mdx

@@ -0,0 +1,5 @@
+import { Meta, ColorPalette, ColorItem } from "@storybook/addon-docs"
+
+<Meta title="Fonts" />
+
+# Fonts