Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-03-24 22:41:28 -05:00
Code Issues Activity

style(ui): some desktop ui component style update (#877)

Browse source 
some desktop ui component style update
This commit is contained in:
simeng-li 2022-05-19 09:50:03 +08:00 • committed by GitHub
parent 542d878231
commit e5fa1df1fa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 35 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -9,22 +9,24 @@
.content {
@include _.flex_column;
background-color: var(--color-base);
background-color: var(--color-surface);
}
main {
position: absolute;
inset: 0;
background: var(--color-surface);
background: var(--color-base);
color: var(--color-text);
font: var(--font-body);
@include _.flex_column;
}
body {
background-color: var(--color-base);
}
/* Foundation */
:global(body.mobile) {
background-color: var(--color-base);
&.light {
@include mobile.colors-light-theme;
}
@ -50,8 +52,6 @@ main {
}
:global(body.desktop) {
background-color: var(--color-base);
&.light {
@include desktop.colors-light-theme;
}

1
packages/ui/src/components/ConfirmModal/Acmodal.module.scss
View file

@ -16,6 +16,7 @@
.container {
background: var(--color-dialogue);
border-radius: var(--radius);
border: _.border(var(--color-divider));
padding: _.unit(6);
}

9
packages/ui/src/components/Dropdown/index.module.scss
View file

@ -1,13 +1,10 @@
@use '@/scss/underscore' as _;
.content {
background: var(--color-base);
box-shadow: var(--shadow);
background: var(--color-dialogue);
box-shadow: var(--shadow-2);
border-radius: var(--radius);
&.onTop {
box-shadow: var(--shadow-reversed);
}
border: _.border(var(--color-divider));
&:focus {
outline: none;

6
packages/ui/src/components/LoadingLayer/index.module.scss
View file

@ -31,3 +31,9 @@
transform: rotate(360deg);
}
}
:global(body.desktop) {
.container {
border: _.border(var(--color-divider));
}
}

4
packages/ui/src/components/Toast/index.module.scss
View file

@ -15,9 +15,10 @@
padding: _.unit(2) _.unit(4);
max-width: 295px;
font: var(--font-body);
color: var(--color-text);
color: var(--color-primary-button-text);
border-radius: var(--radius);
background: var(--color-toast);
box-shadow: var(--shadow-2);
text-align: center;
opacity: 0%;
transition: opacity 0.3s ease-in-out;
@ -30,6 +31,7 @@
:global(body.desktop) {
.toast {
border: _.border(var(--color-divider));
padding: _.unit(3) _.unit(4);
}
}

28
packages/ui/src/scss/_desktop.scss
View file

@ -10,8 +10,8 @@ $font-family: -apple-system,
sans-serif;
@mixin colors-light-theme {
--color-surface: #ecebf6;
--color-base: #fff;
--color-base: #ecebf6;
--color-surface: #fff;
--color-text: #191c1d;
--color-text-disabled: #c4c7c7;
--color-border: #c4c7c7;
@ -32,19 +32,11 @@ $font-family: -apple-system,
--color-dialogue: #fff;
--color-divider: #e0e3e3;
--color-error: #ba1b1b;
// shadows
--shadow: 0 4px 12px rgba(66, 41, 159, 12%);
--shadow-reversed: 0 -4px 12px rgba(66, 41, 159, 12%);
// legacy below
--color-toast: rgba(25, 28, 29, 80%);
--color-overlay: rgba(25, 28, 29, 16%);
}
@mixin colors-dark-theme {
--color-surface: #25272b;
--color-base: #2a2c32;
--color-base: #25272b;
--color-surface: #2a2c32;
--color-text: #f7f8f8;
--color-text-disabled: #5c5f60;
--color-border: #5c5f60;
@ -65,19 +57,15 @@ $font-family: -apple-system,
--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;
--color-divider: #444748;
--color-error: #dd3730;
// shadows
--shadow: 0 4px 12px rgba(66, 41, 159, 12%);
--shadow-reversed: 0 -4px 12px rgba(66, 41, 159, 12%);
// legacy below
--color-toast: rgba(247, 248, 248, 80%);
--color-overlay: rgba(25, 28, 29, 40%);
}
@mixin colors-universal {
--color-primary-button-text: #fff;
--color-toast: #34353f;
--color-overlay: rgba(0, 0, 0, 30%);
// shadows
--shadow-2: 0 2px 12px rgba(0, 0, 0, 12%);
}
@mixin fonts {

15
packages/ui/src/scss/_mobile.scss
View file

@ -10,6 +10,8 @@ $font-family: -apple-system,
sans-serif;
@mixin colors-light-theme {
--color-base: #fff;
--color-surface: #fff;
--color-text: #191c1d;
--color-icon: #747778;
--color-caption: #747778;
@ -20,14 +22,13 @@ $font-family: -apple-system,
--color-primary: var(--light-primary-color);
--color-layer: #eff1f1;
--color-error: #ba1b1b;
--color-toast: rgba(25, 28, 29, 80%);
--color-overlay: rgba(25, 28, 29, 16%);
--color-base: #fff;
--color-surface: #fff;
--color-dialogue: #fff;
}
@mixin colors-dark-theme {
--color-base: #191c1d;
--color-surface: #191c1d;
--color-text: #f7f8f8;
--color-icon: #a9acac;
--color-caption: #a9acac;
@ -38,16 +39,16 @@ $font-family: -apple-system,
--color-primary: var(--dark-primary-color);
--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-surface: #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 colors-universal {
--color-primary-button-text: #fff;
--color-toast: #34353f;
--color-overlay: rgba(0, 0, 0, 30%);
// shadows
--shadow-2: 0 2px 12px rgba(0, 0, 0, 12%);
}
@mixin fonts {