refactor(console): adjust dark theme styles per updated UX design

packages/console/package.json

@@ -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",

packages/console/src/App.tsx

@@ -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';

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

@@ -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);
     }
   }
 

packages/console/src/components/Button/index.module.scss

@@ -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);

packages/console/src/components/CopyToClipboard/index.module.scss

@@ -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,

packages/console/src/components/ItemPreview/index.module.scss

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

packages/console/src/components/LinkButton/index.module.scss

@@ -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);
   }
 }

packages/console/src/components/TabNav/TabNavItem.module.scss

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

packages/console/src/components/TextButton/index.module.scss

@@ -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;

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

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

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

@@ -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);
 

packages/console/src/pages/GetStarted/index.module.scss

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

packages/console/src/scss/_colors.scss

@@ -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-primary: var(--color-primary-70);
-  --color-on-primary: var(--color-all-100);
+  --color-on-primary: var(--color-all-0);
   --color-primary-container: var(--color-primary-90);
-  --color-on-primary-container: var(--color-primary-10);
+  --color-on-primary-container: var(--color-primary-30);
-  --color-secondary: var(--color-secondary-40);
+  --color-secondary: var(--color-secondary-70);
-  --color-on-secondary: var(--color-all-100);
+  --color-on-secondary: var(--color-all-0);
-  --color-secondary-container: var(--color-secondary-30);
+  --color-secondary-container: var(--color-secondary-90);
-  --color-on-secondary-container: var(--color-secondary-10);
+  --color-on-secondary-container: var(--color-secondary-30);
-  --color-tertiary: var(--color-tertiary-40);
+  --color-tertiary: var(--color-tertiary-70);
-  --color-on-tertiary: var(--color-all-100);
+  --color-on-tertiary: var(--color-all-0);
   --color-tertiary-container: var(--color-tertiary-90);
-  --color-on-tertiary-container: var(--color-tertiary-10);
+  --color-on-tertiary-container: var(--color-tertiary-30);
-  --color-error: var(--color-error-40);
+  --color-error: var(--color-error-70);
-  --color-on-error: var(--color-all-100);
+  --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-1: #25272b; // Neutral-99 + 2% Neutral-40 + 5% Primary-80
-  --color-surface-2: #2a2c32; // Neutral-99 + 2% Neutral-Variant-50 + 8% Primary-40
+  --color-surface-2: #2a2c32; // Neutral-99 + 2% Neutral-40 + 8% Primary-80
-  --color-surface-3: #2f3039; // Neutral-99 + 2% Neutral-Variant-50 + 11% Primary-40
+  --color-surface-3: #2f3039; // Neutral-99 + 2% Neutral-40 + 11% Primary-80
-  --color-surface-4: #34353f; // Neutral-99 + 2% Neutral-Variant-50 + 14% Primary-40
+  --color-surface-4: #34353f; // Neutral-99 + 2% Neutral-40 + 14% Primary-80
-  --color-surface-5: #383844; // Neutral-99 + 2% Neutral-Variant-50 + 16% Primary-40
+  --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-on-surface-variant: var(--color-neutral-variant-40);
-  --color-outline: var(--color-neutral-variant-50);
+  --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

pnpm-lock.yaml

@@ -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