mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

add colors for json

Browse source
This commit is contained in:
Mutasem 2022-04-06 15:47:16 +02:00
parent 42217dda5c
commit 7df4d3afb2
2 changed files with 21 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
packages/design-system/theme/src/_tokens.scss
View file

@ -329,6 +329,17 @@
var(--color-canvas-background-l) var(--color-canvas-background-l)
); );
--color-json-default: #5045A1;
--color-json-null: var(--color-danger);
--color-json-boolean: #1d8ce0;
--color-json-number: #1d8ce0;
--color-json-string: #5045A1;
--color-json-key: var(--color-text-dark);
--color-json-brackets: var(--color-text-dark);
--color-json-brackets-hover: #1890ff;
--color-json-line: #bfcbd9;
--color-json-highlight: #EBEDF3;
--border-radius-xlarge: 12px; --border-radius-xlarge: 12px;
--border-radius-large: 8px; --border-radius-large: 8px;
--border-radius-base: 4px; --border-radius-base: 4px;

20
packages/editor-ui/src/components/RunData.vue
View file

@ -957,43 +957,43 @@ export default mixins(
<style lang="scss"> <style lang="scss">
.vjs-tree { .vjs-tree {
color: #5045A1; color: var(--color-json-default);
} }
.vjs-tree.is-highlight-selected { .vjs-tree.is-highlight-selected {
background-color: #EBEDF3; background-color: var(--color-json-highlight);
} }
.vjs-tree .vjs-value__null { .vjs-tree .vjs-value__null {
color: var(--color-danger); color: var(--color-json-null);
} }
.vjs-tree .vjs-value__boolean { .vjs-tree .vjs-value__boolean {
color: #1d8ce0; color: var(--color-json-boolean);
} }
.vjs-tree .vjs-value__number { .vjs-tree .vjs-value__number {
color: #1d8ce0; color: var(--color-json-number);
} }
.vjs-tree .vjs-value__string { .vjs-tree .vjs-value__string {
color: #5045A1; color: var(--color-json-string);
} }
.vjs-tree .vjs-key { .vjs-tree .vjs-key {
color: var(--color-text-dark); color: var(--color-json-key);
} }
.vjs-tree .vjs-tree__brackets { .vjs-tree .vjs-tree__brackets {
color: var(--color-text-dark); color: var(--color-json-brackets);
} }
.vjs-tree .vjs-tree__brackets:hover { .vjs-tree .vjs-tree__brackets:hover {
color: #1890ff color: var(--color-json-brackets-hover);
} }
.vjs-tree .vjs-tree__content.has-line { .vjs-tree .vjs-tree__content.has-line {
border-left: 1px dotted #bfcbd9 border-left: 1px dotted var(--color-json-line);
} }
</style> </style>