pomp/pompy.dev
1
0
Fork 0
Code Issues 8 Pull requests Activity Actions

add style.developomp.com

Browse source
This commit is contained in:
Kim, Jimin 2022-12-13 17:48:17 +09:00
parent f65084375e
commit c6190c44bd
21 changed files with 472 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

3
.firebaserc
View file

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

4
.vscode/extensions.json vendored
View file

@ -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"
]
}

4
.vscode/settings.json vendored
View file

@ -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",

4
README.md
View file

@ -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

30
apps/docs/package.json
View file

@ -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"
}
}

0
apps/docs/.eslintrc.js → apps/style/.eslintrc.js
View file

0
apps/docs/.storybook/main.js → apps/style/.storybook/main.js
View file

31
apps/style/package.json Normal file
View file

@ -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"
}
}

0
apps/docs/stories/button.stories.mdx → apps/style/stories/button.stories.mdx
View file

25
apps/style/stories/docs/1.Intro.stories.mdx Normal file
View file

@ -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)

58
apps/style/stories/docs/2.Colors.stories.mdx Normal file
View file

@ -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

5
apps/style/stories/docs/3.Font.stories.mdx Normal file
View file

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

12
firebase.json
View file

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

11
packages/tailwind-config/tailwind.config.js
View file

@ -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: [],
}

96
packages/theme/dark/codeblock.css Normal file
View file

@ -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;
}

62
packages/theme/dark/index.ts Normal file
View file

@ -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

79
packages/theme/light/codeblock.css Normal file
View file

@ -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;
}

5
packages/theme/light/index.ts Normal file
View file

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

5
packages/theme/package.json
View file

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

60
packages/theme/types/index.d.ts vendored Normal file
View file

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

34
pnpm-lock.yaml generated
View file

@ -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