From f2fd2c5e8e3a67cf933c345794bee98f550a4370 Mon Sep 17 00:00:00 2001
From: mantou132 <709922234@qq.com>
Date: Sat, 20 Apr 2024 12:46:06 +0800
Subject: [PATCH] [duoyun-ui] Improve color system

Closed #107, #148
---
 packages/duoyun-ui/src/elements/carousel.ts   | 26 +++++++++----------
 packages/duoyun-ui/src/elements/input.ts      |  3 ++-
 .../duoyun-ui/src/elements/page-loadbar.ts    |  4 +--
 packages/duoyun-ui/src/elements/pagination.ts |  6 ++---
 packages/duoyun-ui/src/elements/picker.ts     |  3 +++
 packages/duoyun-ui/src/elements/popover.ts    |  2 +-
 packages/duoyun-ui/src/elements/rate.ts       |  1 +
 packages/duoyun-ui/src/elements/result.ts     |  2 +-
 .../duoyun-ui/src/elements/shortcut-record.ts |  5 +++-
 packages/duoyun-ui/src/elements/slider.ts     |  2 +-
 packages/duoyun-ui/src/elements/table.ts      |  2 ++
 packages/duoyun-ui/src/lib/theme.ts           |  4 +--
 packages/duoyun-ui/src/patterns/table.ts      |  2 +-
 packages/duoyun-ui/src/types.d.ts             |  5 ++++
 packages/gem-examples/src/console/index.ts    | 12 ++++++---
 packages/gem-examples/src/console/users.ts    | 10 +++++++
 16 files changed, 58 insertions(+), 31 deletions(-)

diff --git a/packages/duoyun-ui/src/elements/carousel.ts b/packages/duoyun-ui/src/elements/carousel.ts
index 1a77a941..0abe8ff3 100644
--- a/packages/duoyun-ui/src/elements/carousel.ts
+++ b/packages/duoyun-ui/src/elements/carousel.ts
@@ -108,23 +108,21 @@ const style = createCSSSheet(css`
     justify-content: center;
   }
   .circle {
-    width: 0.5em;
-    padding: 0.2em;
-  }
-  .circle::before {
-    transform: scale(0.99);
-    content: '';
-    color: ${theme.highlightColor};
-    display: block;
-    aspect-ratio: 1;
-    border: 1px solid;
+    width: 1em;
+    height: 0.3em;
     border-radius: 10em;
+    padding: 0.3em;
+    background-clip: content-box;
+    background-color: currentColor;
+    opacity: 0.3;
+    transition: width 0.2s;
   }
-  .circle:where(:hover)::before {
-    background: ${theme.describeColor};
+  .circle:where(:hover) {
+    opacity: 0.6;
   }
-  .current::before {
-    background: currentColor;
+  .circle.current {
+    width: 1.5em;
+    opacity: 1;
   }
 `);
 
diff --git a/packages/duoyun-ui/src/elements/input.ts b/packages/duoyun-ui/src/elements/input.ts
index 246160a1..cd9bca65 100644
--- a/packages/duoyun-ui/src/elements/input.ts
+++ b/packages/duoyun-ui/src/elements/input.ts
@@ -74,6 +74,7 @@ const style = createCSSSheet(css`
     box-sizing: border-box;
     border: 1px solid ${theme.borderColor};
     border-radius: ${theme.normalRound};
+    caret-color: ${theme.primaryColor};
     outline: none;
   }
   :host(:not([disabled])) {
@@ -83,7 +84,7 @@ const style = createCSSSheet(css`
     block-size: calc(2.2em + 2px);
   }
   :host(:where(:focus-within, :hover)) {
-    border-color: ${theme.textColor};
+    border-color: ${theme.primaryColor};
   }
   :host([disabled]) {
     cursor: not-allowed;
diff --git a/packages/duoyun-ui/src/elements/page-loadbar.ts b/packages/duoyun-ui/src/elements/page-loadbar.ts
index 3d462907..434dd5fb 100644
--- a/packages/duoyun-ui/src/elements/page-loadbar.ts
+++ b/packages/duoyun-ui/src/elements/page-loadbar.ts
@@ -17,7 +17,7 @@ const style = createCSSSheet(css`
     left: 0;
     height: 2px;
     transition: width 0.3s;
-    background-color: ${theme.informativeColor};
+    background-color: ${theme.primaryColor};
   }
   .head {
     width: 300px;
@@ -25,7 +25,7 @@ const style = createCSSSheet(css`
     background-color: inherit;
     border-start-start-radius: 50%;
     border-end-start-radius: 50%;
-    filter: drop-shadow(0 0 4px ${theme.informativeColor});
+    filter: drop-shadow(0 0 4px ${theme.primaryColor});
   }
 `);
 
diff --git a/packages/duoyun-ui/src/elements/pagination.ts b/packages/duoyun-ui/src/elements/pagination.ts
index 1b786393..f822cdea 100644
--- a/packages/duoyun-ui/src/elements/pagination.ts
+++ b/packages/duoyun-ui/src/elements/pagination.ts
@@ -46,7 +46,7 @@ const style = createCSSSheet(css`
     border-radius: ${theme.normalRound};
     border: 1px solid transparent;
   }
