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): adjust dark theme styles per updated UX design

Browse source
This commit is contained in:
Charles Zhao 2022-05-14 20:51:55 +08:00
parent 4e60446411
commit 2a738376ea
No known key found for this signature in database
GPG key ID: 4858774754C92DF2
14 changed files with 57 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/console/package.json
View file

@ -17,6 +17,7 @@
"stylelint": "stylelint \"src/**/*.scss\""
},
"devDependencies": {
"@fontsource/roboto-mono": "^4.5.7",
"@logto/phrases": "^0.1.0",
"@logto/react": "^0.1.5",
"@logto/schemas": "^0.1.0",

2
packages/console/src/App.tsx
View file

@ -4,6 +4,8 @@ import React, { useEffect } from 'react';
import { BrowserRouter, Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
import useSWR, { SWRConfig } from 'swr';
import './scss/normalized.scss';
// eslint-disable-next-line import/no-unassigned-import
import '@fontsource/roboto-mono';
import * as styles from './App.module.scss';
import AppContent from './components/AppContent';

6
packages/console/src/components/AppContent/components/Sidebar/components/Item/index.module.scss
View file

@ -19,7 +19,7 @@
flex: 0 0 _.unit(5);
svg {
fill: var(--color-on-surface-variant);
fill: var(--color-neutral-variant-50);
width: _.unit(5);
height: _.unit(5);
}
@ -31,10 +31,10 @@
&.active {
background: var(--color-surface-5);
color: var(--color-primary);
color: var(--color-text-link);
.icon svg {
fill: var(--color-primary);
fill: var(--color-primary-50);
}
}

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

@ -154,10 +154,10 @@
&.outline {
background: var(--color-layer-1);
border-color: var(--color-primary);
border-color: var(--color-text-link);
border-width: 1px;
border-style: solid;
color: var(--color-primary);
color: var(--color-text-link);
&:disabled {
border-color: var(--color-neutral-70);
@ -181,7 +181,7 @@
background: none;
border-color: none;
font: var(--font-body-medium);
color: var(--color-primary);
color: var(--color-text-link);
&:disabled {
color: var(--color-disabled);

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

@ -3,8 +3,9 @@
.container {
display: inline-block;
border-radius: 6px;
color: var(--color-on-secondary-container);
color: var(--color-text);
font: var(--font-body-medium);
font-family: 'Roboto Mono', monospace;
cursor: default;
&.contained,

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

@ -15,7 +15,7 @@
.title {
font: var(--font-body-medium);
color: var(--color-primary);
color: var(--color-text-link);
text-decoration: none;
}

6
packages/console/src/components/LinkButton/index.module.scss
View file

@ -2,9 +2,9 @@
.linkButton {
background: none;
border-color: none;
border-color: transparent;
font: var(--font-body-medium);
color: var(--color-primary);
color: var(--color-text-link);
text-decoration: none;
display: inline-flex;
align-items: center;
@ -27,6 +27,6 @@
}
> svg {
fill: var(--color-primary);
fill: var(--color-text-link);
}
}

6
packages/console/src/components/TabNav/TabNavItem.module.scss
View file

@ -13,11 +13,11 @@
}
.selected {
color: var(--color-primary);
border-bottom: 2px solid var(--color-primary);
color: var(--color-text-link);
border-bottom: 2px solid var(--color-text-link);
margin-bottom: -1px;
a {
color: var(--color-primary);
color: var(--color-text-link);
}
}

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

@ -3,7 +3,7 @@
.button {
display: inline-block;
font: var(--font-body-medium);
color: var(--color-primary);
color: var(--color-text-link);
padding: _.unit(0.5) _.unit(1);
border-radius: _.unit(1);
text-decoration: none;

4
packages/console/src/mdx-components/Tabs/index.module.scss
View file

@ -19,8 +19,8 @@
}
li[aria-selected='true'] {
color: var(--color-primary);
border-bottom: 2px solid var(--color-primary);
color: var(--color-text-link);
border-bottom: 2px solid var(--color-text-link);
margin-bottom: -1px;
outline: none;
}

2
packages/console/src/pages/Applications/components/GuideModal/index.module.scss
View file

@ -9,7 +9,7 @@
.header {
display: flex;
align-items: center;
background-color: var(--color-on-primary);
background-color: var(--color-layer-1);
height: 64px;
padding: 0 _.unit(21) 0 _.unit(2);

2
packages/console/src/pages/GetStarted/index.module.scss
View file

@ -23,7 +23,7 @@
color: var(--color-caption);
.hideButton {
color: var(--color-primary);
color: var(--color-text-link);
cursor: pointer;
}
}

48
packages/console/src/scss/_colors.scss
View file

@ -125,6 +125,7 @@
--color-danger-hover: var(--color-error-50);
--color-danger-pressed: var(--color-error-30);
--color-text: var(--color-neutral-10);
--color-text-link: var(--color-primary-40);
--color-icon: var(--color-neutral-50);
--color-caption: var(--color-neutral-50);
--color-border: var(--color-neutral-80);
@ -133,7 +134,10 @@
--color-base: var(--color-surface-1);
--color-layer-1: var(--color-all-100);
--color-layer-2: var(--color-neutral-95);
--color-inverse-surface: var(--color-neutral-20);
--color-inverse-on-surface: var(--color-neutral-95);
--color-inverse-primary: var(--color-primary-80);
--color-shadow: var(--color-all-100);
--color-hover: rgba(25, 28, 29, 8%); // 8% Neutral-10
--color-pressed: rgba(25, 28, 29, 12%); // 12% Neutral-10
--color-focused: rgba(25, 28, 29, 16%); // 16% Neutral-10
@ -246,39 +250,40 @@
--color-alert-99: #2b1700;
// color aliases
--color-primary: var(--color-primary-40);
--color-on-primary: var(--color-all-100);
--color-primary: var(--color-primary-70);
--color-on-primary: var(--color-all-0);
--color-primary-container: var(--color-primary-90);
--color-on-primary-container: var(--color-primary-10);
--color-secondary: var(--color-secondary-40);
--color-on-secondary: var(--color-all-100);
--color-secondary-container: var(--color-secondary-30);
--color-on-secondary-container: var(--color-secondary-10);
--color-tertiary: var(--color-tertiary-40);
--color-on-tertiary: var(--color-all-100);
--color-on-primary-container: var(--color-primary-30);
--color-secondary: var(--color-secondary-70);
--color-on-secondary: var(--color-all-0);
--color-secondary-container: var(--color-secondary-90);
--color-on-secondary-container: var(--color-secondary-30);
--color-tertiary: var(--color-tertiary-70);
--color-on-tertiary: var(--color-all-0);
--color-tertiary-container: var(--color-tertiary-90);
--color-on-tertiary-container: var(--color-tertiary-10);
--color-error: var(--color-error-40);
--color-on-error: var(--color-all-100);
--color-on-tertiary-container: var(--color-tertiary-30);
--color-error: var(--color-error-70);
--color-on-error: var(--color-all-0);
--color-error-container: var(--color-error-90);
--color-on-error-container: var(--color-error-10);
--color-on-error-container: var(--color-error-30);
--color-background: var(--color-neutral-99);
--color-on-background: var(--color-neutral-10);
--color-surface: var(--color-neutral-99);
--color-surface-1: #25272b; // Neutral-99 + 2% Neutral-Variant-50 + 5% Primary-40
--color-surface-2: #2a2c32; // Neutral-99 + 2% Neutral-Variant-50 + 8% Primary-40
--color-surface-3: #2f3039; // Neutral-99 + 2% Neutral-Variant-50 + 11% Primary-40
--color-surface-4: #34353f; // Neutral-99 + 2% Neutral-Variant-50 + 14% Primary-40
--color-surface-5: #383844; // Neutral-99 + 2% Neutral-Variant-50 + 16% Primary-40
--color-surface-1: #25272b; // Neutral-99 + 2% Neutral-40 + 5% Primary-80
--color-surface-2: #2a2c32; // Neutral-99 + 2% Neutral-40 + 8% Primary-80
--color-surface-3: #2f3039; // Neutral-99 + 2% Neutral-40 + 11% Primary-80
--color-surface-4: #34353f; // Neutral-99 + 2% Neutral-40 + 14% Primary-80
--color-surface-5: #383844; // Neutral-99 + 2% Neutral-40 + 16% Primary-80
--color-on-surface: var(--color-neutral-10);
--color-surface-variant: var(--color-neutral-variant-90);
--color-on-surface-variant: var(--color-neutral-variant-30);
--color-outline: var(--color-neutral-variant-50);
--color-on-surface-variant: var(--color-neutral-variant-40);
--color-outline: var(--color-neutral-variant-60);
--color-primary-hover: var(--color-primary-60);
--color-primary-pressed: var(--color-primary-80);
--color-danger-hover: var(--color-error-60);
--color-danger-pressed: var(--color-error-80);
--color-text: var(--color-neutral-10);
--color-text-link: var(--color-primary-40);
--color-icon: var(--color-neutral-50);
--color-caption: var(--color-neutral-50);
--color-border: var(--color-neutral-80);
@ -287,7 +292,10 @@
--color-base: var(--color-surface);
--color-layer-1: var(--color-surface-2);
--color-layer-2: var(--color-surface-3);
--color-inverse-surface: var(--color-neutral-20);
--color-inverse-on-surface: var(--color-neutral-95);
--color-inverse-primary: var(--color-primary-80);
--color-shadow: var(--color-all-100);
--color-hover: rgba(247, 248, 248, 8%); // 8% Neutral-10
--color-pressed: rgba(247, 248, 248, 12%); // 12% Neutral-10
--color-focused: rgba(247, 248, 248, 16%); // 16% Neutral-10

6
pnpm-lock.yaml
View file

@ -435,6 +435,7 @@ importers:
packages/console:
specifiers:
'@fontsource/roboto-mono': ^4.5.7
'@logto/phrases': ^0.1.0
'@logto/react': ^0.1.5
'@logto/schemas': ^0.1.0
@ -488,6 +489,7 @@ importers:
swr: ^1.2.2
typescript: ^4.6.2
devDependencies:
'@fontsource/roboto-mono': 4.5.7
'@logto/phrases': link:../phrases
'@logto/react': 0.1.5_react@17.0.2
'@logto/schemas': link:../schemas
@ -3543,6 +3545,10 @@ packages:
- supports-color
dev: true
/@fontsource/roboto-mono/4.5.7:
resolution: {integrity: sha512-1uBjM95BEz7zJlmmnpNAM5afMvIxx0wqr86eA76vRqZw8OF5wmsRqYfF3caHuVarBH9/AGN7t9h+3UXK8fjq/Q==}
dev: true
/@gar/promisify/1.1.3:
resolution: {integrity: sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==}
dev: true