Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-02-17 22:04:19 -05:00
Code Issues Activity

fix(console): new platform tab colors (#1158)

Browse source
This commit is contained in:
Wang Sijie 2022-06-21 11:03:38 +08:00 • committed by GitHub
parent e0793facb9
commit 1bb770fd1f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
packages/console/src/pages/ConnectorDetails/components/ConnectorTabs/index.module.scss
View file

@ -12,18 +12,13 @@
text-decoration: none; text-decoration: none;
padding: 6px 12px; padding: 6px 12px;
border-radius: 100px; border-radius: 100px;
background: var(--color-on-primary); background: var(--color-layer-1);
border: 1px solid var(--color-text-link); border: 1px solid var(--color-surface-5);
&:not(:last-child) { &:not(:last-child) {
margin-right: _.unit(4); margin-right: _.unit(4);
} }
&.active {
background: var(--color-surface-5);
border-color: var(--color-surface-5);
}
.icon { .icon {
width: 16px; width: 16px;
height: 16px; height: 16px;
@ -31,5 +26,15 @@
margin-right: _.unit(1); margin-right: _.unit(1);
color: var(--color-text-link); color: var(--color-text-link);
} }
&.active {
background: var(--color-inverse-primary);
color: var(--color-white);
border-color: var(--color-inverse-primary);
.icon {
color: var(--color-button-icon);
}
}
} }
} }

8
packages/shared/scss/_console-themes.scss
View file

@ -137,8 +137,10 @@
--color-float: var(--color-all-100); --color-float: var(--color-all-100);
--color-inverse-surface: var(--color-neutral-20); --color-inverse-surface: var(--color-neutral-20);
--color-inverse-on-surface: var(--color-neutral-95); --color-inverse-on-surface: var(--color-neutral-95);
--color-inverse-primary: var(--color-primary-80); --color-inverse-primary: var(--color-primary-50);
--color-shadow: var(--color-all-100); --color-shadow: var(--color-all-100);
--color-white: #fff;
--color-button-icon: var(--color-primary-80);
--color-hover: rgba(25, 28, 29, 8%); // 8% Neutral-10 --color-hover: rgba(25, 28, 29, 8%); // 8% Neutral-10
--color-pressed: rgba(25, 28, 29, 12%); // 12% Neutral-10 --color-pressed: rgba(25, 28, 29, 12%); // 12% Neutral-10
--color-focused: rgba(25, 28, 29, 16%); // 16% Neutral-10 --color-focused: rgba(25, 28, 29, 16%); // 16% Neutral-10
@ -257,7 +259,7 @@
// color aliases // color aliases
--color-primary: var(--color-primary-70); --color-primary: var(--color-primary-70);
--color-on-primary: var(--color-all-0); --color-on-primary: var(--color-all-0);
--color-primary-container: var(--color-primary-90); --color-primary-container: var(--color-primary-30);
--color-on-primary-container: var(--color-primary-30); --color-on-primary-container: var(--color-primary-30);
--color-secondary: var(--color-secondary-70); --color-secondary: var(--color-secondary-70);
--color-on-secondary: var(--color-all-0); --color-on-secondary: var(--color-all-0);
@ -302,6 +304,8 @@
--color-inverse-on-surface: var(--color-neutral-95); --color-inverse-on-surface: var(--color-neutral-95);
--color-inverse-primary: var(--color-primary-80); --color-inverse-primary: var(--color-primary-80);
--color-shadow: var(--color-all-100); --color-shadow: var(--color-all-100);
--color-white: #fff;
--color-button-icon: var(--color-primary-20);
--color-hover: rgba(247, 248, 248, 8%); // 8% Neutral-10 --color-hover: rgba(247, 248, 248, 8%); // 8% Neutral-10
--color-pressed: rgba(247, 248, 248, 12%); // 12% Neutral-10 --color-pressed: rgba(247, 248, 248, 12%); // 12% Neutral-10
--color-focused: rgba(247, 248, 248, 16%); // 16% Neutral-10 --color-focused: rgba(247, 248, 248, 16%); // 16% Neutral-10