Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-27 21:39:16 -05:00
Code Issues Activity

refactor(ui): refactor ui style foundations (#761)

Browse source 
refactor ui style foundations
`
This commit is contained in:
simeng-li 2022-05-09 15:42:48 +08:00 • committed by GitHub
parent 7e6a8d4156
commit 6e27c1780d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 115 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
packages/ui/src/components/AppContent/index.module.scss
View file

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

10
packages/ui/src/components/AppContent/index.tsx
View file

@ -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 (
<main className={classNames(styles.content, styles.universal, styles.mobile, styles[theme])}>
<main className={classNames(styles.content, styles[theme])}>
{children}
<Toast message={toast} isVisible={Boolean(toast)} callback={hideToast} />
{debouncedLoading && <LoadingLayer />}

3
packages/ui/src/components/ConfirmModal/index.tsx
View file

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

29
packages/ui/src/components/Drawer/index.module.scss
View file

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

5
packages/ui/src/components/Drawer/index.tsx
View file

@ -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={() => {

22
packages/ui/src/scss/_basic.scss Normal file
View file

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

35
packages/ui/src/scss/_colors.scss Normal file
View file

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

33
packages/ui/src/scss/modal.module.scss
View file

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