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

style(ui): add desktop styling (#816)

Browse source 
* style(ui): add desktop styling

add desktop styling

* fix(ui): fix typo

fix typo
This commit is contained in:
simeng-li 2022-05-15 10:54:29 +08:00 • committed by GitHub
parent 0b2ad91357
commit 1173ad1b8c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 39 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -13,39 +13,57 @@ $font-family: -apple-system,
--color-surface: #ecebf6;
--color-base: #fff;
--color-text: #191c1d;
--color-text-disabled: #c4c7c7;
--color-border: #c4c7c7;
--color-caption: #747778;
--color-icon: #747778;
// legacy bellow
--color-outline: #78767f;
--color-border: #e0e3e3;
--color-disabled: #c4c7c7;
--color-primary: #5d34f2;
--color-focused: rgba(25, 28, 29, 16%);
--color-focused-variant: rgba(93, 52, 242, 16%);
--color-pressed: rgba(25, 28, 29, 12%);
--color-primary-pressed: #4300da;
--color-pressed-variant: rgba(93, 52, 242, 12%);
--color-hover: rgba(25, 28, 29, 8%);
--color-primary-hover: #7958ff;
--color-hover-variant: rgba(93, 52, 242, 8%);
--color-inverse-on-surface: #f3effa;
--color-outline: #78767f;
--color-layer: #eff1f1;
--color-dialogue: #fff;
--color-divider: #e0e3e3;
--color-error: #ba1b1b;
// legacy below
--color-toast: rgba(25, 28, 29, 80%);
--color-overlay: rgba(25, 28, 29, 16%);
--color-dialogue: #fff;
}
@mixin colors-dark-theme {
--color-surface: #25272b;
--color-base: #2a2c32;
--color-text: #f7f8f8;
--color-text-disabled: #5c5f60;
--color-border: #5c5f60;
--color-caption: #a9acac;
--color-icon: #a9acac;
// legacy bellow
--color-outline: #928f9a;
--color-border: #444748;
--color-disabled: #5c5f60;
--color-primary: #7958ff;
--color-focused: rgba(247, 248, 248, 16%);
--color-focused-variant: rgba(202, 190, 255, 16%);
--color-hover-variant: rgba(202, 190, 255, 8%);
--color-hover: rgba(247, 248, 248, 8%);
--color-primary-hover: #947dff;
--color-pressed-variant: rgba(202, 190, 255, 12%);
--color-pressed: rgba(247, 248, 248, 12%);
--color-primary-pressed: #5d34f2;
--color-inverse-on-surface: #2d3132;
--color-outline: #928f9a;
--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-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;
// legacy below
--color-toast: rgba(247, 248, 248, 80%);
--color-overlay: rgba(25, 28, 29, 40%);
--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;
}
@ -56,7 +74,8 @@ $font-family: -apple-system,
@mixin fonts {
--font-title: 600 32px/40px #{$font-family};
--font-title-medium: 600 28px/36px #{$font-family};
--font-title-small: 600 24px/32px #{$font-family};
--font-title-small: 600 16px/24px #{$font-family};
--font-header: 600 20px/28px #{$font-family};
--font-body-bold: 500 14px/20px #{$font-family};
--font-body: 400 14px/20px #{$font-family};
--font-caption: 400 14px/20px #{$font-family};

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

@ -14,8 +14,9 @@ $font-family: -apple-system,
--color-icon: #747778;
--color-caption: #747778;
--color-outline: #78767f;
--color-border: #e0e3e3;
--color-disabled: #c4c7c7;
--color-divider: #e0e3e3;
--color-text-disabled: #c4c7c7;
--color-border: #c4c7c7;
--color-primary: #5d34f2;
--color-layer: #eff1f1;
--color-error: #ba1b1b;
@ -31,8 +32,9 @@ $font-family: -apple-system,
--color-icon: #a9acac;
--color-caption: #a9acac;
--color-outline: #928f9a;
--color-border: #444748;
--color-disabled: #5c5f60;
--color-divider: #444748;
--color-text-disabled: #5c5f60;
--color-border: #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;