From ab8f72326a1e675ffe8cc7d62470782d19c5f93c Mon Sep 17 00:00:00 2001 From: icepeng Date: Thu, 19 Sep 2024 13:34:37 +0900 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20color=20scheme=EC=97=90=20=EB=94=B0?= =?UTF-8?q?=EB=A5=B8=20=ED=8C=94=EB=A0=88=ED=8A=B8=20=EC=83=89=EC=83=81=20?= =?UTF-8?q?=EB=B6=84=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/storybook/.storybook/preview.tsx | 3 +- packages/ui/src/systems/palette.ts | 106 ++++++++++---------- packages/ui/src/theme.css | 137 ++++++++++++++++++++++++++ 3 files changed, 192 insertions(+), 54 deletions(-) create mode 100644 packages/ui/src/theme.css diff --git a/apps/storybook/.storybook/preview.tsx b/apps/storybook/.storybook/preview.tsx index 630708c6..48f7d2f4 100644 --- a/apps/storybook/.storybook/preview.tsx +++ b/apps/storybook/.storybook/preview.tsx @@ -1,5 +1,6 @@ -import '../styles/index.css'; import 'the-new-css-reset/css/reset.css'; +import '../styles/index.css'; +import '@boolti/ui/src/theme.css' import { themes } from '@storybook/theming'; import { BooltiUIProvider } from '@boolti/ui'; diff --git a/packages/ui/src/systems/palette.ts b/packages/ui/src/systems/palette.ts index 32609f04..dee7b1d5 100644 --- a/packages/ui/src/systems/palette.ts +++ b/packages/ui/src/systems/palette.ts @@ -1,81 +1,81 @@ const palette = { primary: { - o0: '#FFCFBA', - o1: '#FF5A14', - o2: '#E94600', - o3: '#C93E02', + o0: 'var(--color-primary-o0)', + o1: 'var(--color-primary-o1)', + o2: 'var(--color-primary-o2)', + o3: 'var(--color-primary-o3)', }, status: { - error: '#FF4D4F', - warning: '#FAAD14', - success: '#52C41A', - link: '#1890FF', + error: 'var(--color-status-error)', + warning: 'var(--color-status-warning)', + success: 'var(--color-status-success)', + link: 'var(--color-status-link)', }, purple: { - main: '#B150FF', - sub: '#E6C8FE', + main: 'var(--color-purple-main)', + sub: 'var(--color-purple-sub)', }, blue: { - main: '#2B7BE9', - sub: '#C8E7FE', + main: 'var(--color-blue-main)', + sub: 'var(--color-blue-sub)', }, green: { - main: '#52C41A', - sub: '#CCF3BA', + main: 'var(--color-green-main)', + sub: 'var(--color-green-sub)', }, red: { - main: '#FF5A14', - sub: '#FFCFBA', + main: 'var(--color-red-main)', + sub: 'var(--color-red-sub)', }, yellow: { - main: '#E09500', - sub: '#FFE2A9', + main: 'var(--color-yellow-main)', + sub: 'var(--color-yellow-sub)', }, grey: { - main: '#888D9D', - sub: '#F3F5F9', - w: '#FFFFFF', - g00: '#F3F5F9', - g10: '#E7EAF2', - g20: '#D8DBE5', - g30: '#C8CCDC', - g40: '#A2A5B4', - g50: '#888D9D', - g60: '#6F7485', - g70: '#595D6D', - g80: '#434753', - g90: '#282B33', - g100: '#121215', - b: '#000000', + main: 'var(--color-grey-main)', + sub: 'var(--color-grey-sub)', + w: 'var(--color-grey-w)', + g00: 'var(--color-grey-g00)', + g10: 'var(--color-grey-g10)', + g20: 'var(--color-grey-g20)', + g30: 'var(--color-grey-g30)', + g40: 'var(--color-grey-g40)', + g50: 'var(--color-grey-g50)', + g60: 'var(--color-grey-g60)', + g70: 'var(--color-grey-g70)', + g80: 'var(--color-grey-g80)', + g90: 'var(--color-grey-g90)', + g100: 'var(--color-grey-g100)', + b: 'var(--color-grey-b)', }, dim: { - dialog: 'rgba(86, 86, 86, 0.25)', + dialog: 'var(--color-dim-dialog)', }, - shadow: 'rgba(136, 141, 157, 0.15)', + shadow: 'var(--color-shadow)', mobile: { primary: { - o1: '#FF6827', + o1: 'var(--color-mobile-primary-o1)', }, status: { - error: '#FF4D4F', - success: '#52C41A', + error: 'var(--color-mobile-status-error)', + success: 'var(--color-mobile-status-success)', }, grey: { - w: '#FFFFFF', - g05: '#F6F7FF', - g10: '#E7EAF2', - g15: '#D8DBE5', - g20: '#BEC1CE', - g30: '#A2A5B4', - g40: '#888D9D', - g50: '#6F7485', - g60: '#595D6D', - g70: '#434753', - g80: '#2E303A', - g85: '#1B1D23', - g90: '#121318', - g95: '#090A0B', - b: '#000000', + w: 'var(--color-mobile-grey-w)', + g05: 'var(--color-mobile-grey-g05)', + g10: 'var(--color-mobile-grey-g10)', + g15: 'var(--color-mobile-grey-g15)', + g20: 'var(--color-mobile-grey-g20)', + g30: 'var(--color-mobile-grey-g30)', + g40: 'var(--color-mobile-grey-g40)', + g50: 'var(--color-mobile-grey-g50)', + g60: 'var(--color-mobile-grey-g60)', + g70: 'var(--color-mobile-grey-g70)', + g80: 'var(--color-mobile-grey-g80)', + g85: 'var(--color-mobile-grey-g85)', + g90: 'var(--color-mobile-grey-g90)', + g95: 'var(--color-mobile-grey-g95)', + b: 'var(--color-mobile-grey-b)', }, }, opacity: { diff --git a/packages/ui/src/theme.css b/packages/ui/src/theme.css new file mode 100644 index 00000000..81687b43 --- /dev/null +++ b/packages/ui/src/theme.css @@ -0,0 +1,137 @@ +:root { + --color-primary-o0: #FFCFBA; + --color-primary-o1: #FF5A14; + --color-primary-o2: #E94600; + --color-primary-o3: #C93E02; + + --color-status-error: #FF4D4F; + --color-status-warning: #FAAD14; + --color-status-success: #52C41A; + --color-status-link: #1890FF; + + --color-purple-main: #B150FF; + --color-purple-sub: #E6C8FE; + + --color-blue-main: #2B7BE9; + --color-blue-sub: #C8E7FE; + + --color-green-main: #52C41A; + --color-green-sub: #CCF3BA; + + --color-red-main: #FF5A14; + --color-red-sub: #FFCFBA; + + --color-yellow-main: #E09500; + --color-yellow-sub: #FFE2A9; + + --color-grey-main: #888D9D; + --color-grey-sub: #F3F5F9; + --color-grey-w: #FFFFFF; + --color-grey-g00: #F3F5F9; + --color-grey-g10: #E7EAF2; + --color-grey-g20: #D8DBE5; + --color-grey-g30: #C8CCDC; + --color-grey-g40: #A2A5B4; + --color-grey-g50: #888D9D; + --color-grey-g60: #6F7485; + --color-grey-g70: #595D6D; + --color-grey-g80: #434753; + --color-grey-g90: #282B33; + --color-grey-g100: #121215; + --color-grey-b: #000000; + + --color-dim-dialog: rgba(86, 86, 86, 0.25); + + --color-shadow: rgba(136, 141, 157, 0.15); + + --color-mobile-primary-o1: #FF6827; + + --color-mobile-status-error: #FF4D4F; + --color-mobile-status-success: #52C41A; + + --color-mobile-grey-w: #FFFFFF; + --color-mobile-grey-g05: #F6F7FF; + --color-mobile-grey-g10: #E7EAF2; + --color-mobile-grey-g15: #D8DBE5; + --color-mobile-grey-g20: #BEC1CE; + --color-mobile-grey-g30: #A2A5B4; + --color-mobile-grey-g40: #888D9D; + --color-mobile-grey-g50: #6F7485; + --color-mobile-grey-g60: #595D6D; + --color-mobile-grey-g70: #434753; + --color-mobile-grey-g80: #2E303A; + --color-mobile-grey-g85: #1B1D23; + --color-mobile-grey-g90: #121318; + --color-mobile-grey-g95: #090A0B; + --color-mobile-grey-b: #000000; +} + +@media(prefers-color-scheme: dark) { + :root { + --color-primary-o0: #FFCFBA; + --color-primary-o1: #FF5A14; + --color-primary-o2: #E94600; + --color-primary-o3: #C93E02; + + --color-status-error: #FF4D4F; + --color-status-warning: #FAAD14; + --color-status-success: #52C41A; + --color-status-link: #1890FF; + + --color-purple-main: #B150FF; + --color-purple-sub: #E6C8FE; + + --color-blue-main: #2B7BE9; + --color-blue-sub: #C8E7FE; + + --color-green-main: #52C41A; + --color-green-sub: #CCF3BA; + + --color-red-main: #FF5A14; + --color-red-sub: #FFCFBA; + + --color-yellow-main: #E09500; + --color-yellow-sub: #FFE2A9; + + --color-grey-main: #777262; + --color-grey-sub: #0C0A06; + --color-grey-w: #000000; + --color-grey-g00: #0C0A06; + --color-grey-g10: #18150D; + --color-grey-g20: #27241A; + --color-grey-g30: #373333; + --color-grey-g40: #5D5A4B; + --color-grey-g50: #777262; + --color-grey-g60: #908B7A; + --color-grey-g70: #A6A19F; + --color-grey-g80: #BEBACD; + --color-grey-g90: #D7D4CC; + --color-grey-g100: #ECECED; + --color-grey-b: #FFFFFF; + + --color-dim-dialog: rgba(86, 86, 86, 0.25); + + --color-shadow: rgba(136, 141, 157, 0.15); + + --color-mobile-primary-o1: #FF6827; + + --color-mobile-status-error: #FF4D4F; + --color-mobile-status-success: #52C41A; + + --color-mobile-grey-w: #FFFFFF; + --color-mobile-grey-g05: #F6F7FF; + --color-mobile-grey-g10: #E7EAF2; + --color-mobile-grey-g15: #D8DBE5; + --color-mobile-grey-g20: #BEC1CE; + --color-mobile-grey-g30: #A2A5B4; + --color-mobile-grey-g40: #888D9D; + --color-mobile-grey-g50: #6F7485; + --color-mobile-grey-g60: #595D6D; + --color-mobile-grey-g70: #434753; + --color-mobile-grey-g80: #2E303A; + --color-mobile-grey-g85: #1B1D23; + --color-mobile-grey-g90: #121318; + --color-mobile-grey-g95: #090A0B; + --color-mobile-grey-b: #000000; + } +} \ No newline at end of file From 9de60d16d046c3e110127a37625be6876facf44f Mon Sep 17 00:00:00 2001 From: icepeng Date: Thu, 19 Sep 2024 14:17:18 +0900 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20theme.css=20exports=20map=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/storybook/.storybook/preview.tsx | 2 +- packages/ui/package.json | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/apps/storybook/.storybook/preview.tsx b/apps/storybook/.storybook/preview.tsx index 48f7d2f4..47c21809 100644 --- a/apps/storybook/.storybook/preview.tsx +++ b/apps/storybook/.storybook/preview.tsx @@ -1,6 +1,6 @@ import 'the-new-css-reset/css/reset.css'; import '../styles/index.css'; -import '@boolti/ui/src/theme.css' +import '@boolti/ui/theme.css' import { themes } from '@storybook/theming'; import { BooltiUIProvider } from '@boolti/ui'; diff --git a/packages/ui/package.json b/packages/ui/package.json index 8a1d0a4e..eb7326ea 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -9,6 +9,10 @@ "lint": "TIMING=1 eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "lint:fix": "TIMING=1 eslint . --ext ts,tsx --fix" }, + "exports": { + ".": "./src/index.ts", + "./theme.css": "./src/theme.css" + }, "dependencies": { "@boolti/icon": "*", "@emotion/react": "^11.11.3", From 6b9f2a706358caee2593fe9f2fbc04f27dccca01 Mon Sep 17 00:00:00 2001 From: icepeng Date: Thu, 19 Sep 2024 14:30:41 +0900 Subject: [PATCH 3/3] feat: dark mode palette values --- packages/ui/src/theme.css | 114 ++++++++++++++++++-------------------- 1 file changed, 55 insertions(+), 59 deletions(-) diff --git a/packages/ui/src/theme.css b/packages/ui/src/theme.css index 81687b43..a012012c 100644 --- a/packages/ui/src/theme.css +++ b/packages/ui/src/theme.css @@ -68,70 +68,66 @@ @media(prefers-color-scheme: dark) { :root { - --color-primary-o0: #FFCFBA; - --color-primary-o1: #FF5A14; - --color-primary-o2: #E94600; - --color-primary-o3: #C93E02; - - --color-status-error: #FF4D4F; - --color-status-warning: #FAAD14; - --color-status-success: #52C41A; - --color-status-link: #1890FF; - - --color-purple-main: #B150FF; - --color-purple-sub: #E6C8FE; - - --color-blue-main: #2B7BE9; - --color-blue-sub: #C8E7FE; - - --color-green-main: #52C41A; - --color-green-sub: #CCF3BA; - - --color-red-main: #FF5A14; - --color-red-sub: #FFCFBA; - - --color-yellow-main: #E09500; - --color-yellow-sub: #FFE2A9; - - --color-grey-main: #777262; - --color-grey-sub: #0C0A06; + --color-primary-o0: #391a00; + --color-primary-o1: #a83600; + --color-primary-o2: #c93b00; + --color-primary-o3: #e54803; + + --color-status-error: #c40008; + --color-status-warning: #4e3302; + --color-status-success: #1d5005; + --color-status-link: #0061b1; + + --color-purple-main: #a500fb; + --color-purple-sub: #42035b; + --color-blue-main: #266fd3; + --color-blue-sub: #021e2b; + --color-green-main: #1d5005; + --color-green-sub: #121a0f; + --color-red-main: #a83600; + --color-red-sub: #391a00; + --color-yellow-main: #6b4500; + --color-yellow-sub: #211800; + + --color-grey-main: #5d616e; + --color-grey-sub: #080d14; --color-grey-w: #000000; - --color-grey-g00: #0C0A06; - --color-grey-g10: #18150D; - --color-grey-g20: #27241A; - --color-grey-g30: #373333; - --color-grey-g40: #5D5A4B; - --color-grey-g50: #777262; - --color-grey-g60: #908B7A; - --color-grey-g70: #A6A19F; - --color-grey-g80: #BEBACD; - --color-grey-g90: #D7D4CC; - --color-grey-g100: #ECECED; - --color-grey-b: #FFFFFF; + --color-grey-g00: #080d14; + --color-grey-g10: #111621; + --color-grey-g20: #1d202b; + --color-grey-g30: #262b3c; + --color-grey-g40: #484b5a; + --color-grey-g50: #5d616e; + --color-grey-g60: #74798b; + --color-grey-g70: #8d91a2; + --color-grey-g80: #a6aab9; + --color-grey-g90: #cacdd6; + --color-grey-g100: #efeff0; + --color-grey-b: #ffffff; --color-dim-dialog: rgba(86, 86, 86, 0.25); --color-shadow: rgba(136, 141, 157, 0.15); - --color-mobile-primary-o1: #FF6827; - - --color-mobile-status-error: #FF4D4F; - --color-mobile-status-success: #52C41A; - - --color-mobile-grey-w: #FFFFFF; - --color-mobile-grey-g05: #F6F7FF; - --color-mobile-grey-g10: #E7EAF2; - --color-mobile-grey-g15: #D8DBE5; - --color-mobile-grey-g20: #BEC1CE; - --color-mobile-grey-g30: #A2A5B4; - --color-mobile-grey-g40: #888D9D; - --color-mobile-grey-g50: #6F7485; - --color-mobile-grey-g60: #595D6D; - --color-mobile-grey-g70: #434753; - --color-mobile-grey-g80: #2E303A; - --color-mobile-grey-g85: #1B1D23; - --color-mobile-grey-g90: #121318; - --color-mobile-grey-g95: #090A0B; - --color-mobile-grey-b: #000000; + --color-mobile-primary-o1: #9a3800; + + --color-mobile-status-error: #c40008; + --color-mobile-status-success: #1d5005; + + --color-mobile-grey-w: #000000; + --color-mobile-grey-g05: #000726; + --color-mobile-grey-g10: #111621; + --color-mobile-grey-g15: #1d202b; + --color-mobile-grey-g20: #303441; + --color-mobile-grey-g30: #484b5a; + --color-mobile-grey-g40: #5d616e; + --color-mobile-grey-g50: #74798b; + --color-mobile-grey-g60: #8d91a2; + --color-mobile-grey-g70: #a6aab9; + --color-mobile-grey-g80: #c4c6cf; + --color-mobile-grey-g85: #dfe0e5; + --color-mobile-grey-g90: #edeef0; + --color-mobile-grey-g95: #f7f7f8; + --color-mobile-grey-b: #ffffff; } } \ No newline at end of file