pengjunjie/desktop-sdk
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/desktop-sdk.git synced 2026-03-31 10:23:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

AIAgent: refactoring white theme

Browse Source
This commit is contained in:
Timofey
2025-10-31 18:37:40 +08:00
parent 4070d77324
commit 0fd0918216
6 changed files with 108 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ChromiumBasedEditors/plugins/ai-agent/deploy/{9DC93CDB-B576-4F0C-B55E-FCC9C48DD777}/index.css
View File

File diff suppressed because one or more lines are too long

4
ChromiumBasedEditors/plugins/ai-agent/deploy/{9DC93CDB-B576-4F0C-B55E-FCC9C48DD777}/index.js
View File

File diff suppressed because one or more lines are too long

6
ChromiumBasedEditors/plugins/ai-agent/src/components/button/Button.utils.tsx
View File

@ -14,8 +14,7 @@ const defaultHoverStyles =
"hover:enabled:bg-[var(--button-default-hover-background-color)]";
const defaultActiveStyles =
"active:enabled:bg-[var(--button-default-pressed-background-color)]";
const defaultFocusStyles =
"focus:enabled:bg-[var(--button-default-focus-background-color)] focus:shadow-[var(--button-default-focus-shadow)]";
const defaultFocusStyles = "focus:shadow-[var(--button-default-focus-shadow)]";
const defaultDisabledStyles =
"disabled:bg-[var(--button-default-disabled-background-color)] disabled:text-[var(--button-default-disabled-color)] disabled:opacity-40 disabled:cursor-not-allowed";
@ -28,8 +27,7 @@ const primaryActiveStyles =
"active:enabled:bg-[var(--button-background-pressed-color)]";
const primaryFocusStyles =
"focus:bg-[var(--button-background-color)] focus:border-[var(--button-border-focus-color)] focus:shadow-[var(--button-shadow-focus)]";
const primaryDisabledStyles =
"disabled:bg-[var(--button-background-disabled-color)] disabled:text-[var(--button-disabled-color)] disabled:cursor-not-allowed";
const primaryDisabledStyles = "disabled:opacity-50 disabled:cursor-not-allowed";
// Size styles

4
ChromiumBasedEditors/plugins/ai-agent/src/components/toggle-button/index.tsx
View File

