From 6e27c1780d0d25b60b7d3a2e5c20f09cd76a9b23 Mon Sep 17 00:00:00 2001 From: simeng-li Date: Mon, 9 May 2022 15:42:48 +0800 Subject: [PATCH] refactor(ui): refactor ui style foundations (#761) refactor ui style foundations ` --- .../components/AppContent/index.module.scss | 74 +++++-------------- .../ui/src/components/AppContent/index.tsx | 10 ++- .../ui/src/components/ConfirmModal/index.tsx | 3 +- .../src/components/Drawer/index.module.scss | 29 ++++++++ packages/ui/src/components/Drawer/index.tsx | 5 +- packages/ui/src/scss/_basic.scss | 22 ++++++ packages/ui/src/scss/_colors.scss | 35 +++++++++ packages/ui/src/scss/modal.module.scss | 33 --------- 8 files changed, 115 insertions(+), 96 deletions(-) create mode 100644 packages/ui/src/scss/_basic.scss create mode 100644 packages/ui/src/scss/_colors.scss diff --git a/packages/ui/src/components/AppContent/index.module.scss b/packages/ui/src/components/AppContent/index.module.scss index 07e98cb90..b28d9b9b6 100644 --- a/packages/ui/src/components/AppContent/index.module.scss +++ b/packages/ui/src/components/AppContent/index.module.scss @@ -1,15 +1,24 @@ @use '@/scss/underscore' as _; +@use '@/scss/colors' as colors; +@use '@/scss/basic' as basic; /* Foundation */ -$font-family: -apple-system, - system-ui, - 'BlinkMacSystemFont', - 'Segoe UI', - 'Roboto', - 'Helvetica Neue', - 'Helvetica', - 'Arial', - sans-serif; +.light { + @include colors.light-theme; +} + +.dark { + @include colors.dark-theme; +} + +body { + @include colors.universal; + @include basic.fonts; + @include basic.layout; + background: var(--color-base); + color: var(--color-text); + font: var(--font-body); +} .content { position: absolute; @@ -18,51 +27,4 @@ $font-family: -apple-system, right: 0; min-height: 100%; background: var(--color-base); - color: var(--color-text); - font: var(--font-body); -} - -.universal { - --radius: 8px; - --color-primary-button-text: #fff; -} - -.light { - --color-text: #191c1d; - --color-icon: #747778; - --color-caption: #747778; - --color-outline: #78767f; - --color-border: #e0e3e3; - --color-disabled: #c4c7c7; - --color-primary: #5d34f2; - --color-layer: #eff1f1; - --color-error: #ba1b1b; - --color-toast: rgba(25, 28, 29, 80%); - --color-overlay: rgba(25, 28, 29, 16%); - --color-base: #fff; - --color-dialogue: #fff; -} - -.dark { - --color-text: #f7f8f8; - --color-icon: #a9acac; - --color-caption: #a9acac; - --color-outline: #928f9a; - --color-border: #444748; - --color-disabled: #5c5f60; - --color-primary: #7958ff; - --color-layer: linear-gradient(0deg, rgba(202, 190, 255, 14%), rgba(202, 190, 255, 14%)), linear-gradient(0deg, rgba(196, 199, 199, 2%), rgba(196, 199, 199, 2%)), #191c1d; - --color-error: #dd3730; - --color-toast: rgba(247, 248, 248, 80%); - --color-overlay: rgba(25, 28, 29, 40%); - --color-base: #191c1d; - --color-dialogue: linear-gradient(0deg, rgba(202, 190, 255, 8%), rgba(202, 190, 255, 8%)), linear-gradient(0deg, rgba(196, 199, 199, 2%), rgba(196, 199, 199, 2%)), #191c1d; -} - -.mobile { - --font-title: 600 32px/40px #{$font-family}; - --font-body-bold: 500 16px/20px #{$font-family}; - --font-body: 400 16px/20px #{$font-family}; - --font-body-small: 500 14px/18px #{$font-family}; - --font-caption: 400 14px/18px #{$font-family}; } diff --git a/packages/ui/src/components/AppContent/index.tsx b/packages/ui/src/components/AppContent/index.tsx index 7be394a02..877ab17d2 100644 --- a/packages/ui/src/components/AppContent/index.tsx +++ b/packages/ui/src/components/AppContent/index.tsx @@ -1,5 +1,5 @@ import classNames from 'classnames'; -import React, { ReactNode, useCallback, useContext } from 'react'; +import React, { ReactNode, useEffect, useCallback, useContext } from 'react'; import { useDebouncedLoader } from 'use-debounced-loader'; import LoadingLayer from '@/components/LoadingLayer'; @@ -23,8 +23,14 @@ const AppContent = ({ children }: Props) => { setToast(''); }, [setToast]); + useEffect(() => { + document.body.classList.remove(styles.light ?? ''); + document.body.classList.remove(styles.dark ?? ''); + document.body.classList.add(styles[theme] ?? ''); + }, [theme]); + return ( -
+
{children} {debouncedLoading && } diff --git a/packages/ui/src/components/ConfirmModal/index.tsx b/packages/ui/src/components/ConfirmModal/index.tsx index 09d731e49..16426f8e3 100644 --- a/packages/ui/src/components/ConfirmModal/index.tsx +++ b/packages/ui/src/components/ConfirmModal/index.tsx @@ -35,8 +35,7 @@ const ConfirmModal = ({ isOpen={isOpen} className={classNames(modalStyles.modal, className)} overlayClassName={classNames(modalStyles.overlay, styles.overlay)} - parentSelector={() => document.querySelector('main') ?? document.body} - ariaHideApp={false} + appElement={document.querySelector('main') ?? undefined} onAfterOpen={() => { document.body.classList.add('static'); }} diff --git a/packages/ui/src/components/Drawer/index.module.scss b/packages/ui/src/components/Drawer/index.module.scss index c3bdbddd4..1c0ed4958 100644 --- a/packages/ui/src/components/Drawer/index.module.scss +++ b/packages/ui/src/components/Drawer/index.module.scss @@ -17,3 +17,32 @@ .closeIcon { fill: var(--color-icon); } + +.drawer { + position: fixed; + left: 0; + right: 0; + bottom: 0; + max-height: 411px; + outline: none; + padding-bottom: env(safe-area-inset-bottom); +} + + +/* stylelint-disable selector-class-pattern */ +/* stylelint-disable-next-line selector-pseudo-class-no-unknown */ +:global { + .ReactModal__Content[role='popup'] { + transform: translateY(100%); + transition: transform 0.3s ease-in-out; + } + + .ReactModal__Content--after-open[role='popup'] { + transform: translateY(0); + } + + .ReactModal__Content--before-close[role='popup'] { + transform: translateY(100%); + } +} +/* stylelint-enable selector-class-pattern */ diff --git a/packages/ui/src/components/Drawer/index.tsx b/packages/ui/src/components/Drawer/index.tsx index d77b9333b..31ab3a368 100644 --- a/packages/ui/src/components/Drawer/index.tsx +++ b/packages/ui/src/components/Drawer/index.tsx @@ -20,10 +20,9 @@ const Drawer = ({ className, isOpen = false, children, onClose }: Props) => { shouldCloseOnOverlayClick role="popup" isOpen={isOpen} - className={classNames(modalStyles.drawer, className)} + className={classNames(styles.drawer, className)} overlayClassName={modalStyles.overlay} - parentSelector={() => document.querySelector('main') ?? document.body} - appElement={document.querySelector('main') ?? document.body} + appElement={document.querySelector('main') ?? undefined} closeTimeoutMS={300} onRequestClose={onClose} onAfterOpen={() => { diff --git a/packages/ui/src/scss/_basic.scss b/packages/ui/src/scss/_basic.scss new file mode 100644 index 000000000..aed87afde --- /dev/null +++ b/packages/ui/src/scss/_basic.scss @@ -0,0 +1,22 @@ +/* Foundation */ +$font-family: -apple-system, + system-ui, + 'BlinkMacSystemFont', + 'Segoe UI', + 'Roboto', + 'Helvetica Neue', + 'Helvetica', + 'Arial', + sans-serif; + +@mixin fonts { + --font-title: 600 32px/40px #{$font-family}; + --font-body-bold: 500 16px/20px #{$font-family}; + --font-body: 400 16px/20px #{$font-family}; + --font-body-small: 500 14px/18px #{$font-family}; + --font-caption: 400 14px/18px #{$font-family}; +} + +@mixin layout { + --radius: 8px; +} diff --git a/packages/ui/src/scss/_colors.scss b/packages/ui/src/scss/_colors.scss new file mode 100644 index 000000000..dd04da37f --- /dev/null +++ b/packages/ui/src/scss/_colors.scss @@ -0,0 +1,35 @@ +@mixin light-theme { + --color-text: #191c1d; + --color-icon: #747778; + --color-caption: #747778; + --color-outline: #78767f; + --color-border: #e0e3e3; + --color-disabled: #c4c7c7; + --color-primary: #5d34f2; + --color-layer: #eff1f1; + --color-error: #ba1b1b; + --color-toast: rgba(25, 28, 29, 80%); + --color-overlay: rgba(25, 28, 29, 16%); + --color-base: #fff; + --color-dialogue: #fff; +} + +@mixin dark-theme { + --color-text: #f7f8f8; + --color-icon: #a9acac; + --color-caption: #a9acac; + --color-outline: #928f9a; + --color-border: #444748; + --color-disabled: #5c5f60; + --color-primary: #7958ff; + --color-layer: linear-gradient(0deg, rgba(202, 190, 255, 14%), rgba(202, 190, 255, 14%)), linear-gradient(0deg, rgba(196, 199, 199, 2%), rgba(196, 199, 199, 2%)), #191c1d; + --color-error: #dd3730; + --color-toast: rgba(247, 248, 248, 80%); + --color-overlay: rgba(25, 28, 29, 40%); + --color-base: #191c1d; + --color-dialogue: linear-gradient(0deg, rgba(202, 190, 255, 8%), rgba(202, 190, 255, 8%)), linear-gradient(0deg, rgba(196, 199, 199, 2%), rgba(196, 199, 199, 2%)), #191c1d; +} + +@mixin universal { + --color-primary-button-text: #fff; +} diff --git a/packages/ui/src/scss/modal.module.scss b/packages/ui/src/scss/modal.module.scss index 9d51b2cfa..139e89ea3 100644 --- a/packages/ui/src/scss/modal.module.scss +++ b/packages/ui/src/scss/modal.module.scss @@ -7,41 +7,8 @@ outline: none; } -.drawer { - position: fixed; - left: 0; - right: 0; - bottom: 0; - max-height: 411px; - outline: none; - padding-bottom: env(safe-area-inset-bottom); -} - .overlay { position: fixed; background: var(--color-overlay); inset: 0; } - -/* stylelint-disable selector-class-pattern */ -/* stylelint-disable-next-line selector-pseudo-class-no-unknown */ -:global { - .static { - overflow: hidden; - } - - .ReactModal__Content[role='popup'] { - transform: translateY(100%); - transition: transform 0.3s ease-in-out; - } - - .ReactModal__Content--after-open[role='popup'] { - transform: translateY(0); - } - - .ReactModal__Content--before-close[role='popup'] { - transform: translateY(100%); - } -} - -/* stylelint-enable selector-class-pattern */