From c6190c44bd6e3eb58d5aeb4a5a6599be566e759c Mon Sep 17 00:00:00 2001 From: developomp Date: Tue, 13 Dec 2022 17:48:17 +0900 Subject: [PATCH] add style.developomp.com --- .firebaserc | 3 + .vscode/extensions.json | 4 +- .vscode/settings.json | 4 + README.md | 4 +- apps/docs/package.json | 30 ------ apps/{docs => style}/.eslintrc.js | 0 apps/{docs => style}/.storybook/main.js | 0 apps/style/package.json | 31 ++++++ .../stories/button.stories.mdx | 0 apps/style/stories/docs/1.Intro.stories.mdx | 25 +++++ apps/style/stories/docs/2.Colors.stories.mdx | 58 +++++++++++ apps/style/stories/docs/3.Font.stories.mdx | 5 + firebase.json | 12 +++ packages/tailwind-config/tailwind.config.js | 11 --- packages/theme/dark/codeblock.css | 96 +++++++++++++++++++ packages/theme/dark/index.ts | 62 ++++++++++++ packages/theme/light/codeblock.css | 79 +++++++++++++++ packages/theme/light/index.ts | 5 + packages/theme/package.json | 5 +- packages/theme/types/index.d.ts | 60 ++++++++++++ pnpm-lock.yaml | 34 ++++--- 21 files changed, 472 insertions(+), 56 deletions(-) delete mode 100644 apps/docs/package.json rename apps/{docs => style}/.eslintrc.js (100%) rename apps/{docs => style}/.storybook/main.js (100%) create mode 100644 apps/style/package.json rename apps/{docs => style}/stories/button.stories.mdx (100%) create mode 100644 apps/style/stories/docs/1.Intro.stories.mdx create mode 100644 apps/style/stories/docs/2.Colors.stories.mdx create mode 100644 apps/style/stories/docs/3.Font.stories.mdx create mode 100644 packages/theme/dark/codeblock.css create mode 100644 packages/theme/dark/index.ts create mode 100644 packages/theme/light/codeblock.css create mode 100644 packages/theme/light/index.ts create mode 100644 packages/theme/types/index.d.ts diff --git a/.firebaserc b/.firebaserc index 2df378e..3b8c33b 100644 --- a/.firebaserc +++ b/.firebaserc @@ -10,6 +10,9 @@ ], "blog": [ "developomp-site-blog" + ], + "style": [ + "developomp-site-style" ] } } diff --git a/.vscode/extensions.json b/.vscode/extensions.json index ccbbc94..705799d 100644 --- a/.vscode/extensions.json +++ b/.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" ] } diff --git a/.vscode/settings.json b/.vscode/settings.json index 46e3f67..e3bd12b 100644 --- a/.vscode/settings.json +++ b/.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", diff --git a/README.md b/README.md index 915d21f..33f31f7 100644 --- a/README.md +++ b/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 diff --git a/apps/docs/package.json b/apps/docs/package.json deleted file mode 100644 index 0255ebd..0000000 --- a/apps/docs/package.json +++ /dev/null @@ -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" - } -} diff --git a/apps/docs/.eslintrc.js b/apps/style/.eslintrc.js similarity index 100% rename from apps/docs/.eslintrc.js rename to apps/style/.eslintrc.js diff --git a/apps/docs/.storybook/main.js b/apps/style/.storybook/main.js similarity index 100% rename from apps/docs/.storybook/main.js rename to apps/style/.storybook/main.js diff --git a/apps/style/package.json b/apps/style/package.json new file mode 100644 index 0000000..85d07aa --- /dev/null +++ b/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" + } +} diff --git a/apps/docs/stories/button.stories.mdx b/apps/style/stories/button.stories.mdx similarity index 100% rename from apps/docs/stories/button.stories.mdx rename to apps/style/stories/button.stories.mdx diff --git a/apps/style/stories/docs/1.Intro.stories.mdx b/apps/style/stories/docs/1.Intro.stories.mdx new file mode 100644 index 0000000..ad639e9 --- /dev/null +++ b/apps/style/stories/docs/1.Intro.stories.mdx @@ -0,0 +1,25 @@ +import { Meta } from "@storybook/addon-docs" + + + +# 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) diff --git a/apps/style/stories/docs/2.Colors.stories.mdx b/apps/style/stories/docs/2.Colors.stories.mdx new file mode 100644 index 0000000..319f30b --- /dev/null +++ b/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" + + + +# Colors + +## Layers + +``` +┌────────────────────┐ +│ Header │ +╞════════════════════╡ +│ │ +│ ┌────────────────┐ │ header ━━━ +│ │ │ │ interactives ━━ ━ +│ │ [Interactives] │ │ ---> contents ━ ━━━ ━━ +│ │ │ │ ---> cards ━━━━━━━━━━━━━━━━━ +│ │ │ │ footer ━━━━ +│ │ Contents │ │ background ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ +│ │ │ │ +│ └────────────────┘ │ +│ │ +├────────────────────┤ +│ Footer │ +└────────────────────┘ +``` + +## Dark Theme + + + + + + + +## Light Theme diff --git a/apps/style/stories/docs/3.Font.stories.mdx b/apps/style/stories/docs/3.Font.stories.mdx new file mode 100644 index 0000000..d013c70 --- /dev/null +++ b/apps/style/stories/docs/3.Font.stories.mdx @@ -0,0 +1,5 @@ +import { Meta, ColorPalette, ColorItem } from "@storybook/addon-docs" + + + +# Fonts diff --git a/firebase.json b/firebase.json index a8331f3..d912ba6 100644 --- a/firebase.json +++ b/firebase.json @@ -23,6 +23,18 @@ } ], "ignore": ["**/.*"] + }, + { + "target": "style", + "cleanUrls": true, + "public": "apps/style/storybook-static", + "rewrites": [ + { + "source": "**", + "destination": "/index.html" + } + ], + "ignore": ["**/.*"] } ] } diff --git a/packages/tailwind-config/tailwind.config.js b/packages/tailwind-config/tailwind.config.js index a9e1c6b..33f6413 100644 --- a/packages/tailwind-config/tailwind.config.js +++ b/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: [], } diff --git a/packages/theme/dark/codeblock.css b/packages/theme/dark/codeblock.css new file mode 100644 index 0000000..578015d --- /dev/null +++ b/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; +} diff --git a/packages/theme/dark/index.ts b/packages/theme/dark/index.ts new file mode 100644 index 0000000..a12d778 --- /dev/null +++ b/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 diff --git a/packages/theme/light/codeblock.css b/packages/theme/light/codeblock.css new file mode 100644 index 0000000..8144467 --- /dev/null +++ b/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; +} diff --git a/packages/theme/light/index.ts b/packages/theme/light/index.ts new file mode 100644 index 0000000..a2ffcc7 --- /dev/null +++ b/packages/theme/light/index.ts @@ -0,0 +1,5 @@ +import BaseTheme from "../dark" + +const theme: Theme = { ...BaseTheme } + +export default theme diff --git a/packages/theme/package.json b/packages/theme/package.json index d06d1e1..92706dd 100644 --- a/packages/theme/package.json +++ b/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" + } } diff --git a/packages/theme/types/index.d.ts b/packages/theme/types/index.d.ts new file mode 100644 index 0000000..e285e70 --- /dev/null +++ b/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 + } + } + } + } +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7d63bee..9bce212 100644 --- a/pnpm-lock.yaml +++ b/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/eslint-config': workspace:0.0.0 - '@developomp-site/tsconfig': workspace:0.0.0 + '@developomp-site/components-react': workspace:* + '@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 @@ -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