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

refactor: tidy up tailwind configs

Browse source 
- add tailwind to all apps
- share tailwind themes and stuff
This commit is contained in:
Kim, Jimin 2023-07-02 10:56:12 +09:00
parent cc507ad257
commit 002fb4bea7
10 changed files with 173 additions and 142 deletions
Download patch file Download diff file Expand all files Collapse all files

3
apps/main/package.json
View file

@ -15,6 +15,7 @@
},
"devDependencies": {
"@developomp-site/theme": "workspace:*",
"@developomp-site/tailwind-config": "workspace:*",
"@emotion/css": "^11.11.2",
"@fontsource/noto-sans-kr": "^5.0.3",
"@inqling/svelte-icons": "^3.3.2",
@ -28,11 +29,13 @@
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-simple-import-sort": "^10.0.0",
"eslint-plugin-svelte": "^2.32.2",
"postcss": "^8.4.24",
"prettier": "^2.8.8",
"prettier-plugin-svelte": "^2.10.1",
"sass": "^1.63.6",
"svelte": "^4.0.1",
"svelte-check": "^3.4.4",
"tailwindcss": "^3.3.2",
"tslib": "^2.6.0",
"typescript": "^5.1.6",
"vite": "^4.3.9"

6
apps/main/postcss.config.js Normal file
View file

@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

4
apps/main/src/app.css
View file

@ -1,6 +1,10 @@
@import "@fontsource/noto-sans-kr/400.css";
@import "@fontsource/noto-sans-kr/700.css";
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
/* SvelteKit has 8px margin by default for some reason */
margin: 0;

5
apps/main/tailwind.config.js Normal file
View file

@ -0,0 +1,5 @@
/** @type {import('tailwindcss').Config} */
export default {
presets: [require("@developomp-site/tailwind-config/tailwind.config.js")],
content: ["./src/**/*.{html,js,svelte,ts}"],
}

1
apps/portfolio/.eslintrc
View file

@ -2,6 +2,7 @@
"root": true,
"env": {
"browser": true,
"node": true,
"es2020": true
},
"parserOptions": {

1
apps/portfolio/package.json
View file

@ -23,6 +23,7 @@
},
"devDependencies": {
"@developomp-site/blog-content": "workspace:*",
"@developomp-site/tailwind-config": "workspace:*",
"@linaria/babel-preset": "^4.4.5",
"@linaria/vite": "^4.2.11",
"@types/react": "^18.2.14",

130
apps/portfolio/tailwind.config.js
View file

@ -1,134 +1,6 @@
/** @type {import('tailwindcss').Config} */
export default {
presets: [require("@developomp-site/tailwind-config/tailwind.config")],
darkMode: "class",
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
colors: {
// UI
/***/ "dark-ui": "#202225",
/**/ "light-ui": "#FFFFFF",
/***/ "dark-ui-hover": "#3F3F46",
/**/ "light-ui-hover": "#EEEEEE",
/***/ "dark-ui-bg": "#36393F",
/**/ "light-ui-bg": "#F7F7F7",
/***/ "dark-ui-border": "#555",
/**/ "light-ui-border": "#CCC",
// text
/***/ "dark-text-default": "#EEEEEE",
/**/ "light-text-default": "#111111",
/***/ "dark-text-high-contrast": "#FFFFFF",
/**/ "light-text-high-contrast": "#000000",
/***/ "dark-text-gray": "#CCC",
/**/ "light-text-gray": "#555",
// anchor
/*********/ anchor: "#66AAFF",
/********/ "anchor-accent": "#4592F7",
/***/ "dark-anchor-header": "#778899",
/**/ "light-anchor-header": "#D3D3D3",
// card
/***/ "dark-card-bg": "#2F3136",
/**/ "light-card-bg": "#FFFFFF",
/***/ "dark-card-glow": "#FFFFFF33",
/**/ "light-card-glow": "#00000040",
// blockquote
/***/ "dark-blockquote-bg": "#FFFFFF12",
/**/ "light-blockquote-bg": "#0000000D",
/***/ "dark-blockquote-accent": "#FFFFFF4D",
/**/ "light-blockquote-accent": "#0000001A",
// inline code
/***/ "dark-inline-code-bg": "#444",
/**/ "light-inline-code-bg": "#EEE",
/***/ "dark-inline-code-text": "#FFFFFF",
/**/ "light-inline-code-text": "#000000",
/***/ "dark-inline-code-border": "#666",
/**/ "light-inline-code-border": "#BBB",
// block code
// light theme using: highlight.js/styles/default.css
// dark theme using: highlight.js/styles/atom-one-dark-reasonable.css
/***/ "dark-block-code-border": "#555",
/**/ "light-block-code-border": "#BBB",
/***/ "dark-block-code-highlight": "#14161A",
/**/ "light-block-code-highlight": "#DDDDDD",
// footer
/***/ "dark-footer-bg": "#000000",
/**/ "light-footer-bg": "#FFFFFF",
/***/ "dark-footer-text": "#808080",
/* */ "light-footer-text": "#808080",
// header
/***/ "dark-header-bg": "#202225",
/**/ "light-header-bg": "",
/***/ "dark-header-hover": "#3F3F46",
/**/ "light-header-hover": "",
/***/ "dark-header-text": "#D4D4D8",
/**/ "light-header-text": "",
// input
/***/ "dark-input-bg": "#36393F",
/**/ "light-input-bg": "#EEEEEE",
/***/ "dark-input-item-hover": "#202225",
/**/ "light-input-item-hover": "#FFFFFF",
/***/ "dark-input-border": "#555555",
/**/ "light-input-border": "#CCCCCC",
/***/ "dark-input-border-hover": "#808080",
/**/ "light-input-border-hover": "#808080",
/***/ "dark-input-border-focus": "#A3A3A3",
/**/ "light-input-border-focus": "#000000",
/***/ "dark-input-placeholder": "#A9A9A9",
/**/ "light-input-placeholder": "#777777",
// kbd
/***/ "dark-kbd-bg": "#000000",
/**/ "light-kbd-bg": "#F7F7F7",
/***/ "dark-kbd-text": "#FFFFFF",
/**/ "light-kbd-text": "#333333",
/***/ "dark-kbd-border": "#555555",
/**/ "light-kbd-border": "#CCCCCC",
/***/ "dark-kbd-outer-shadow": "#FFFFFF4D",
/**/ "light-kbd-outer-shadow": "#00000033",
/***/ "dark-kbd-inner-shadow": "#000000",
/**/ "light-kbd-inner-shadow": "#FFFFFF",
// mark
/***/ "dark-mark-bg": "#FFFF0080",
/**/ "light-mark-bg": "#FFFF00BF",
/***/ "dark-mark-text": "#FFFFFF",
/**/ "light-mark-text": "#000000",
// scrollbar
/***/ "dark-scrollbar-track": "#18181B",
/**/ "light-scrollbar-track": "#FFFFFF",
/***/ "dark-scrollbar-thumb": "#888888",
/**/ "light-scrollbar-thumb": "#DDDDDD",
// scroll progress
/***/ "dark-scroll-progress-bg": "#52525B",
/**/ "light-scroll-progress-bg": "#D4D4D8",
/***/ "dark-scroll-progress-fg": "#D4D4D8",
/**/ "light-scroll-progress-fg": "#52525B",
// table
/***/ "dark-table-border": "#777777",
/**/ "light-table-border": "#DDD",
/***/ "dark-table-alt": "#21272E",
/**/ "light-table-alt": "#F2F2F2",
},
fontFamily: {
"noto-sans": ['"Noto Sans KR"', "sans-serif"],
"source-code-pro": ['"Source Code Pro"', "monospace"],
},
boxShadow: {
glow: "0 0px 10px",
},
},
},
plugins: [],
}

