mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-28 14:09:43 -08:00
Code Issues Actions 2 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)
);
--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-large: 8px;
--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-color: #ff8080;
$--custom-node-view-background : #FDFCFF;
// Table
$--custom-table-background-main: $--custom-header-background;
$--custom-table-background-stripe-color: #f6f6f6;

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

@ -4,7 +4,7 @@
body {
background-color: $--custom-node-view-background;
background-color: var(--color-canvas-background);
}
.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`,
};
if (squareSize > 10.5) {
const dotColor = getStyleTokenValue('--color-canvas-dot');
return {
...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;
@ -1430,7 +1431,7 @@ export default mixins(
Endpoint: ['Dot', { radius: 5 }],
DragOptions: { cursor: 'pointer', zIndex: 5000 },
PaintStyle: { strokeWidth: 2, stroke: getStyleTokenValue('--color-foreground-dark')},
HoverPaintStyle: { stroke: '#ff6d5a', lineWidth: 4 },
HoverPaintStyle: { stroke: getStyleTokenValue('--color-primary'), lineWidth: 4 },
ConnectionOverlays: CONNECTOR_ARROW_OVERLAYS,
Container: '#node-view',
});
@ -2753,7 +2754,7 @@ export default mixins(
.connection-output-items-label {
border-radius: 7px;
background-color: rgba( $--custom-node-view-background, 1 );
background-color: var(--color-canvas-background);
font-size: 0.7em;
font-weight: var(--font-weight-regular);
line-height: 1.3em;
@ -2787,7 +2788,7 @@ export default mixins(
.node-input-endpoint-label,
.node-output-endpoint-label {
background-color: $--custom-node-view-background;
background-color: var(--color-canvas-background);
border-radius: 7px;
font-size: 0.7em;
padding: 2px;