fix(editor): Fix issues in dark mode (#9068)

Co-authored-by: Giulio Andreini <andreini@netseven.it>
This commit is contained in:
Tomi Turtiainen
2024-04-08 09:21:54 +03:00
committed by GitHub
parent df56153f8b
commit 7467aa30e6
8 changed files with 14 additions and 9 deletions

View File

@@ -96,7 +96,7 @@
--color-json-boolean: var(--prim-color-alt-a); --color-json-boolean: var(--prim-color-alt-a);
--color-json-number: var(--prim-color-alt-a); --color-json-number: var(--prim-color-alt-a);
--color-json-string: var(--prim-color-secondary-tint-200); --color-json-string: var(--prim-color-secondary-tint-200);
--color-json-key: var(--prim-gray-670); --color-json-key: var(--color-text-dark);
--color-json-brackets: var(--prim-gray-670); --color-json-brackets: var(--prim-gray-670);
--color-json-brackets-hover: var(--prim-color-alt-e); --color-json-brackets-hover: var(--prim-color-alt-e);
--color-json-line: var(--prim-gray-200); --color-json-line: var(--prim-gray-200);
@@ -191,6 +191,9 @@
// Input Triple // Input Triple
--color-background-input-triple: var(--prim-gray-800); --color-background-input-triple: var(--prim-gray-800);
// Node error
--color-node-error-output-text-color: var(--prim-color-alt-c-tint-150);
// Various // Various
--color-info-tint-1: var(--prim-gray-420); --color-info-tint-1: var(--prim-gray-420);
--color-info-tint-2: var(--prim-gray-740); --color-info-tint-2: var(--prim-gray-740);

View File

@@ -267,6 +267,9 @@
// Input Triple // Input Triple
--color-background-input-triple: var(--color-background-light); --color-background-input-triple: var(--color-background-light);
// Node error
--color-node-error-output-text-color: var(--color-danger);
// Various // Various
--color-avatar-accent-1: var(--prim-gray-120); --color-avatar-accent-1: var(--prim-gray-120);
--color-avatar-accent-2: var(--prim-color-alt-e-shade-100); --color-avatar-accent-2: var(--prim-color-alt-e-shade-100);

View File

@@ -99,7 +99,7 @@ export default defineComponent({
z-index: 10; z-index: 10;
width: 100%; width: 100%;
height: calc(100% - 50px); height: calc(100% - 50px);
background-color: var(--color-background-base); background-color: var(--color-run-data-background);
overflow: hidden; overflow: hidden;
text-align: center; text-align: center;

View File

@@ -1294,10 +1294,10 @@ export default defineComponent({
&.error { &.error {
path { path {
fill: var(--node-error-output-color); fill: var(--color-node-error-output-text-color);
} }
rect { rect {
stroke: var(--node-error-output-color); stroke: var(--color-node-error-output-text-color);
} }
} }
@@ -1436,7 +1436,7 @@ export default defineComponent({
} }
.node-output-endpoint-label.node-connection-category-error { .node-output-endpoint-label.node-connection-category-error {
color: var(--node-error-output-color); color: var(--color-node-error-output-text-color);
} }
.node-output-endpoint-label { .node-output-endpoint-label {

View File

@@ -130,7 +130,7 @@ defineExpose({
} }
.clear { .clear {
background-color: $node-creator-search-clear-color; background-color: transparent;
padding: 0; padding: 0;
border: none; border: none;
cursor: pointer; cursor: pointer;

View File

@@ -600,7 +600,7 @@ export const nodeBase = defineComponent({
nodeTypeData, nodeTypeData,
this.__getEndpointColor(NodeConnectionType.Main), this.__getEndpointColor(NodeConnectionType.Main),
), ),
fill: 'var(--node-error-output-color)', fill: 'var(--color-danger)',
}, },
cssClass: `dot-${type}-endpoint`, cssClass: `dot-${type}-endpoint`,
}; };

View File

@@ -170,7 +170,6 @@
var(--node-type-ai_vectorStore-color-s), var(--node-type-ai_vectorStore-color-s),
var(--node-type-background-l) var(--node-type-background-l)
); );
--node-error-output-color: #991818;
--chat--spacing: var(--spacing-s); --chat--spacing: var(--spacing-s);

View File

@@ -113,7 +113,7 @@ export const CONNECTOR_PAINT_STYLE_DATA: PaintStyle = {
export const getConnectorColor = (type: ConnectionTypes, category?: string): string => { export const getConnectorColor = (type: ConnectionTypes, category?: string): string => {
if (category === 'error') { if (category === 'error') {
return '--node-error-output-color'; return '--color-node-error-output-text-color';
} }
if (type === NodeConnectionType.Main) { if (type === NodeConnectionType.Main) {