mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-28 22:19:41 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

add colors to system

Browse source
This commit is contained in:
Mutasem 2021-11-01 13:48:50 +01:00
parent e18b0fe355
commit 17730caffd
4 changed files with 24 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -277,6 +277,24 @@
var(--color-background-xlight-l) var(--color-background-xlight-l)
); );
--color-canvas-dot-h: 204;
--color-canvas-dot-s: 13.2%;
--color-canvas-dot-l: 85.1%;
--color-canvas-dot: hsl(
var(--color-canvas-dot-h),
var(--color-canvas-dot-s),
var(--color-canvas-dot-l)
);
--color-canvas-background-h: 260;
--color-canvas-background-s: 100%;
--color-canvas-background-l: 99.4%;
--color-canvas-background: hsl(
var(--color-canvas-background-h),
var(--color-canvas-background-s),
var(--color-canvas-background-l)
);
--border-radius-xlarge: 12px; --border-radius-xlarge: 12px;
--border-radius-large: 8px; --border-radius-large: 8px;
--border-radius-base: 4px; --border-radius-base: 4px;

2
packages/editor-ui/src/n8n-theme-variables.scss
View file

@ -28,8 +28,6 @@ $--badge-warning-color: #6b5900;
// Warning tooltip // Warning tooltip
$--warning-tooltip-color: #ff8080; $--warning-tooltip-color: #ff8080;
$--custom-node-view-background : #FDFCFF;
// Table // Table
$--custom-table-background-main: $--custom-header-background; $--custom-table-background-main: $--custom-header-background;
$--custom-table-background-stripe-color: #f6f6f6; $--custom-table-background-stripe-color: #f6f6f6;

2
packages/editor-ui/src/n8n-theme.scss
View file

@ -4,7 +4,7 @@
body { body {
background-color: $--custom-node-view-background; background-color: var(--color-canvas-background);
} }
.clickable { .clickable {

9
packages/editor-ui/src/views/NodeView.vue
View file

@ -396,9 +396,10 @@ export default mixins(
'background-position': `left ${offsetPosition[0]}px top ${offsetPosition[1]}px`, 'background-position': `left ${offsetPosition[0]}px top ${offsetPosition[1]}px`,
}; };
if (squareSize > 10.5) { if (squareSize > 10.5) {
const dotColor = getStyleTokenValue('--color-canvas-dot');
return { return {
...styles, ...styles,
'background-image': `radial-gradient(circle at ${dotPosition}px ${dotPosition}px, #D4DADE ${dotSize}px, transparent 0)`, 'background-image': `radial-gradient(circle at ${dotPosition}px ${dotPosition}px, ${dotColor} ${dotSize}px, transparent 0)`,
}; };
} }
return styles; return styles;
@ -1430,7 +1431,7 @@ export default mixins(
Endpoint: ['Dot', { radius: 5 }], Endpoint: ['Dot', { radius: 5 }],
DragOptions: { cursor: 'pointer', zIndex: 5000 }, DragOptions: { cursor: 'pointer', zIndex: 5000 },
PaintStyle: { strokeWidth: 2, stroke: getStyleTokenValue('--color-foreground-dark')}, PaintStyle: { strokeWidth: 2, stroke: getStyleTokenValue('--color-foreground-dark')},
HoverPaintStyle: { stroke: '#ff6d5a', lineWidth: 4 }, HoverPaintStyle: { stroke: getStyleTokenValue('--color-primary'), lineWidth: 4 },
ConnectionOverlays: CONNECTOR_ARROW_OVERLAYS, ConnectionOverlays: CONNECTOR_ARROW_OVERLAYS,
Container: '#node-view', Container: '#node-view',
}); });
@ -2753,7 +2754,7 @@ export default mixins(
.connection-output-items-label { .connection-output-items-label {
border-radius: 7px; border-radius: 7px;
background-color: rgba( $--custom-node-view-background, 1 ); background-color: var(--color-canvas-background);
font-size: 0.7em; font-size: 0.7em;
font-weight: var(--font-weight-regular); font-weight: var(--font-weight-regular);
line-height: 1.3em; line-height: 1.3em;
@ -2787,7 +2788,7 @@ export default mixins(
.node-input-endpoint-label, .node-input-endpoint-label,
.node-output-endpoint-label { .node-output-endpoint-label {
background-color: $--custom-node-view-background; background-color: var(--color-canvas-background);
border-radius: 7px; border-radius: 7px;
font-size: 0.7em; font-size: 0.7em;
padding: 2px; padding: 2px;