add style.developomp.com

.firebaserc

@@ -10,6 +10,9 @@
         ],
         "blog": [
           "developomp-site-blog"
+        ],
+        "style": [
+          "developomp-site-style"
         ]
       }
     }

.vscode/extensions.json

@@ -5,6 +5,8 @@
 		"naumovs.color-highlight",
 		"streetsidesoftware.code-spell-checker",
 		"aaron-bond.better-comments",
-		"styled-components.vscode-styled-components"
+		"styled-components.vscode-styled-components",
+		"bradlc.vscode-tailwindcss",
+		"unifiedjs.vscode-mdx"
 	]
 }

.vscode/settings.json

@@ -37,6 +37,10 @@
 	"[svg]": {
 		"editor.defaultFormatter": "jock.svg"
 	},
+	// prevent tailwind-related warnings
+	"css.lint.unknownAtRules": "ignore",
+	"less.lint.unknownAtRules": "ignore",
+	"scss.lint.unknownAtRules": "ignore",
 	// for .ejs files
 	"html.validate.styles": false,
 	"color-highlight.markerType": "outline",

README.md

@@ -21,7 +21,9 @@ A monorepo ([Turborepo](https://turbo.build)) of my websites for blogging, portf
 ## Project Structure
 
 - `aps`
-  - `apps/docs` - [Storybook](https://storybook.js.org) documentation of React components
+  - `main` - https://developomp.com
+  - `blog` - https://blog.developomp.com
+  - `style` - https://style.developomp.com
 - `packages` - packages prefixed with `@developomp-site/`
   - `components-react` - ReactJS components
   - `eslint-config` - ESLint configuration files

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

firebase.json

@@ -23,6 +23,18 @@
 				}
 			],
 			"ignore": ["**/.*"]
+		},
+		{
+			"target": "style",
+			"cleanUrls": true,
+			"public": "apps/style/storybook-static",
+			"rewrites": [
+				{
+					"source": "**",
+					"destination": "/index.html"
+				}
+			],
+			"ignore": ["**/.*"]
 		}
 	]
 }

packages/tailwind-config/tailwind.config.js

