add style.developomp.com

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
+				}
+			}
+		}
+	}
+}