[duoyun-ui] Improve color system

Closed #107, #148
mantou132 · Apr 20, 2024 · f2fd2c5 · f2fd2c5
1 parent 4d4b993
commit f2fd2c5
Show file tree

Hide file tree

Showing 16 changed files with 58 additions and 31 deletions.
diff --git 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
@@ -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
@@ -17,15 +17,15 @@ const style = createCSSSheet(css`
     left: 0;
     height: 2px;
     transition: width 0.3s;
-    background-color: ${theme.informativeColor};
+    background-color: ${theme.primaryColor};
   }
   .head {
     width: 300px;
     height: 400%;
     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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,16 +1,16 @@
+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';
 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
@@ -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',