@@ -1,5 +1,3 @@
-const colors = require("tailwindcss/colors")
-
 module.exports = {
 	content: [
 		// app content
@@ -7,13 +5,4 @@ module.exports = {
 		// include packages if not transpiling
 		// "../../packages/**/*.{js,ts,jsx,tsx}",
 	],
-	theme: {
-		extend: {
-			colors: {
-				brandblue: colors.blue[500],
-				brandred: colors.red[500],
-			},
-		},
-	},
-	plugins: [],
 }

packages/theme/dark/codeblock.css

@@ -0,0 +1,96 @@
+/* from highlight.js/styles/atom-one-dark-reasonable.css */
+
+pre code.hljs {
+	display: block;
+	overflow-x: auto;
+	padding: 1em;
+}
+code.hljs {
+	padding: 3px 5px;
+}
+.hljs {
+	color: #abb2bf;
+	background: #282c34;
+}
+.hljs-keyword,
+.hljs-operator,
+.hljs-pattern-match {
+	color: #f92672;
+}
+.hljs-function,
+.hljs-pattern-match .hljs-constructor {
+	color: #61aeee;
+}
+.hljs-function .hljs-params {
+	color: #a6e22e;
+}
+.hljs-function .hljs-params .hljs-typing {
+	color: #fd971f;
+}
+.hljs-module-access .hljs-module {
+	color: #7e57c2;
+}
+.hljs-constructor {
+	color: #e2b93d;
+}
+.hljs-constructor .hljs-string {
+	color: #9ccc65;
+}
+.hljs-comment,
+.hljs-quote {
+	color: #b18eb1;
+	font-style: italic;
+}
+.hljs-doctag,
+.hljs-formula {
+	color: #c678dd;
+}
+.hljs-deletion,
+.hljs-name,
+.hljs-section,
+.hljs-selector-tag,
+.hljs-subst {
+	color: #e06c75;
+}
+.hljs-literal {
+	color: #56b6c2;
+}
+.hljs-addition,
+.hljs-attribute,
+.hljs-meta .hljs-string,
+.hljs-regexp,
+.hljs-string {
+	color: #98c379;
+}
+.hljs-built_in,
+.hljs-class .hljs-title,
+.hljs-title.class_ {
+	color: #e6c07b;
+}
+.hljs-attr,
+.hljs-number,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-pseudo,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable {
+	color: #d19a66;
+}
+.hljs-bullet,
+.hljs-link,
+.hljs-meta,
+.hljs-selector-id,
+.hljs-symbol,
+.hljs-title {
+	color: #61aeee;
+}
+.hljs-emphasis {
+	font-style: italic;
+}
+.hljs-strong {
+	font-weight: 700;
+}
+.hljs-link {
+	text-decoration: underline;
+}

packages/theme/dark/index.ts

@@ -0,0 +1,62 @@
+const theme: Theme = {
+	font: {
+		sansSerif: "'Noto Sans KR', sans-serif", // https://fonts.google.com/noto/specimen/Noto+Sans+KR
+		monospace: "'Source Code Pro', monospace",
+	},
+
+	maxDisplayWidth: {
+		mobile: "1024px", // max-w-screen-lg
+		desktop: "1536px", // max-w-screen-2xl
+	},
+
+	component: {
+		scrollbar: {
+			width: "8px", // w-2
+			borderRadius: "4px", // rounded
+		},
+
+		header: {
+			color: {
+				background: "#202225", // custom
+				hover: "#3f3f46", // zinc-700
+				text: "#d4d4d8", // zinc-300
+			},
+			height: "16px", // h-4
+		},
+
+		scrollProgressBar: {
+			color: {
+				background: "#52525b", // zinc 600
+				foreground: "#d4d4d8", // zinc-300
+			},
+		},
+
+		card: {
+			color: {
+				background: "#2f3136",
+			},
+		},
+
+		footer: {
+			color: {
+				background: "",
+				text: "",
+			},
+		},
+
+		ui: {
+			color: {
+				background: {
+					interactive: "",
+				},
+				text: {
+					on1: "",
+					link: "#66AAFF",
+					linkActive: "#4592F7",
+				},
+			},
+		},
+	},
+}
+
+export default theme

packages/theme/light/codeblock.css

@@ -0,0 +1,79 @@
+/* from highlight.js/styles/default.css */
+
+pre code.hljs {
+	display: block;
+	overflow-x: auto;
+	padding: 1em;
+}
+code.hljs {
+	padding: 3px 5px;
+}
+.hljs {
+	background: #f0f0f0;
+	color: #444;
+}
+.hljs-comment {
+	color: #888;
+}
+.hljs-punctuation,
+.hljs-tag {
+	color: #444a;
+}
+.hljs-tag .hljs-attr,
+.hljs-tag .hljs-name {
+	color: #444;
+}
+.hljs-attribute,
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-name,
+.hljs-selector-tag {
+	font-weight: 700;
+}
+.hljs-deletion,
+.hljs-number,
+.hljs-quote,
+.hljs-selector-class,
+.hljs-selector-id,
+.hljs-string,
+.hljs-template-tag,
+.hljs-type {
+	color: #800;
+}
+.hljs-section,
+.hljs-title {
+	color: #800;
+	font-weight: 700;
+}
+.hljs-link,
+.hljs-operator,
+.hljs-regexp,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-symbol,
+.hljs-template-variable,
+.hljs-variable {
+	color: #bc6060;
+}
+.hljs-literal {
+	color: #78a960;
+}
+.hljs-addition,
+.hljs-built_in,
+.hljs-bullet,
+.hljs-code {
+	color: #397300;
+}
+.hljs-meta {
+	color: #1f7199;
+}
+.hljs-meta .hljs-string {
+	color: #4d99bf;
+}
+.hljs-emphasis {
+	font-style: italic;
+}
+.hljs-strong {
+	font-weight: 700;
+}

packages/theme/light/index.ts

@@ -0,0 +1,5 @@
+import BaseTheme from "../dark"
+
+const theme: Theme = { ...BaseTheme }
+
+export default theme

packages/theme/package.json

@@ -2,5 +2,8 @@
 	"name": "@developomp-site/theme",
 	"version": "0.0.0",
 	"private": true,
-	"license": "MIT"
+	"license": "MIT",
+	"devDependencies": {
+		"tailwindcss": "^3.1.4"
+	}
 }

packages/theme/types/index.d.ts

@@ -0,0 +1,60 @@
+interface Theme extends Object {
+	font: {
+		sansSerif: string
+		monospace: string
+	}
+
+	maxDisplayWidth: {
+		mobile: string
+		desktop: string
+	}
+
+	component: {
+		scrollbar: {
+			width: string
+			borderRadius: string
+		}
+
+		header: {
+			color: {
+				background: string
+				hover: string
+				text: string
+			}
+			height: string
+		}
+
+		scrollProgressBar: {
+			color: {
+				background: string
+				foreground: string
+			}
+		}
+
+		card: {
+			color: {
+				background: string
+			}
+		}
+
+		footer: {
+			color: {
+				background: string
+				text: string
+			}
+		}
+
+		ui: {
+			color: {
+				background: {
+					interactive: string
+				}
+				text: {
+					on1: string
+					link: string
+					linkActive: string
+				}
+			}
+		}
+	}
+}

pnpm-lock.yaml

@@ -145,11 +145,12 @@ importers:
       tslint-config-prettier: 1.18.0
       typescript: 4.9.4
 
-  apps/docs:
+  apps/style:
     specifiers:
-      '@developomp-site/components-react': workspace:0.0.0
+      '@developomp-site/components-react': workspace:*
-      '@developomp-site/eslint-config': workspace:0.0.0
+      '@developomp-site/eslint-config': workspace:*
-      '@developomp-site/tsconfig': workspace:0.0.0
+      '@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
@@ -160,7 +161,7 @@ importers:
       react: ^18.2.0
       react-dom: ^18.2.0
       serve: ^13.0.4
