Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-16 20:26:19 -05:00
Code Issues Activity

refactor(console): tonal palette colors and theme mixins

Browse source
This commit is contained in:
Charles Zhao 2022-03-11 17:03:24 +08:00
parent 22a6278a9b
commit bd4d3a44fc
No known key found for this signature in database
GPG key ID: 4858774754C92DF2
8 changed files with 109 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
packages/console/src/components/AppContent/index.module.scss
View file

@ -1,3 +1,5 @@
@use '@/scss/colors' as colors;
.app {
position: absolute;
inset: 0;
@ -6,45 +8,12 @@
}
.light {
--color-card-background: #fff;
--color-surface: #fbfdfd;
--color-on-surface: #eff1f1;
--color-on-surface-variant: #47464e;
--color-primary: #4f37f9;
--color-primary-30: #3500e3;
--color-primary-40: #4f37f9;
--color-primary-50: #6e5dff;
--color-primary-60: #8b80ff;
--color-primary-70: #a8a0ff;
--color-primary-80: #c6c0ff;
--color-primary-90: #e5dfff;
--color-primary-95: #f3eeff;
--color-on-primary: #fff;
--color-error: #ba1b1b;
--color-error-30: #930006;
--color-error-40: #ba1b1b;
--color-error-50: #dd3730;
--color-error-60: #ff5449;
--color-error-70: #ff897a;
--color-error-80: #ffb4a9;
--color-error-90: #ffdad4;
--color-inverse-on-surface: #eff1f1;
--color-neutral-70: #a9acac;
--color-neutral-90: #e0e3e3;
--color-neutral-95: #eff1f1;
--color-on-secondary-container: #201c00;
--color-component-border: #c4c7c7;
--color-component-caption: #747778;
--color-component-text: #191c1d;
--color-outline: #78767f;
--color-table-row-selected: rgba(0, 0, 0, 2%);
--color-text-default: #202223;
--color-foggy: #888;
--color-disabled: #c4c7c7;
--color-border: #c4c7c7;
--color-green: #66bb6a;
--shadow-light-s1: 0 2px 8px rgba(0, 0, 0, 8%);
--shadow-light-s2: 0 4px 12px rgba(0, 0, 0, 12%);
@include colors.light-theme;
}
// Currently not in use
.dark {
@include colors.dark-theme;
}
$font-family: 'SF UI Text', 'SF Pro Display', sans-serif;

4
packages/console/src/components/Button/index.module.scss
View file