@ -19,9 +19,9 @@ const ToggleButton = ({
// State styles
const backgroundStyles =
"bg-[var(--toggle-button-off-backround-color)] data-[state=checked]:bg-[var(--toggle-button-backround-color)]";
"bg-[var(--toggle-button-off-background-color)] data-[state=checked]:bg-[var(--toggle-button-background-color)]";
const hoverStyles =
"hover:enabled:bg-[var(--toggle-button-off-background-hover-color)] data-[state=checked]:hover:enabled:bg-[var(--toggle-button-backround-hover-color)]";
"data-[state=checked]:hover:enabled:bg-[var(--toggle-button-background-hover-color)]";
// Size styles
const sizeStyles = "w-[24px] h-[14px]";

7
ChromiumBasedEditors/plugins/ai-agent/src/styles/theme-night.css
View File

@ -122,9 +122,9 @@
--radio-button-active-color: var(--background-primary-dialog-button);
/* toggle button */
--toggle-button-backround-color: var(--background-primary-dialog-button);
--toggle-button-backround-hover-color: var(--highlight-primary-dialog-button-hover);
--toggle-button-off-backround-color: var(--gray-300);
--toggle-button-background-color: var(--background-primary-dialog-button);
--toggle-button-background-hover-color: var(--highlight-primary-dialog-button-hover);
--toggle-button-off-background-color: var(--gray-300);
--toggle-button-off-background-hover-color: var(--gray-350);
--toggle-button-circle-color: var(--background-normal);
@ -174,7 +174,6 @@
--ai-provider-item-color: var(--text-normal);
--ai-provider-item-description-color: var(--text-secondary);
--ai-provider-item-background-color: var(--background-normal);
--ai-provider-item-icon-color: #1C1B1F;
--ai-provider-item-shadow: 0px 1px 2px 0px #0000000F, 0px 1px 3px 0px #0000001A;
/* settings servers */

189
ChromiumBasedEditors/plugins/ai-agent/src/styles/theme-white.css
View File

@ -1,56 +1,69 @@
.theme-white {
/* base colors */
--background-normal: #FFFFFF;
--background-normal-element-light:#F9F9F9;
--background-normal: #ffffff;
--background-normal-element: #f3f3f3;
--background-normal-element-light: #f9f9f9;
--background-accent-button: #3483db;
--background-primary-button: #3483db;
--background-scrim: #00000033;
--background-scroll-thumb: #e0e0e0;
--background-primary-dialog-button: #4A87E7;
--border-divider: #dfdfdf;
--border-regular-control: #c0c0c0;
--border-control-focus: #848484;
--border-error: #f62211;
--border-sidebar-icon: #dfdfdf;
--highlight-primary-dialog-button-hover: #2566D5;
--highlight-primary-dialog-button-pressed: #1E53AE;
--highlight-button-hover: #e0e0e0;
--highlight-button-pressed: #cccccc;
--highlight-button-hover-on-active: #d4d4d4;
--highlight-button-pressed-on-active: #e1e1e1;
--highlight-accent-button-hover: #5293e2;
--highlight-accent-button-pressed: #3475c5;
--highlight-primary-button-hover: #2b2b2b;
--highlight-primary-button-pressed: #2b2b2b;
--highlight-scroll-thumb-hover: #cccccc;
--highlight-scroll-track-hover: #00000008;
--highlight-toolbar-tab-underline-document: #4a87e7;
--highlight-button-hover:#EAEAEA;
--highlight-button-pressed:#E1E1E1;
--highlight-button-hover-on-active:#D4D4D4;
--highlight-button-pressed-on-active:#E1E1E1;
--checkbox-check-mark-background: #ffffff;
--checkbox-background-checked: #4a87e7;
--checkbox-border-normal: #c0c0c0;
--text-normal: #484848;
--text-secondary:#00000099;
--icon-normal: #000000cc;
--icon-success: #009900;
--text-normal: #000000cc;
--text-normal-pressed: #000000cc;
--text-secondary: #00000099;
--text-tertiary: #00000066;
--text-contrast-background:#FFFFFF;
--text-link: #445799;
--text-inverse: #ffffff;
--text-contrast-background: #ffffff;
--text-negative: #991b1b;
--icon-normal: #444444;
--icon-gray-primary: #383838;
--border-divider: #EAEAEA;
--checkbox-border-normal: #969696;
--gray-100: #F3F3F3;
--gray-300: #CECECE;
--gray-350: #B2B2B2;
/* components */
/* layout */
--layout-background-color: var(--background-normal);
/* header */
--header-color: var(--icon-gray-primary);
--header-color: var(--text-normal);
--header-background-color: var(--background-normal);
--header-border-color: var(--border-divider);
/* chat list */
--chat-list-color: var(--icon-gray-primary);
--chat-list-color: var(--text-normal);
--chat-list-border-right: var(--border-divider);
--chat-list-empty-color: var(--text-tertiary);
/* chat list item */
--chat-list-item-color: var(--text-normal);
--chat-list-item-hover-background-color: var(--gray-300);
--chat-list-item-active-background-color: var(--gray-100);
--chat-list-item-hover-background-color: var(--highlight-button-hover);
--chat-list-item-active-background-color: var(--highlight-button-pressed);
/* icon button */
--icon-button-color: var(--icon-gray-primary);
--icon-button-color: var(--icon-normal);
--icon-button-background-color: transparent;
--icon-button-hover-background-color: var(--highlight-button-hover);
--icon-button-pressed-background-color: var(--highlight-button-pressed);
@ -59,57 +72,54 @@
/* button */
--button-color: var(--text-contrast-background);
--button-background-color: var(--background-primary-dialog-button);
--button-background-hover-color: var(--highlight-primary-dialog-button-hover);
--button-background-pressed-color: var(--highlight-primary-dialog-button-pressed);
--button-background-color: var(--background-accent-button);
--button-background-hover-color: var(--highlight-accent-button-hover);
--button-background-pressed-color: var(--highlight-accent-button-pressed);
--button-border-focus-color: var(--text-contrast-background);
--button-shadow-focus: 0px 0px 0px 2px #4781D1BF;
--button-background-disabled-color: var(--highlight-button-hover);
--button-disabled-color: var(--gray-350);
--button-default-color: var(--icon-gray-primary);
--button-default-color: var(--text-normal);
--button-default-background-color: var(--background-normal);
--button-default-border-color: var(--highlight-button-pressed);
--button-default-hover-background-color:var(--background-normal-element-light);
--button-default-pressed-background-color:var(--highlight-button-hover);
--button-default-hover-background-color: var(--background-normal-element-light);
--button-default-pressed-background-color: var(--highlight-button-hover);
--button-default-focus-shadow: 0px 0px 0px 2px #4781D180;
--button-default-focus-background-color:#E8E8E8;
--button-default-disabled-border-color:#C0C0C0;
--button-default-disabled-color:var(--text-normal);
--button-default-disabled-border-color: var(--border-regular-control);
--button-default-disabled-color: var(--text-normal);
--button-default-disabled-background-color: var(--background-normal);
/* input */
--input-background-color: #F0F0F0;
--input-background-color: var(--background-normal-element);
--input-placeholder-color: var(--text-tertiary);
--input-color: var(--text-normal);
--input-border-color: #F0F0F0;
--input-border-color: var(--border-regular-control);
--input-hover-background-color: var(--highlight-button-hover);
--input-hover-border-color: var(--gray-300);
--input-active-border-color: var(--background-primary-dialog-button);
--input-hover-border-color: var(--checkbox-border-normal);
--input-active-border-color: var(--background-accent-button);
--input-active-background-color: var(--background-normal);
--input-error-color: #991b1b;
--input-error-color: var(--text-negative);
/* tabs */
--tabs-color: var(--text-normal);
--tabs-border-color: var(--border-divider);
--tabs-hover-border-color: var(--gray-300);
--tabs-active-border-color: var(--background-primary-dialog-button);
--tabs-hover-border-color: var(--checkbox-border-normal);
--tabs-active-border-color: var(--background-accent-button);
/* modal dialog */
--modal-dialog-background-color: var(--background-normal);
--modal-dialog-footer-border-color: #DFDFDF;
--modal-dialog-header-color:var(--text-normal);
--modal-dialog-shadows: 0px 8px 16px 0px #040F1B29, 0px 0px 4px 0px #040F1B1F;
--modal-dialog-overlay-background: #7F7F7F1A;
--modal-dialog-footer-border-color: var(--border-divider);
--modal-dialog-header-color: var(--text-normal);
--modal-dialog-shadows: 0px 8px 16px 0px #040f1b29, 0px 0px 4px 0px #040f1b1f;
--modal-dialog-overlay-background: var(--background-scrim);
/* field container */
--field-container-header-color: var(--text-normal);
--field-container-error-color: #991b1b;
--field-container-error-color: var(--text-negative);
/* drop down menu */
--drop-down-menu-background-color: var(--background-normal);
--drop-down-menu-border-color: #0000001A;
--drop-down-menu-shadow: 0px 8px 16px 0px #040F1B14, 0px 0px 4px 0px #040F1B0A;
--drop-down-menu-border-color: #0000001a;
--drop-down-menu-shadow: 0px 8px 16px 0px #040f1b14, 0px 0px 4px 0px #040f1b0a;
/* drop down menu item */
--drop-down-menu-item-color: var(--text-normal);
@ -119,23 +129,22 @@
/* radio button */
--radio-button-color: var(--checkbox-border-normal);
--radio-button-active-color: var(--background-primary-dialog-button);
--radio-button-active-color: var(--background-accent-button);
/* toggle button */
--toggle-button-backround-color: var(--background-primary-dialog-button);
--toggle-button-backround-hover-color: var(--highlight-primary-dialog-button-hover);
--toggle-button-off-backround-color: var(--gray-300);
--toggle-button-off-background-hover-color: var(--gray-350);
--toggle-button-background-color: var(--background-accent-button);
--toggle-button-background-hover-color: var(--highlight-accent-button-hover);
--toggle-button-off-background-color: var(--checkbox-border-normal);
--toggle-button-circle-color: var(--background-normal);
/* file-items */
--file-items-background-color: var(--background-normal);
--file-items-color: var(--text-normal);
--file-items-ext-color: var( --text-secondary);
--file-items-ext-color: var(--text-secondary);
--file-items-border-color: var(--border-divider);
--file-items-chat-background-color:#EFEFEF;
--file-items-chat-hover-background-color:var(--highlight-button-hover);
--file-items-chat-pressed-background-color:var(--highlight-button-pressed);
--file-items-chat-background-color: var(--background-normal-element);
--file-items-chat-hover-background-color: var(--highlight-button-hover);
--file-items-chat-pressed-background-color: var(--highlight-button-pressed);
/* tooltip */
--tooltip-background-color: var(--background-normal);
@ -143,9 +152,8 @@
--tooltip-border-color: var(--border-divider);
--tooltip-shadow: 0px 1px 4px -1px #00000033;
/* loader */
--loader-border-color: var(--background-primary-dialog-button);
--loader-border-color: var(--background-accent-button);
/* tool fallback */
--tool-fallback-color: var(--text-normal);
@ -155,9 +163,9 @@
--checkbox-bg-color: var(--background-normal);
--checkbox-bg-hover-color: var(--highlight-button-hover);
--checkbox-bg-pressed-color: var(--highlight-button-pressed);
--checkbox-active-color: var(--background-primary-dialog-button);
--checkbox-active-hover-color: var(--highlight-primary-dialog-button-hover);
--checkbox-active-pressed-color: var(--highlight-primary-dialog-button-pressed);
--checkbox-active-color: var(--background-accent-button);
--checkbox-active-hover-color: var(--highlight-accent-button-hover);
--checkbox-active-pressed-color: var(--highlight-accent-button-pressed);
--checkbox-active-icon-color: var(--background-normal);
/* pages */
@ -174,67 +182,66 @@
--ai-provider-item-color: var(--text-normal);
--ai-provider-item-description-color: var(--text-secondary);
--ai-provider-item-background-color: var(--background-normal);
--ai-provider-item-icon-color: #1C1B1F;
--ai-provider-item-shadow: 0px 1px 2px 0px #0000000F, 0px 1px 3px 0px #0000001A;
--ai-provider-item-shadow: 0px 1px 2px 0px #0000000f, 0px 1px 3px 0px #0000001a;
/* settings servers */
--servers-description-color: var(--text-tertiary);
--servers-description-color: var(--text-tertiary);
--servers-edit-config-json-background-color: var(--background-normal-element-light);
--servers-edit-config-json-header-color: var( --text-secondary);
--servers-edit-config-json-header-color: var(--text-secondary);
--servers-edit-config-json-lang-color: var(--text-tertiary);
--servers-edit-config-json-editor-border-color: var(--border-divider);
--servers-edit-config-json-editor-background-color: var(--background-normal);
--servers-edit-config-buttons-border-color: var(--border-divider);
--servers-available-tools-border-color: var(--gray-100);
--servers-available-tools-border-color: var(--border-divider);
--servers-available-tools-header-color: var(--text-normal);
--servers-available-tools-item-name-color: var(--text-normal);
--servers-available-tools-sub-header-color: var(--text-tertiary);
--servers-available-tools-current-tool-color: var(--icon-gray-primary);
--servers-available-tools-current-tool-color: var(--text-normal);
--servers-available-tools-item-background-color: var(--background-normal-element-light);
--servers-available-tools-item-hover-background-color: var(--highlight-button-hover);
--servers-available-tools-item-active-background-color: var(--highlight-button-pressed);
--servers-available-tools-item-name-color:var(--text-normal);
--servers-logs-dialog-border-color:var(--border-divider);
--servers-logs-dialog-log-color:var(--text-normal);
--servers-logs-dialog-border-color: var(--border-divider);
--servers-logs-dialog-log-color: var(--text-normal);
/* chat */
--chat-welcome-color: var(--text-normal);
--chat-welcome-description-color: var( --text-secondary);
--chat-welcome-description-color: var(--text-secondary);
--chat-composer-background-color: var(--background-normal-element-light);
--chat-composer-border-color: var(--border-divider);
--chat-composer-hover-border-color: var(--highlight-button-hover);
--chat-composer-active-border-color: var(--background-primary-dialog-button);
--chat-composer-active-border-color: var(--background-accent-button);
--chat-composer-text-color: var(--text-normal);
--chat-composer-placeholder-color: var(--text-secondary);
--chat-composer-action-send-color: var(--background-normal);
--chat-composer-action-send-background-color: var(--background-primary-dialog-button);
--chat-composer-action-send-background-hover-color: var(--highlight-primary-dialog-button-hover);
--chat-composer-action-send-background-pressed-color: var(--highlight-primary-dialog-button-pressed);
--chat-composer-action-send-background-color: var(--background-accent-button);
--chat-composer-action-send-background-hover-color: var(--highlight-accent-button-hover);
--chat-composer-action-send-background-pressed-color: var(--highlight-accent-button-pressed);
--chat-user-message-background: var(--highlight-button-hover);
--chat-user-message-color: var(--text-normal);
--chat-message-color: var(--text-normal);
--chat-message-blockquote-color: #848484;
--chat-message-link-color: #446ECA;
--chat-message-blockquote-color: var(--border-control-focus);
--chat-message-link-color: var(--text-link);
--chat-message-divider-color: var(--border-divider);
--chat-message-th-color: var(--text-normal);
--chat-message-td-color: var(--text-normal);
--chat-message-code-block-background-color: var(--background-normal-element-light);
--chat-message-code-block-border-color: var(--border-divider);
--chat-message-code-block-header-color: var( --text-secondary);
--chat-message-code-block-header-color: var(--text-secondary);
--chat-message-code-block-pre-background-color: var(--background-normal);
--chat-message-error-color: #991b1b;
--chat-message-error-border-color: #f62211;
--chat-message-error-color: var(--text-negative);
--chat-message-error-border-color: var(--border-error);
--chat-message-tool-call-header-color: var(--text-normal);
--chat-message-tool-call-name-color: var(--text-normal);
--chat-message-tool-call-name-background-color: var(--gray-100);
--chat-message-tool-call-name-background-color: var(--background-normal-element);
--chat-message-tool-call-body-background-color: var(--background-normal-element-light);
--chat-message-tool-call-body-color:var( --text-secondary);
--chat-message-tool-call-body-color: var(--text-secondary);
--chat-message-tool-call-pre-border-color: var(--border-divider);
--chat-message-tool-call-pre-background-color:var(--background-normal);
--chat-message-tool-call-pre-color:var(--text-normal);
--chat-message-tool-call-pre-background-color: var(--background-normal);
--chat-message-tool-call-pre-color: var(--text-normal);
--chat-message-analyze-color: var(--text-normal);
}