-  .item:where(:not(.disabled)):hover,
+  .item:where(:not(.disabled, .current)):hover,
   .item:where([data-active], :state(active)) {
     color: ${theme.highlightColor};
     background-color: ${theme.hoverBackgroundColor};
@@ -60,8 +60,8 @@ const style = createCSSSheet(css`
     opacity: 0.7;
   }
   .item.current {
-    color: ${theme.backgroundColor};
-    background-color: ${theme.highlightColor};
+    color: ${theme.primaryColor};
+    border-color: currentColor;
   }
   .icon {
     width: 1em;
diff --git a/packages/duoyun-ui/src/elements/picker.ts b/packages/duoyun-ui/src/elements/picker.ts
index 40394d70..fc8f85a9 100644
--- a/packages/duoyun-ui/src/elements/picker.ts
+++ b/packages/duoyun-ui/src/elements/picker.ts
@@ -59,6 +59,9 @@ export const pickerStyle = createCSSSheet(css`
     width: 1.2em;
     color: ${theme.borderColor};
   }
+  :host(:not([disabled], [borderless]):where(:hover, [data-active], :state(active))) {
+    border-color: ${theme.primaryColor};
+  }
   :host(:not([disabled]):where(:hover, [data-active], :state(active))) dy-use {
     color: ${theme.textColor};
   }
diff --git a/packages/duoyun-ui/src/elements/popover.ts b/packages/duoyun-ui/src/elements/popover.ts
index 0cbdb906..e96748f2 100644
--- a/packages/duoyun-ui/src/elements/popover.ts
+++ b/packages/duoyun-ui/src/elements/popover.ts
@@ -118,7 +118,7 @@ export class DuoyunPopoverElement extends GemElement<PopoverState> {
 
   static ghostStyle: GhostStyle = {
     '--bg': theme.backgroundColor,
-    '--color': theme.highlightColor,
+    '--color': theme.textColor,
   };
 
   ghostStyle?: GhostStyle;
diff --git a/packages/duoyun-ui/src/elements/rate.ts b/packages/duoyun-ui/src/elements/rate.ts
index 21b91c45..a5796ae1 100644
--- a/packages/duoyun-ui/src/elements/rate.ts
+++ b/packages/duoyun-ui/src/elements/rate.ts
@@ -26,6 +26,7 @@ const style = createCSSSheet(css`
     display: inline-flex;
     flex-direction: row-reverse;
     align-items: center;
+    color: ${theme.noticeColor};
   }
   :host([disabled]) {
     color: ${theme.disabledColor};
diff --git a/packages/duoyun-ui/src/elements/result.ts b/packages/duoyun-ui/src/elements/result.ts
index 012fedef..f268501b 100644
--- a/packages/duoyun-ui/src/elements/result.ts
+++ b/packages/duoyun-ui/src/elements/result.ts
@@ -19,7 +19,7 @@ const style = createCSSSheet(css`
     justify-content: center;
   }
   .header {
-    margin-block-start: 1em;
+    margin-block: 1em 0.5em;
     color: ${theme.textColor};
   }
   .icon {
diff --git a/packages/duoyun-ui/src/elements/shortcut-record.ts b/packages/duoyun-ui/src/elements/shortcut-record.ts
index e22be845..56aafdac 100644
--- a/packages/duoyun-ui/src/elements/shortcut-record.ts
+++ b/packages/duoyun-ui/src/elements/shortcut-record.ts
@@ -34,8 +34,10 @@ const style = createCSSSheet(css`
   :host(:not([disabled])) {
     box-shadow: ${theme.controlShadow};
   }
+  :host(:where(:focus, :hover)) {
+    border-color: ${theme.primaryColor};
+  }
   :host(:focus) {
-    border-color: ${theme.textColor};
     background-color: ${theme.lightBackgroundColor};
   }
   :host([disabled]) {
@@ -134,6 +136,7 @@ export class DuoyunShortcutRecordElement extends GemElement {
       ),
     ];
     this.change(keys);
+    this.focus({ focusVisible: false });
     evt.stopPropagation();
     evt.preventDefault();
   };
diff --git a/packages/duoyun-ui/src/elements/slider.ts b/packages/duoyun-ui/src/elements/slider.ts
index 3ad50e8d..8838dfd6 100644
--- a/packages/duoyun-ui/src/elements/slider.ts
+++ b/packages/duoyun-ui/src/elements/slider.ts
@@ -56,7 +56,7 @@ const style = createCSSSheet(css`
     box-sizing: border-box;
     width: var(--size);
     height: var(--size);
-    border: 2px solid;
+    border: 2px solid ${theme.primaryColor};
     transition: border-width 0.1s;
     opacity: 0.8;
   }
diff --git a/packages/duoyun-ui/src/elements/table.ts b/packages/duoyun-ui/src/elements/table.ts
index a87459dd..f9ec478a 100644
--- a/packages/duoyun-ui/src/elements/table.ts
+++ b/packages/duoyun-ui/src/elements/table.ts
@@ -35,6 +35,7 @@ import './selection-box';
 const style = createCSSSheet(css`
   :host(:where(:not([hidden]))) {
     display: block;
+    width: 100%;
     overflow: auto;
     font-size: 0.875em;
     font-variant-numeric: tabular-nums;
@@ -47,6 +48,7 @@ const style = createCSSSheet(css`
     width: 100%;
     table-layout: fixed;
     border-collapse: collapse;
+    color: ${theme.textColor};
     /* 为啥用户代理在 localhost 下是 normal，但在 StackBlitz 下没有设置？ */
     font-size: inherit;
   }
diff --git a/packages/duoyun-ui/src/lib/theme.ts b/packages/duoyun-ui/src/lib/theme.ts
index 4be92bb4..d73b6682 100644
--- a/packages/duoyun-ui/src/lib/theme.ts
+++ b/packages/duoyun-ui/src/lib/theme.ts
@@ -19,7 +19,7 @@ export function getSemanticColor(semantic?: string) {
 
 export const lightTheme = {
   colorScheme: 'light',
-  primaryColor: '#000', // https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color
+  primaryColor: '#26c0e3', // https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color
   highlightColor: '#000', // title, etc
   textColor: '#4b4b4b',
   describeColor: '#6e6e6e',
@@ -56,7 +56,7 @@ export const lightTheme = {
 
 export const darkTheme: Partial<typeof lightTheme> = {
   colorScheme: 'dark',
-  primaryColor: '#efefef',
+  primaryColor: '#26c0e3',
   highlightColor: '#efefef',
   textColor: '#c8c8c8',
   describeColor: '#616161',
diff --git a/packages/duoyun-ui/src/patterns/table.ts b/packages/duoyun-ui/src/patterns/table.ts
index 0fa5d506..bfc7091d 100644
--- a/packages/duoyun-ui/src/patterns/table.ts
+++ b/packages/duoyun-ui/src/patterns/table.ts
@@ -134,7 +134,7 @@ const style = createCSSSheet(css`
     white-space: nowrap;
   }
   .comparer {
-    color: ${theme.primaryColor};
+    color: ${theme.highlightColor};
   }
   .pagination {
     margin-block-start: ${theme.gridGutter};
diff --git a/packages/duoyun-ui/src/types.d.ts b/packages/duoyun-ui/src/types.d.ts
index ddb05051..65ba5840 100644
--- a/packages/duoyun-ui/src/types.d.ts
+++ b/packages/duoyun-ui/src/types.d.ts
@@ -1,3 +1,8 @@
 declare module '@mantou/gem' {
   // disable import the entire module
 }
+
+// https://issues.chromium.org/issues/40834435
+interface FocusOptions {
+  focusVisible: boolean;
+}
diff --git a/packages/gem-examples/src/console/index.ts b/packages/gem-examples/src/console/index.ts
index ffc17faa..eb596454 100644
--- a/packages/gem-examples/src/console/index.ts
+++ b/packages/gem-examples/src/console/index.ts
@@ -1,7 +1,9 @@
+import 'duoyun-ui/helper/error';
 import { html, render } from '@mantou/gem/lib/element';
 import { history } from '@mantou/gem/lib/history';
 import { Toast } from 'duoyun-ui/elements/toast';
 import { sleep } from 'duoyun-ui/lib/timer';
+import { updateTheme, darkTheme, lightTheme } from 'duoyun-ui/lib/theme';
 import { type ContextMenus, type Routes, type UserInfo, type NavItems } from 'duoyun-ui/patterns/console';
 
 import 'duoyun-ui/patterns/console';
@@ -9,8 +11,6 @@ import 'duoyun-ui/elements/badge';
 import 'duoyun-ui/elements/paragraph';
 import 'duoyun-ui/elements/card';
 
-import 'duoyun-ui/helper/error';
-
 history.basePath = '/console';
 
 const routes = {
@@ -102,8 +102,12 @@ const contextMenus: ContextMenus = [
     handle: () => Toast.open('info', 'Click Menu Command 2'),
   },
   {
-    text: 'Command 3',
-    handle: () => Toast.open('info', 'Click Menu Command 3'),
+    text: 'Switch to Light',
+    handle: () => updateTheme(lightTheme),
+  },
+  {
+    text: 'Switch to Dark',
+    handle: () => updateTheme(darkTheme),
   },
   {
     text: '---',
diff --git a/packages/gem-examples/src/console/users.ts b/packages/gem-examples/src/console/users.ts
index 763b2e91..9c414869 100644
--- a/packages/gem-examples/src/console/users.ts
+++ b/packages/gem-examples/src/console/users.ts
@@ -115,6 +115,16 @@ export class ConsolePageItemElement extends GemElement {
       text: 'Edit',
       handle: () => this.onUpdate(r),
     },
+    {
+      text: 'VIP',
+      selected: true,
+      disabled: true,
+      handle: console.log,
+    },
+    {
+      text: 'Disable',
+      handle: console.log,
+    },
     { text: '---' },
     {
       text: 'Delete',