@ -28,8 +28,8 @@
}
&.default {
background: var(--color-card-background);
color: var(--color-text-default);
background: var(--color-on-primary);
color: var(--color-component-text);
border-color: var(--color-outline);
border-width: 1px;
border-style: solid;

2
packages/console/src/components/Card/index.module.scss
View file

@ -1,7 +1,7 @@
@use '@/scss/underscore' as _;
.card {
background: var(--color-card-background);
background: var(--color-on-primary);
border-radius: _.unit(4);
padding: _.unit(6);
height: 100%;

2
packages/console/src/components/CopyToClipboard/index.module.scss
View file

@ -4,7 +4,7 @@
display: inline-block;
padding: _.unit(3);
border-radius: _.unit(2);
background: var(--color-on-surface);
background: var(--color-inverse-on-surface);
color: var(--color-on-secondary-container);
font: var(--font-caption);
cursor: default;

2
packages/console/src/components/Status/index.module.scss
View file

@ -10,7 +10,7 @@
height: 10px;
border-radius: 50%;
margin-right: _.unit(2);
background: var(--color-green);
background: var(--color-code-comment);
}
.status.offline .icon {

4
packages/console/src/pages/Applications/components/TypeDescription/index.module.scss
View file

@ -8,10 +8,10 @@
.subtitle {
font: var(--font-body-2);
color: var(--color-text-default);
color: var(--color-component-text);
}
.description {
font: var(--font-caption);
color: var(--color-foggy);
color: var(--color-component-caption);
}

93
packages/console/src/scss/_colors.scss Normal file
View file

@ -0,0 +1,93 @@
// tonal palettes
:root {
--color-all-0: #000;
--color-all-100: #fff;
--color-primary-10: #190064;
--color-primary-20: #2d009d;
--color-primary-30: #4300da;
--color-primary-40: #5d34f2;
--color-primary-50: #7958ff;
--color-primary-60: #947dff;
--color-primary-70: #af9eff;
--color-primary-80: #cabeff;
--color-primary-90: #e6deff;
--color-primary-95: #f5eeff;
--color-primary-99: #fffbff;
--color-secondary-10: #201c00;
--color-secondary-20: #373100;
--color-secondary-30: #4f4700;
--color-secondary-40: #695f00;
--color-secondary-50: #847900;
--color-secondary-60: #9f930d;
--color-secondary-70: #baad2d;
--color-secondary-80: #d7c947;
--color-secondary-90: #f4e560;
--color-secondary-95: #fff480;
--color-secondary-99: #fffbf7;
--color-error-10: #410001;
--color-error-20: #680003;
--color-error-30: #930006;
--color-error-40: #ba1b1b;
--color-error-50: #dd3730;
--color-error-60: #ff5449;
--color-error-70: #ff897a;
--color-error-80: #ffb4a9;
--color-error-90: #ffdad4;
--color-error-95: #ffede9;
--color-error-99: #fcfcfc;
--color-neutral-10: #191c1d;
--color-neutral-20: #2d3132;
--color-neutral-30: #444748;
--color-neutral-40: #5c5f60;
--color-neutral-50: #747778;
--color-neutral-60: #8e9192;
--color-neutral-70: #a9acac;
--color-neutral-80: #c4c7c7;
--color-neutral-90: #e0e3e3;
--color-neutral-95: #eff1f1;
--color-neutral-99: #f7f8f8;
--color-neutral-variant-10: #1b1b22;
--color-neutral-variant-20: #302f38;
--color-neutral-variant-30: #47464e;
--color-neutral-variant-40: #5f5d67;
--color-neutral-variant-50: #78767f;
--color-neutral-variant-60: #928f9a;
--color-neutral-variant-70: #adaab4;
--color-neutral-variant-80: #c9c5d0;
--color-neutral-variant-90: #e5e1ec;
--color-neutral-variant-95: #f3effa;
--color-neutral-variant-99: #fffbff;
}
@mixin light-theme {
--color-main-background: #f2f0f6;
--color-surface: var(--color-neutral-99);
--color-on-surface: var(--color-neutral-10);
--color-on-surface-variant: var(--color-neutral-variant-30);
--color-primary: var(--color-primary-40);
--color-on-primary: var(--color-all-100);
--color-error: var(--color-error-40);
--color-inverse-on-surface: var(--color-neutral-95);
--color-on-secondary-container: var(--color-secondary-10);
--color-component-border: var(--color-neutral-80);
--color-component-caption: var(--color-neutral-50);
--color-component-text: var(--color-neutral-10);
--color-outline: var(--color-neutral-variant-50);
--color-disabled: var(--color-neutral-80);
--color-border: var(--color-neutral-80);
--color-table-row-selected: rgba(25, 28, 29, 4%);
--color-code-comment: #66bb6a;
--color-surface-3: #e3dff5;
--shadow-light-s2: 0 4px 12px rgba(0, 0, 0, 12%);
}
@mixin dark-theme {
--color-surface: var(--color-neutral-10);
--color-on-surface: var(--color-neutral-80);
--color-on-surface-variant: var(--color-neutral-variant-80);
--color-primary: var(--color-primary-80);
--color-on-primary: var(--color-primary-20);
--color-error: var(--color-error-80);
--color-on-secondary-container: var(--color-secondary-90);
// to-do: add more dark theme colors
}

2
packages/console/src/scss/normalized.scss
View file

@ -4,7 +4,7 @@ body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: rgb(#e5e1ec, 50%);
background: var(--color-main-background);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: auto;
}