-      typescript: ^4.9.3
+      typescript: ^4.9.4
       vite: ^2.9.15
     dependencies:
       '@developomp-site/components-react': link:../../packages/components-react
@@ -169,6 +170,7 @@ importers:
     devDependencies:
       '@developomp-site/eslint-config': link:../../packages/eslint-config
       '@developomp-site/tsconfig': link:../../packages/tsconfig
+      '@developomp-site/utils': link:../../packages/utils
       '@storybook/addon-actions': 6.5.14_biqbaboplfbrettd7655fr4n2y
       '@storybook/addon-docs': 6.5.14_7adf6yzbznbojko3g4wsr6ebli
       '@storybook/addon-essentials': 6.5.14_7adf6yzbznbojko3g4wsr6ebli
@@ -228,6 +230,14 @@ importers:
     devDependencies:
       tailwindcss: 3.2.4_postcss@8.4.19
 
+  packages/theme:
+    specifiers:
+      '@developomp-site/tailwind-config': workspace:*
+      tailwindcss: ^3.1.4
+    devDependencies:
+      '@developomp-site/tailwind-config': link:../tailwind-config
+      tailwindcss: 3.2.4_postcss@8.4.19
+
   packages/tsconfig:
     specifiers: {}
 
@@ -742,7 +752,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.12.9
-      '@babel/helper-plugin-utils': 7.10.4
+      '@babel/helper-plugin-utils': 7.20.2
       '@babel/plugin-syntax-object-rest-spread': 7.8.3_@babel+core@7.12.9
       '@babel/plugin-transform-parameters': 7.20.5_@babel+core@7.12.9
     dev: true
@@ -4213,7 +4223,7 @@ packages:
     resolution: {integrity: sha512-9K4zoImiZc3HlIp6AVUDE4CWYx22a+lhSZMYNpbjW04+YF0KWj4pJXnEMjdnFTiQibFFmElcsasJXDbdI/EPhA==}
     dependencies:
       '@types/eslint': 8.4.10
-      '@types/estree': 0.0.51
+      '@types/estree': 1.0.0
 
   /@types/eslint/8.4.10:
     resolution: {integrity: sha512-Sl/HOqN8NKPmhWo2VBEPm0nvHnu2LL3v9vKo8MEq0EtbJ4eVzGPl41VNPvn5E1i5poMk4/XD8UriLHpJvEP/Nw==}
@@ -4259,7 +4269,7 @@ packages:
     resolution: {integrity: sha512-l6NQsDDyQUVeoTynNpC9uRvCUint/gSUXQA2euwmTuWGvPY5LSDUu6tkCtJB2SvGQlJQzLaKqcGZP4//7EDveA==}
     dependencies:
       '@types/minimatch': 5.1.2
-      '@types/node': 16.18.6
+      '@types/node': 18.11.11
     dev: true
 
   /@types/graceful-fs/4.1.5:
@@ -4373,7 +4383,7 @@ packages:
   /@types/node-fetch/2.6.2:
     resolution: {integrity: sha512-DHqhlq5jeESLy19TYhLakJ07kNumXWjcDdxXsLUMJZ6ue8VZJj4kLPQVE/2mdHh3xZziNF1xppu5lwmS53HR+A==}
     dependencies:
-      '@types/node': 16.18.6
+      '@types/node': 18.11.11
       form-data: 3.0.1
     dev: true
 
@@ -4561,7 +4571,7 @@ packages:
   /@types/webpack-sources/3.2.0:
     resolution: {integrity: sha512-Ft7YH3lEVRQ6ls8k4Ff1oB4jN6oy/XmU6tQISKdhfh+1mR+viZFphS6WL0IrtDOzvefmJg5a0s7ZQoRXwqTEFg==}
     dependencies:
-      '@types/node': 16.18.6
+      '@types/node': 18.11.11
       '@types/source-list-map': 0.1.2
       source-map: 0.7.4
     dev: true
@@ -4569,7 +4579,7 @@ packages:
   /@types/webpack/4.41.33:
     resolution: {integrity: sha512-PPajH64Ft2vWevkerISMtnZ8rTs4YmRbs+23c402J0INmxDKCrhZNvwZYtzx96gY2wAtXdrK1BS2fiC8MlLr3g==}
     dependencies:
-      '@types/node': 16.18.6
+      '@types/node': 18.11.11
       '@types/tapable': 1.0.8
       '@types/uglify-js': 3.17.1
       '@types/webpack-sources': 3.2.0
@@ -8448,7 +8458,7 @@ packages:
       eslint-scope: 7.1.1
       eslint-utils: 3.0.0_eslint@8.4.1
       eslint-visitor-keys: 3.3.0
-      espree: 9.2.0
+      espree: 9.4.1
       esquery: 1.4.0
       esutils: 2.0.3
       fast-deep-equal: 3.1.3