5
packages/tailwind-config/package.json
View file

@ -2,7 +2,10 @@
"name": "@developomp-site/tailwind-config",
"version": "0.0.0",
"private": true,
"main": "index.js",
"main": "tailwind.config.js",
"files": [
"tailwind.config.js"
],
"scripts": {
"clean": "rm -rf node_modules"
},

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

@ -1,8 +1,132 @@
module.exports = {
content: [
// app content
`src/**/*.{js,ts,jsx,tsx}`,
// include packages if not transpiling
// "../../packages/**/*.{js,ts,jsx,tsx}",
],
/** @type {import('tailwindcss').Config} */
export default {
darkMode: "class",
theme: {
extend: {
colors: {
// UI
/***/ "dark-ui": "#202225",
/**/ "light-ui": "#FFFFFF",
/***/ "dark-ui-hover": "#3F3F46",
/**/ "light-ui-hover": "#EEEEEE",
/***/ "dark-ui-bg": "#36393F",
/**/ "light-ui-bg": "#F7F7F7",
/***/ "dark-ui-border": "#555",
/**/ "light-ui-border": "#CCC",
// text
/***/ "dark-text-default": "#EEEEEE",
/**/ "light-text-default": "#111111",
/***/ "dark-text-high-contrast": "#FFFFFF",
/**/ "light-text-high-contrast": "#000000",
/***/ "dark-text-gray": "#CCC",
/**/ "light-text-gray": "#555",
// anchor
/*********/ anchor: "#66AAFF",
/********/ "anchor-accent": "#4592F7",
/***/ "dark-anchor-header": "#778899",
/**/ "light-anchor-header": "#D3D3D3",
// card
/***/ "dark-card-bg": "#2F3136",
/**/ "light-card-bg": "#FFFFFF",
/***/ "dark-card-glow": "#FFFFFF33",
/**/ "light-card-glow": "#00000040",
// blockquote
/***/ "dark-blockquote-bg": "#FFFFFF12",
/**/ "light-blockquote-bg": "#0000000D",
/***/ "dark-blockquote-accent": "#FFFFFF4D",
/**/ "light-blockquote-accent": "#0000001A",
// inline code
/***/ "dark-inline-code-bg": "#444",
/**/ "light-inline-code-bg": "#EEE",
/***/ "dark-inline-code-text": "#FFFFFF",
/**/ "light-inline-code-text": "#000000",
/***/ "dark-inline-code-border": "#666",
/**/ "light-inline-code-border": "#BBB",
// block code
// light theme using: highlight.js/styles/default.css
// dark theme using: highlight.js/styles/atom-one-dark-reasonable.css
/***/ "dark-block-code-border": "#555",
/**/ "light-block-code-border": "#BBB",
/***/ "dark-block-code-highlight": "#14161A",
/**/ "light-block-code-highlight": "#DDDDDD",
// footer
/***/ "dark-footer-bg": "#000000",
/**/ "light-footer-bg": "#FFFFFF",
/***/ "dark-footer-text": "#808080",
/* */ "light-footer-text": "#808080",
// header
/***/ "dark-header-bg": "#202225",
/**/ "light-header-bg": "",
/***/ "dark-header-hover": "#3F3F46",
/**/ "light-header-hover": "",
/***/ "dark-header-text": "#D4D4D8",
/**/ "light-header-text": "",
// input
/***/ "dark-input-bg": "#36393F",
/**/ "light-input-bg": "#EEEEEE",
/***/ "dark-input-item-hover": "#202225",
/**/ "light-input-item-hover": "#FFFFFF",
/***/ "dark-input-border": "#555555",
/**/ "light-input-border": "#CCCCCC",
/***/ "dark-input-border-hover": "#808080",
/**/ "light-input-border-hover": "#808080",
/***/ "dark-input-border-focus": "#A3A3A3",
/**/ "light-input-border-focus": "#000000",
/***/ "dark-input-placeholder": "#A9A9A9",
/**/ "light-input-placeholder": "#777777",
// kbd
/***/ "dark-kbd-bg": "#000000",
/**/ "light-kbd-bg": "#F7F7F7",
/***/ "dark-kbd-text": "#FFFFFF",
/**/ "light-kbd-text": "#333333",
/***/ "dark-kbd-border": "#555555",
/**/ "light-kbd-border": "#CCCCCC",
/***/ "dark-kbd-outer-shadow": "#FFFFFF4D",
/**/ "light-kbd-outer-shadow": "#00000033",
/***/ "dark-kbd-inner-shadow": "#000000",
/**/ "light-kbd-inner-shadow": "#FFFFFF",
// mark
/***/ "dark-mark-bg": "#FFFF0080",
/**/ "light-mark-bg": "#FFFF00BF",
/***/ "dark-mark-text": "#FFFFFF",
/**/ "light-mark-text": "#000000",
// scrollbar
/***/ "dark-scrollbar-track": "#18181B",
/**/ "light-scrollbar-track": "#FFFFFF",
/***/ "dark-scrollbar-thumb": "#888888",
/**/ "light-scrollbar-thumb": "#DDDDDD",
// scroll progress
/***/ "dark-scroll-progress-bg": "#52525B",
/**/ "light-scroll-progress-bg": "#D4D4D8",
/***/ "dark-scroll-progress-fg": "#D4D4D8",
/**/ "light-scroll-progress-fg": "#52525B",
// table
/***/ "dark-table-border": "#777777",
/**/ "light-table-border": "#DDD",
/***/ "dark-table-alt": "#21272E",
/**/ "light-table-alt": "#F2F2F2",
},
fontFamily: {
"noto-sans": ['"Noto Sans KR"', "sans-serif"],
"source-code-pro": ['"Source Code Pro"', "monospace"],
},
boxShadow: {
glow: "0 0px 10px",
},
},
},
}

22
pnpm-lock.yaml generated
View file

@ -174,6 +174,9 @@ importers:
apps/main:
devDependencies:
'@developomp-site/tailwind-config':
specifier: workspace:*
version: link:../../packages/tailwind-config
'@developomp-site/theme':
specifier: workspace:*
version: link:../../packages/theme
@ -216,6 +219,9 @@ importers:
eslint-plugin-svelte:
specifier: ^2.32.2
version: 2.32.2(eslint@8.44.0)(svelte@4.0.1)
postcss:
specifier: ^8.4.24
version: 8.4.24
prettier:
specifier: ^2.8.8
version: 2.8.8
@ -231,6 +237,9 @@ importers:
svelte-check:
specifier: ^3.4.4
version: 3.4.4(postcss@8.4.24)(sass@1.63.6)(svelte@4.0.1)
tailwindcss:
specifier: ^3.3.2
version: 3.3.2
tslib:
specifier: ^2.6.0
version: 2.6.0
@ -274,6 +283,9 @@ importers:
'@developomp-site/blog-content':
specifier: workspace:*
version: link:../../packages/blog-content
'@developomp-site/tailwind-config':
specifier: workspace:*
version: link:../../packages/tailwind-config
'@linaria/babel-preset':
specifier: ^4.4.5
version: 4.4.5
@ -333,7 +345,7 @@ importers:
version: 5.1.5
vite:
specifier: ^4.3.9
version: 4.3.9(@types/node@18.11.11)
version: 4.3.9(sass@1.63.6)
vite-plugin-dynamic-import:
specifier: ^1.4.1
version: 1.4.1
@ -4606,7 +4618,7 @@ packages:
'@linaria/logger': 4.0.0
'@linaria/utils': 4.3.4
'@rollup/pluginutils': 4.2.1
vite: 4.3.9(@types/node@18.11.11)
vite: 4.3.9(sass@1.63.6)
transitivePeerDependencies:
- supports-color
dev: true
@ -5963,7 +5975,7 @@ packages:
'@babel/plugin-transform-react-jsx-self': 7.22.5(@babel/core@7.22.5)
'@babel/plugin-transform-react-jsx-source': 7.22.5(@babel/core@7.22.5)
react-refresh: 0.14.0
vite: 4.3.9(@types/node@18.11.11)
vite: 4.3.9(sass@1.63.6)
transitivePeerDependencies:
- supports-color
dev: true
@ -10973,7 +10985,7 @@ packages:
dependencies:
universalify: 2.0.0
optionalDependencies:
graceful-fs: 4.2.10
graceful-fs: 4.2.11
dev: false
/jsonpointer@5.0.1:
@ -15350,7 +15362,7 @@ packages:
debug: 4.3.4(supports-color@5.5.0)
globrex: 0.1.2
tsconfck: 2.1.1(typescript@5.1.5)
vite: 4.3.9(@types/node@18.11.11)
vite: 4.3.9(sass@1.63.6)
transitivePeerDependencies:
- supports-color
- typescript