From 59c41de72a0ccc5d2666bcf832233446c62933b0 Mon Sep 17 00:00:00 2001 From: MH4GF Date: Mon, 2 Dec 2024 15:32:21 +0900 Subject: [PATCH 1/5] refactor: move destyle.css to @liam/ui package --- frontend/packages/cli/package.json | 2 +- frontend/packages/cli/src/globals.css | 2 +- frontend/packages/ui/package.json | 1 + frontend/packages/ui/styles/globals.css | 1 + frontend/pnpm-lock.yaml | 9 ++++++--- 5 files changed, 10 insertions(+), 5 deletions(-) create mode 100644 frontend/packages/ui/styles/globals.css diff --git a/frontend/packages/cli/package.json b/frontend/packages/cli/package.json index cbc8d7158..09592f6fc 100644 --- a/frontend/packages/cli/package.json +++ b/frontend/packages/cli/package.json @@ -9,7 +9,6 @@ }, "dependencies": { "commander": "12.1.0", - "destyle.css": "4.0.1", "react": "18", "react-dom": "18", "valibot": "^1.0.0-beta.5" @@ -18,6 +17,7 @@ "@biomejs/biome": "1.9.3", "@liam/db-structure": "workspace:*", "@liam/erd-core": "workspace:*", + "@liam/ui": "workspace:*", "@rollup/plugin-node-resolve": "15.3.0", "@rollup/plugin-typescript": "12.1.1", "@types/node": "22.9.0", diff --git a/frontend/packages/cli/src/globals.css b/frontend/packages/cli/src/globals.css index ec50b293e..06e7d6e24 100644 --- a/frontend/packages/cli/src/globals.css +++ b/frontend/packages/cli/src/globals.css @@ -1,4 +1,4 @@ -@import url('destyle.css'); +@import url('@liam/ui/styles/globals.css'); #root { display: flex; diff --git a/frontend/packages/ui/package.json b/frontend/packages/ui/package.json index ffcd46b5b..4f9bee47d 100644 --- a/frontend/packages/ui/package.json +++ b/frontend/packages/ui/package.json @@ -7,6 +7,7 @@ "@radix-ui/react-dropdown-menu": "2.1.2", "@radix-ui/react-tooltip": "1.1.3", "clsx": "2.1.1", + "destyle.css": "4.0.1", "lucide-react": "0.451.0", "ts-pattern": "5.4.0" }, diff --git a/frontend/packages/ui/styles/globals.css b/frontend/packages/ui/styles/globals.css new file mode 100644 index 000000000..32f39358e --- /dev/null +++ b/frontend/packages/ui/styles/globals.css @@ -0,0 +1 @@ +@import url('destyle.css'); diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index 96f7ac82c..a9674936f 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -75,9 +75,6 @@ importers: commander: specifier: 12.1.0 version: 12.1.0 - destyle.css: - specifier: 4.0.1 - version: 4.0.1 react: specifier: '18' version: 18.3.1 @@ -97,6 +94,9 @@ importers: '@liam/erd-core': specifier: workspace:* version: link:../erd-core + '@liam/ui': + specifier: workspace:* + version: link:../ui '@rollup/plugin-node-resolve': specifier: 15.3.0 version: 15.3.0(rollup@4.27.3) @@ -232,6 +232,9 @@ importers: clsx: specifier: 2.1.1 version: 2.1.1 + destyle.css: + specifier: 4.0.1 + version: 4.0.1 lucide-react: specifier: 0.451.0 version: 0.451.0(react@18.3.1) From ebbea4f3b6a5fd46af6e2cf88eed010be50ce364 Mon Sep 17 00:00:00 2001 From: MH4GF Date: Mon, 2 Dec 2024 15:39:11 +0900 Subject: [PATCH 2/5] feat: add dark and mode 1 CSS variable files and update globals.css --- .../packages/ui/styles/Dark/variables.css | 296 ++++++++++++++++++ .../packages/ui/styles/Mode 1/variables.css | 30 ++ frontend/packages/ui/styles/globals.css | 2 + 3 files changed, 328 insertions(+) create mode 100644 frontend/packages/ui/styles/Dark/variables.css create mode 100644 frontend/packages/ui/styles/Mode 1/variables.css diff --git a/frontend/packages/ui/styles/Dark/variables.css b/frontend/packages/ui/styles/Dark/variables.css new file mode 100644 index 000000000..3bfbda992 --- /dev/null +++ b/frontend/packages/ui/styles/Dark/variables.css @@ -0,0 +1,296 @@ +/** + * Do not edit directly, this file was auto-generated. + * Generated on Thu, 17 Oct 2024 04:57:00 GMT + */ + +:root { + --color-gray-0: #ffffff; + --color-gray-5: #f7f7f7; + --color-gray-10: #f0f0f0; + --color-gray-30: #e7e8ea; + --color-gray-50: #d1d2d3; + --color-gray-100: #bebfc1; + --color-gray-400: #5f6366; + --color-gray-500: #434546; + --color-gray-600: #393b3c; + --color-gray-700: #383a3b; + --color-gray-800: #2e3031; + --color-gray-900: #232526; + --color-gray-1000: #141616; + --color-vermilion-700: #803f30; + --color-vermilion-800: #a6523f; + --color-vermilion-900: #d55235; + --color-vermilion-1000: #c64427; + --color-gold-50: #fff9eb; + --color-gold-300: #ffbf36; + --color-gold-950: #461402; + --color-gold-alpha-10: rgba(240, 181, 55, 0.1); + --color-gold-alpha-20: rgba(240, 181, 55, 0.2); + --color-gold-alpha-40: rgba(240, 181, 55, 0.4); + --color-gold-alpha-50: rgba(240, 181, 55, 0.5); + --color-gold-alpha-100: #ffbf36; + --color-white-alpha-5: rgba(255, 255, 255, 0.05); + --color-white-alpha-10: rgba(255, 255, 255, 0.1); + --color-white-alpha-20: rgba(255, 255, 255, 0.2); + --color-white-alpha-30: rgba(255, 255, 255, 0.3); + --color-white-alpha-40: rgba(255, 255, 255, 0.4); + --color-white-alpha-50: rgba(255, 255, 255, 0.5); + --color-white-alpha-60: rgba(255, 255, 255, 0.6); + --color-white-alpha-70: rgba(255, 255, 255, 0.7); + --color-white-alpha-100: #ffffff; + --color-black-alpha-5: rgba(0, 0, 0, 0.05); + --color-black-alpha-10: rgba(0, 0, 0, 0.1); + --color-black-alpha-20: rgba(0, 0, 0, 0.2); + --color-black-alpha-30: rgba(0, 0, 0, 0.3); + --color-black-alpha-40: rgba(0, 0, 0, 0.4); + --color-black-alpha-50: rgba(0, 0, 0, 0.5); + --color-black-alpha-60: rgba(0, 0, 0, 0.6); + --color-black-alpha-70: rgba(0, 0, 0, 0.7); + --color-black-alpha-100: #000000; + --color-yellow-alpha-10: rgba(255, 215, 72, 0.1); + --color-yellow-alpha-20: rgba(255, 215, 72, 0.2); + --color-yellow-alpha-100: #ffd748; + --color-teal-100: #f9fefe; + --color-teal-200: #f0fbfc; + --color-teal-300: #d7f9fc; + --color-teal-400: #bef4f9; + --color-teal-500: #a5edf3; + --color-teal-600: #87e2eb; + --color-teal-700: #5bd3de; + --color-teal-800: #00bfcf; + --color-teal-900: #00a9b6; + --color-teal-1000: #009ba8; + --color-teal-1100: #00818c; + --color-teal-1200: #003f45; + --color-teal-alpha-20: rgba(0, 169, 182, 0.2); + --color-teal-alpha-40: rgba(0, 169, 182, 0.4); + --color-green-10: #fafefb; + --color-green-50: #eefff5; + --color-green-80: #deffe6; + --color-green-100: #c8ffd7; + --color-green-200: #b4fed7; + --color-green-300: #4af19c; + --color-green-400: #1ded83; + --color-green-500: #36c271; + --color-green-600: #008543; + --color-green-700: #174428; + --color-green-950: #00331b; + --color-green-alpha-10: rgba(29, 237, 131, 0.1); + --color-green-alpha-20: rgba(29, 237, 131, 0.2); + --color-green-alpha-40: rgba(29, 237, 131, 0.4); + --color-green-alpha-100: #1ded83; + --color-purple-alpha-10: rgba(193, 112, 255, 0.1); + --color-purple-alpha-20: rgba(193, 112, 255, 0.2); + --color-purple-alpha-40: rgba(193, 112, 255, 0.4); + --color-purple-alpha-100: #c170ff; + --color-red-50: #fff2f1; + --color-red-300: #ffa5a1; + --color-red-500: #f75049; + --color-red-550: #d55235; + --color-red-600: #c64427; + --color-red-650: #a6523f; + --color-red-700: #803f30; + --color-red-950: #480a07; + --color-red-alpha-10: rgba(247, 80, 73, 0.1); + --color-red-alpha-20: rgba(247, 80, 73, 0.2); + --color-red-alpha-40: rgba(247, 80, 73, 0.4); + --color-red-alpha-100: #f75049; + --color-blue-alpha-10: rgba(20, 188, 255, 0.1); + --color-blue-alpha-20: rgba(20, 188, 255, 0.2); + --color-blue-alpha-100: #14bcff; + --color-blue-alpha-900-accentcolor: #3e63dd; + --color-red-milk-40: rgba(255, 195, 193, 0.4); + --color-red-milk-100: #ffc3c1; + --color-red-milk-200: #ea928e; + --color-green-milk-40: rgba(176, 249, 212, 0.4); + --color-green-milk-100: #b0f9d4; + --color-green-milk-200: #5ec692; + --color-blue-milk-40: rgba(204, 232, 242, 0.4); + --color-blue-milk-100: #cce8f2; + --color-blue-milk-200: #97bdcb; + --color-yellow-milk-40: rgba(231, 221, 179, 0.4); + --color-yellow-milk-100: #e7ddb3; + --color-yellow-milk-200: #c3b476; + --border-radius-none: 0px; + --border-radius-xs: 1px; + --border-radius-sm: 2px; + --border-radius-smbase: 3px; + --border-radius-base: 4px; + --border-radius-md: 6px; + --border-radius-lg: 8px; + --border-radius-lg-plus: 9px; + --border-radius-xl: 12px; + --border-radius-2xl: 16px; + --border-radius-3xl: 20px; + --border-radius-full: 9999px; + --border-width-base: 1px; + --spacing-0: 0px; + --spacing-1: 4px; + --spacing-2: 8px; + --spacing-3: 12px; + --spacing-4: 16px; + --spacing-5: 20px; + --spacing-6: 24px; + --spacing-7: 28px; + --spacing-8: 32px; + --spacing-9: 36px; + --spacing-10: 40px; + --spacing-14: 56px; + --spacing-20: 80px; + --spacing-30: 120px; + --spacing-275: 275px; + --spacing-1half: 6px; + --spacing-half: 2px; + --global-background: #141616; + --global-foreground: #ffffff; + --global-muted-background: #232526; + --global-border: #383a3b; + --global-body-text: #d1d2d3; + --global-mute-text: #bebfc1; + --primary-accent: #1ded83; + --primary-hover: #4af19c; + --primary-color: #1ded83; + --primary-accent-overlay: rgba(29, 237, 131, 0.1); + --primary-on-white-shape: #36c271; + --primary-on-white-text: #008543; + --info-background: #ffffff; + --info-foreground: #003f45; + --error-background: #ffffff; + --error-foreground: #480a07; + --success-background: #ffffff; + --success-foreground: #00331b; + --warning-background: #ffffff; + --warning-foreground: #461402; + --button-border: #434546; + --button-foreground: #000000; + --button-primary-foreground: #000000; + --button-secondary-foreground: #ffffff; + --button-background: #2e3031; + --button-background-hover: #434546; + --button-background-active: #5f6366; + --button-disabled-foreground: #5f6366; + --button-disabled-background: #2e3031; + --button-primary: #1ded83; + --button-primary-background-hover: #4af19c; + --button-danger: #c64427; + --button-danger-foreground: #ffffff; + --button-danger-background-hover: #d55235; + --button-ghost-secondary-background: #00331b; + --button-secondary-background-hover: #ffffff; + --avatar-text: #232526; + --avatar-background: #ffd748; + --pane-border: #383a3b; + --pane-border-hover: #5f6366; + --pane-border-active: #434546; + --pane-muted-background: #2e3031; + --pane-background: #232526; + --pane-background-hover: #383a3b; + --pane-background-active: #2e3031; + --link-default: #bebfc1; + --link-active: #ffffff; + --tooltip-border: #f0f0f0; + --tooltip-foreground: #2e3031; + --tooltip-background: #ffffff; + --toggle-background: #5f6366; + --toggle-background-checked: #1ded83; + --toggle-foreground: #ffffff; + --node-border: #2e3031; + --node-background: #141616; + --node-block: #00a9b6; + --node-page-active: #ffbf36; + --node-layout: #1ded83; + --node-action: #f75049; + --node-page-default: rgba(240, 181, 55, 0.5); + --node-partial: #c170ff; + --danger-default: #c64427; + --danger-hover: #d55235; + --danger-disabled: #803f30; + --collaborator-color-1: #14bcff; + --collaborator-color-2: #f87dbd; + --collaborator-color-3: #ff8570; + --collaborator-color-4: #00caa7; + --collaborator-color-5: #7fc44f; + --collaborator-color-6: #b39aff; + --collaborator-color-7: #d2a800; + --collaborator-color-8: #83acff; + --collaborator-color-9: #fb8d30; + --collaborator-color-you: #ffd748; + --checkbox-background: #f0f0f0; + --checkbox-border: #d1d2d3; + --checkbox-border-hover: #bebfc1; + --checkbox-border-active: #5f6366; + --checkbox-border-disable: #434546; + --checkbox-background-disable: #393b3c; + --checkbox-foreground: #ffffff; + --dropdown-background-hover: #2e3031; + --dropdown-background-active: #232526; + --dropdown-border: #5f6366; + --shadow-basic-shadow: #000000; + --shadow-context-menu-shadow: rgba(0, 0, 0, 0.4); + --overlay-5: rgba(255, 255, 255, 0.05); + --overlay-10: rgba(255, 255, 255, 0.1); + --overlay-20: rgba(255, 255, 255, 0.2); + --overlay-30: rgba(255, 255, 255, 0.3); + --overlay-40: rgba(255, 255, 255, 0.4); + --overlay-50: rgba(255, 255, 255, 0.5); + --overlay-60: rgba(255, 255, 255, 0.6); + --overlay-70: rgba(255, 255, 255, 0.7); + --overlay-100: #ffffff; + --overlay-30-revert: rgba(0, 0, 0, 0.3); + --modal-overlay: rgba(0, 0, 0, 0.2); + --edit: #28507a; + --accent: #3e63dd; + --select-royal-blue: #3e63dd; + --select-indigo: #4d56c9; + --select-blue-violet: #5e52c1; + --select-studio: #7b4cb8; + --select-trendy-pink: #984bac; + --select-mulberry: #c44791; + --select-cabaret: #d84676; + --select-mandy: #d54a5c; + --select-valencia: #d54b48; + --select-flamingo: #e9672b; + --select-saffron: #ffbb38; + --select-golden-dream: #ffe52e; + --select-yellow-green: #bee76b; + --select-fruit-salad: #509956; + --select-ocean-green: #3f957a; + --select-lochinvar: #379889; + --select-boston-blue: #3096bc; + --select-spray: #81dcfa; + --select-riptide: #8ce3cf; + --select-cherokee: #ffdd9c; + --select-kobi: #eca3bb; + --select-light-wisteria: #bda6dc; + --position-pattern-border: #393b3c; + --position-pattern-border-hover: #5f6366; + --position-pattern-background: #232526; + --position-pattern-foreground: #5f6366; + --position-pattern-foreground-hover: #bebfc1; + --callout-callout: #ffffff; + --callout-default-background: rgba(255, 255, 255, 0.05); + --callout-default-border: rgba(255, 255, 255, 0.1); + --callout-default-text: #bebfc1; + --callout-default-link: #ffffff; + --callout-default-underline: rgba(255, 255, 255, 0.4); + --callout-danger-background: rgba(247, 80, 73, 0.1); + --callout-danger-border: rgba(247, 80, 73, 0.2); + --callout-danger-text: #ea928e; + --callout-danger-link: #ffc3c1; + --callout-danger-underline: rgba(255, 195, 193, 0.4); + --callout-success-background: rgba(29, 237, 131, 0.1); + --callout-success-border: rgba(29, 237, 131, 0.2); + --callout-success-text: #5ec692; + --callout-success-link: #b0f9d4; + --callout-success-underline: rgba(176, 249, 212, 0.4); + --callout-info-background: rgba(20, 188, 255, 0.1); + --callout-info-border: rgba(20, 188, 255, 0.2); + --callout-info-text: #97bdcb; + --callout-info-link: #cce8f2; + --callout-info-underline: rgba(204, 232, 242, 0.4); + --callout-warning-background: rgba(255, 215, 72, 0.1); + --callout-warning-border: rgba(255, 215, 72, 0.2); + --callout-warning-text: #c3b476; + --callout-warning-link: #e7ddb3; + --callout-warning-underline: rgba(231, 221, 179, 0.4); +} diff --git a/frontend/packages/ui/styles/Mode 1/variables.css b/frontend/packages/ui/styles/Mode 1/variables.css new file mode 100644 index 000000000..2458036a7 --- /dev/null +++ b/frontend/packages/ui/styles/Mode 1/variables.css @@ -0,0 +1,30 @@ +/** + * Do not edit directly, this file was auto-generated. + * Generated on Thu, 17 Oct 2024 04:57:00 GMT + */ + +:root { + --font-size-1: 10px; + --font-size-2: 11px; + --font-size-3: 12px; + --font-size-4: 13px; + --font-size-5: 14px; + --font-size-6: 16px; + --font-size-7: 18px; + --font-size-8: 20px; + --font-size-9: 22px; + --font-size-10: 24px; + --font-size-14: 32px; + --font-size-16: 40px; + --font-size-18: 48px; + --text-weight-en-light: Light; + --text-weight-en-regular: Regular; + --text-weight-en-medium: Medium; + --text-weight-en-semibold: SemiBold; + --text-weight-en-bold: Bold; + --text-weight-ja-regular: W3; + --text-weight-ja-bold: W6; + --main-font: Inter; + --message-font: Montserrat; + --main-font-ja: Hiragino Sans; +} diff --git a/frontend/packages/ui/styles/globals.css b/frontend/packages/ui/styles/globals.css index 32f39358e..3a9e94c0f 100644 --- a/frontend/packages/ui/styles/globals.css +++ b/frontend/packages/ui/styles/globals.css @@ -1 +1,3 @@ @import url('destyle.css'); +@import './Dark/variables.css'; +@import './Mode 1/variables.css'; From 42810979bdfc4760860868b39e450075d3f9d12c Mon Sep 17 00:00:00 2001 From: MH4GF Date: Mon, 2 Dec 2024 15:46:16 +0900 Subject: [PATCH 3/5] refactor: move global styles to erd-core --- frontend/packages/cli/package.json | 1 - frontend/packages/cli/src/globals.css | 2 +- frontend/packages/erd-core/styles/globals.css | 1 + frontend/pnpm-lock.yaml | 3 --- 4 files changed, 2 insertions(+), 5 deletions(-) create mode 100644 frontend/packages/erd-core/styles/globals.css diff --git a/frontend/packages/cli/package.json b/frontend/packages/cli/package.json index 09592f6fc..7f61655fe 100644 --- a/frontend/packages/cli/package.json +++ b/frontend/packages/cli/package.json @@ -17,7 +17,6 @@ "@biomejs/biome": "1.9.3", "@liam/db-structure": "workspace:*", "@liam/erd-core": "workspace:*", - "@liam/ui": "workspace:*", "@rollup/plugin-node-resolve": "15.3.0", "@rollup/plugin-typescript": "12.1.1", "@types/node": "22.9.0", diff --git a/frontend/packages/cli/src/globals.css b/frontend/packages/cli/src/globals.css index 06e7d6e24..47459ba17 100644 --- a/frontend/packages/cli/src/globals.css +++ b/frontend/packages/cli/src/globals.css @@ -1,4 +1,4 @@ -@import url('@liam/ui/styles/globals.css'); +@import url('@liam/erd-core/styles/globals.css'); #root { display: flex; diff --git a/frontend/packages/erd-core/styles/globals.css b/frontend/packages/erd-core/styles/globals.css new file mode 100644 index 000000000..040e96dfd --- /dev/null +++ b/frontend/packages/erd-core/styles/globals.css @@ -0,0 +1 @@ +@import url('@liam/ui/styles/globals.css'); diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index a9674936f..5314cad3a 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -94,9 +94,6 @@ importers: '@liam/erd-core': specifier: workspace:* version: link:../erd-core - '@liam/ui': - specifier: workspace:* - version: link:../ui '@rollup/plugin-node-resolve': specifier: 15.3.0 version: 15.3.0(rollup@4.27.3) From 13ba573bd15204a8af988eec4824dca133758e8f Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Mon, 2 Dec 2024 06:47:14 +0000 Subject: [PATCH 4/5] Update docs/packages-license.md --- frontend/docs/packages-license.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/docs/packages-license.md b/frontend/docs/packages-license.md index a9d554ad8..242215965 100644 --- a/frontend/docs/packages-license.md +++ b/frontend/docs/packages-license.md @@ -1,6 +1,6 @@ # frontend -As of December 2, 2024 4:17am. 990 total +As of December 2, 2024 6:47am. 990 total ## Summary * 859 MIT From 0d3adfdee1721f3c39f646971946caeeea24b3d6 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" Date: Mon, 2 Dec 2024 07:59:10 +0000 Subject: [PATCH 5/5] Update docs/packages-license.md --- frontend/docs/packages-license.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/docs/packages-license.md b/frontend/docs/packages-license.md index 2de257f3f..08f8f6d27 100644 --- a/frontend/docs/packages-license.md +++ b/frontend/docs/packages-license.md @@ -1,6 +1,6 @@ # frontend -As of December 2, 2024 6:59am. 990 total +As of December 2, 2024 7:59am. 990 total ## Summary * 859 MIT