mohiit1502/Automata
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Add support for dark mode node icons and colors (#9412)

Browse Source 
Co-authored-by: Giulio Andreini <g.andreini@gmail.com>
This commit is contained in:
Elias Meire
2024-06-06 13:34:30 +02:00
committed by GitHub
parent 68e856d155
commit 600013a1ab
294 changed files with 1421 additions and 519 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
packages/editor-ui/src/n8n-theme.scss
View File

@@ -2,175 +2,6 @@
@import 'styles';
:root {
--node-type-background-l: 95%;
--node-type-supplemental-label-color-h: 235;
--node-type-supplemental-label-color-s: 28%;
--node-type-supplemental-label-color-l: 40%;
--node-type-supplemental-label-color: hsl(
var(--node-type-supplemental-label-color-h),
var(--node-type-supplemental-label-color-s),
var(--node-type-supplemental-label-color-l)
);
--node-type-supplemental-color-h: 235;
--node-type-supplemental-color-s: 28%;
--node-type-supplemental-color-l: 60%;
--node-type-supplemental-icon: var(--color-foreground-dark);
--node-type-supplemental-color: hsl(
var(--node-type-supplemental-color-h),
var(--node-type-supplemental-color-s),
var(--node-type-supplemental-color-l)
);
--node-type-supplemental-background: hsl(
var(--node-type-supplemental-color-h),
var(--node-type-supplemental-color-s),
var(--node-type-background-l)
);
--node-type-supplemental-connector-color: var(--color-foreground-dark);
--node-type-ai_chain-color-h: var(--node-type-supplemental-color-h);
--node-type-ai_chain-color-s: var(--node-type-supplemental-color-s);
--node-type-ai_chain-color-l: var(--node-type-supplemental-color-l);
--node-type-ai_chain-color: hsl(
var(--node-type-ai_chain-color-h),
var(--node-type-ai_chain-color-s),
var(--node-type-ai_chain-color-l)
);
--node-type-chain-background: hsl(
var(--node-type-ai_chain-color-h),
var(--node-type-ai_chain-color-s),
var(--node-type-background-l)
);
--node-type-ai_document-color-h: var(--node-type-supplemental-color-h);
--node-type-ai_document-color-s: var(--node-type-supplemental-color-s);
--node-type-ai_document-color-l: var(--node-type-supplemental-color-l);
--node-type-ai_document-color: hsl(
var(--node-type-ai_document-color-h),
var(--node-type-ai_document-color-s),
var(--node-type-ai_document-color-l)
);
--node-type-ai_document-background: hsl(
var(--node-type-ai_document-color-h),
var(--node-type-ai_document-color-s),
var(--node-type-background-l)
);
--node-type-ai_embedding-color-h: var(--node-type-supplemental-color-h);
--node-type-ai_embedding-color-s: var(--node-type-supplemental-color-s);
--node-type-ai_embedding-color-l: var(--node-type-supplemental-color-l);
--node-type-ai_embedding-color: hsl(
var(--node-type-ai_embedding-color-h),
var(--node-type-ai_embedding-color-s),
var(--node-type-ai_embedding-color-l)
);
--node-type-ai_embedding-background: hsl(
var(--node-type-ai_embedding-color-h),
var(--node-type-ai_embedding-color-s),
var(--node-type-background-l)
);
--node-type-ai_languageModel-color-h: var(--node-type-supplemental-color-h);
--node-type-ai_languageModel-color-s: var(--node-type-supplemental-color-s);
--node-type-ai_languageModel-color-l: var(--node-type-supplemental-color-l);
--node-type-ai_languageModel-color: hsl(
var(--node-type-ai_languageModel-color-h),
var(--node-type-ai_languageModel-color-s),
var(--node-type-ai_languageModel-color-l)
);
--node-type-ai_languageModel-background: hsl(
var(--node-type-ai_languageModel-color-h),
var(--node-type-ai_languageModel-color-s),
var(--node-type-background-l)
);
--node-type-ai_memory-color-h: var(--node-type-supplemental-color-h);
--node-type-ai_memory-color-s: var(--node-type-supplemental-color-s);
--node-type-ai_memory-color-l: var(--node-type-supplemental-color-l);
--node-type-ai_memory-color: hsl(
var(--node-type-ai_memory-color-h),
var(--node-type-ai_memory-color-s),
var(--node-type-ai_memory-color-l)
);
--node-type-ai_memory-background: hsl(
var(--node-type-ai_memory-color-h),
var(--node-type-ai_memory-color-s),
var(--node-type-background-l)
);
--node-type-ai_outputParser-color-h: var(--node-type-supplemental-color-h);
--node-type-ai_outputParser-color-s: var(--node-type-supplemental-color-s);
--node-type-ai_outputParser-color-l: var(--node-type-supplemental-color-l);
--node-type-ai_outputParser-color: hsl(
var(--node-type-ai_outputParser-color-h),
var(--node-type-ai_outputParser-color-s),
var(--node-type-ai_outputParser-color-l)
);
--node-type-ai_outputParser-background: hsl(
var(--node-type-ai_outputParser-color-h),
var(--node-type-ai_outputParser-color-s),
var(--node-type-background-l)
);
--node-type-ai_tool-color-h: var(--node-type-supplemental-color-h);
--node-type-ai_tool-color-s: var(--node-type-supplemental-color-s);
--node-type-ai_tool-color-l: var(--node-type-supplemental-color-l);
--node-type-ai_tool-color: hsl(
var(--node-type-ai_tool-color-h),
var(--node-type-ai_tool-color-s),
var(--node-type-ai_tool-color-l)
);
--node-type-ai_tool-background: hsl(
var(--node-type-ai_tool-color-h),
var(--node-type-ai_tool-color-s),
var(--node-type-background-l)
);
--node-type-ai_retriever-color-h: var(--node-type-supplemental-color-h);
--node-type-ai_retriever-color-s: var(--node-type-supplemental-color-s);
--node-type-ai_retriever-color-l: var(--node-type-supplemental-color-l);
--node-type-ai_retriever-color: hsl(
var(--node-type-ai_retriever-color-h),
var(--node-type-ai_retriever-color-s),
var(--node-type-ai_retriever-color-l)
);
--node-type-ai_retriever-background: hsl(
var(--node-type-ai_retriever-color-h),
var(--node-type-ai_retriever-color-s),
var(--node-type-background-l)
);
--node-type-ai_textSplitter-color-h: var(--node-type-supplemental-color-h);
--node-type-ai_textSplitter-color-s: var(--node-type-supplemental-color-s);
--node-type-ai_textSplitter-color-l: var(--node-type-supplemental-color-l);
--node-type-ai_textSplitter-color: hsl(
var(--node-type-ai_textSplitter-color-h),
var(--node-type-ai_textSplitter-color-s),
var(--node-type-ai_textSplitter-color-l)
);
--node-type-ai_textSplitter-background: hsl(
var(--node-type-ai_textSplitter-color-h),
var(--node-type-ai_textSplitter-color-s),
var(--node-type-background-l)
);
--node-type-ai_vectorRetriever-color-h: var(--node-type-supplemental-color-h);
--node-type-ai_vectorRetriever-color-s: var(--node-type-supplemental-color-s);
--node-type-ai_vectorRetriever-color-l: var(--node-type-supplemental-color-l);
--node-type-ai_vectorRetriever-color: hsl(
var(--node-type-ai_vectorRetriever-color-h),
var(--node-type-ai_vectorRetriever-color-s),
var(--node-type-ai_vectorRetriever-color-l)
);
--node-type-ai_vectorRetriever-background: hsl(
var(--node-type-ai_vectorRetriever-color-h),
var(--node-type-ai_vectorRetriever-color-s),
var(--node-type-background-l)
);
--node-type-ai_vectorStore-color-h: var(--node-type-supplemental-color-h);
--node-type-ai_vectorStore-color-s: var(--node-type-supplemental-color-s);
--node-type-ai_vectorStore-color-l: var(--node-type-supplemental-color-l);
--node-type-ai_vectorStore-color: hsl(
var(--node-type-ai_vectorStore-color-h),
var(--node-type-ai_vectorStore-color-s),
var(--node-type-ai_vectorStore-color-l)
);
--node-type-ai_vectorStore-background: hsl(
var(--node-type-ai_vectorStore-color-h),
var(--node-type-ai_vectorStore-color-s),
var(--node-type-background-l)
);
// Using native css variable enables us to use this value in JS
--header-height: 65;
--chat-width: 350;
@@ -187,6 +18,7 @@
--chat--header--color: var(--color-text-dark);
--chat--header--border-bottom: var(--border-base);
--chat--close--button--color-hover: var(--color-primary);
// Message styles
--chat--message--padding: var(--spacing-3xs);
--chat--message--font-size: 14px;
@@ -196,6 +28,7 @@
--chat--message--user--color: var(--color-text-dark);
--chat--message--user--background: var(--color-success-tint-1);
--chat--message--user--border: 1px solid var(--color-success-light-2);
// Chat input
--chat--input--font-size: var(--font-size-s);
--chat--input--send--button--color: var(--color-success);