mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-01-11 12:57:29 -08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Some experiment in progress.

Browse source
This commit is contained in:
Giulio Andreini 2024-12-27 17:47:42 +01:00
parent 66f8c9e249
commit 61ee027f69
12 changed files with 137 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
packages/design-system/src/components/N8nButton/Button.scss
View file

@ -17,6 +17,18 @@
padding: $button-padding-vertical $button-padding-horizontal unquote($important);
font-size: $button-font-size unquote($important);
// Buttons experiment
/* border: 0;
background-color: #0000;
background-image: linear-gradient(141deg, #077ac7, #6b21ef 100%, #c5080f);
box-shadow:
inset 0 1px 1px 0 #fff3,
0 1px 2px 0 #08080833,
0 4px 4px 0 #08080814,
0 7px 0 -12px #077ac7,
inset 0 6px 12px 0 #ffffff1f;
transition: box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
*/
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;

7
packages/design-system/src/components/N8nCard/Card.vue
View file

@ -44,7 +44,8 @@ const classes = computed(() => ({
.card {
border-radius: var(--border-radius-large);
border: var(--border-base);
background-color: var(--color-background-xlight);
border: var(--card-border);
background-color: var(--card-background);
padding: var(--spacing-s);
display: flex;
flex-direction: row;
@ -52,6 +53,10 @@ const classes = computed(() => ({
align-items: center;
}
.card:hover {
background-color: var(--card-background-hover);
}
.header,
.footer {
display: flex;

2
packages/design-system/src/components/N8nMenu/Menu.vue
View file

@ -131,7 +131,7 @@ const onSelect = (item: IMenuItem): void => {
height: 100%;
display: flex;
flex-direction: column;
background-color: var(--menu-background, var(--color-background-xlight));
background-color: var(--color-menu-background, var(--color-background-xlight));
overflow: hidden;
}

2
packages/design-system/src/components/N8nMenuItem/MenuItem.vue
View file

@ -127,7 +127,7 @@ const isItemActive = (item: IMenuItem): boolean => {
v-if="item.icon"
:class="$style.icon"
:icon="item.icon"
:size="item.customIconSize || 'large'"
:size="item.customIconSize || 'medium'"
/>
<span v-if="!compact" :class="$style.label">{{ item.label }}</span>
<span v-if="!item.icon && compact" :class="[$style.label, $style.compactLabel]">{{

66
packages/design-system/src/css/_primitives.scss
View file

@ -3,18 +3,44 @@
// They can be only mapped to tokens.
// Tokens should be used instead in components an other UI elements
@mixin primitives {
// Gray
--prim-gray-h: 220;
@font-face {
font-family: 'Geomanist Light';
src: url('https://cdn.prod.website-files.com/672e2cf8e672665eaf629f92/672e2cf8e672665eaf629ff9_Geomanist-Light.otf')
format('opentype');
}
--prim-gray-820: hsl(var(--prim-gray-h), 1%, 18%);
--prim-gray-800: hsl(var(--prim-gray-h), 1%, 20%);
--prim-gray-780: hsl(var(--prim-gray-h), 1%, 22%);
--prim-gray-740: hsl(var(--prim-gray-h), 2%, 26%);
--prim-gray-670: hsl(var(--prim-gray-h), 2%, 33%);
--prim-gray-540: hsl(var(--prim-gray-h), 4%, 46%);
--prim-gray-490: hsl(var(--prim-gray-h), 3%, 51%);
--prim-gray-420: hsl(var(--prim-gray-h), 4%, 58%);
@font-face {
font-family: 'Geomanist Regular';
src: url('https://cdn.prod.website-files.com/672e2cf8e672665eaf629f92/672e2cf8e672665eaf62a00c_Geomanist-Regular.otf')
format('opentype');
}
@font-face {
font-family: 'Geomanist Book';
src: url('https://cdn.prod.website-files.com/672e2cf8e672665eaf629f92/672e2cf8e672665eaf62a032_Geomanist-Book.otf')
format('opentype');
}
@font-face {
font-family: 'Geomanist Medium';
src: url('https://cdn.prod.website-files.com/672e2cf8e672665eaf629f92/672e2cf8e672665eaf62a05b_Geomanist-Medium.otf')
format('opentype');
}
@mixin primitives {
--prim-gray-1000: hsl(var(--prim-gray-h), 1%, 0%);
--prim-gray-940: hsl(var(--prim-gray-h), 20%, 6%);
--prim-gray-900: hsl(var(--prim-gray-h), 18%, 10%);
--prim-gray-870: hsl(var(--prim-gray-h), 16%, 13%);
--prim-gray-840: hsl(var(--prim-gray-h), 13%, 16%);
--prim-gray-820: hsl(var(--prim-gray-h), 6%, 18%);
--prim-gray-800: hsl(var(--prim-gray-h), 5%, 20%);
--prim-gray-780: hsl(var(--prim-gray-h), 5%, 22%);
--prim-gray-740: hsl(var(--prim-gray-h), 5%, 26%);
--prim-gray-670: hsl(var(--prim-gray-h), 5%, 33%);
--prim-gray-540: hsl(var(--prim-gray-h), 5%, 46%);
--prim-gray-490: hsl(var(--prim-gray-h), 5%, 51%);
--prim-gray-420: hsl(var(--prim-gray-h), 5%, 58%);
--prim-gray-320: hsl(var(--prim-gray-h), 10%, 68%);
--prim-gray-200: hsl(var(--prim-gray-h), 18%, 80%);
--prim-gray-120: hsl(var(--prim-gray-h), 25%, 88%);
@ -470,5 +496,21 @@
}
:root {
@include primitives;
// Gray hue
body {
--prim-gray-h: 220;
@include primitives;
}
body[data-theme='dark'] {
--prim-gray-h: 260;
@include primitives;
}
@media (prefers-color-scheme: dark) {
body:not([data-theme]) {
--prim-gray-h: 260;
@include primitives;
}
}
}

30
packages/design-system/src/css/_tokens.dark.scss
View file

@ -5,7 +5,7 @@
--color-danger: var(--prim-color-alt-k);
// Text
--color-text-dark: var(--prim-gray-40);
--color-text-dark: var(--prim-gray-0);
--color-text-base: var(--prim-gray-200);
--color-text-light: var(--prim-gray-320);
--color-text-lighter: var(--prim-gray-740);
@ -22,10 +22,10 @@
// Background
--color-background-dark: var(--prim-gray-70);
--color-background-medium: var(--prim-gray-540);
--color-background-base: var(--prim-gray-670);
--color-background-base: var(--prim-gray-740);
--color-background-light-base: var(--prim-gray-780);
--color-background-light: var(--prim-gray-820);
--color-background-xlight: var(--prim-gray-740);
--color-background-light: var(--prim-gray-940);
--color-background-xlight: var(--prim-gray-840);
--box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.1);
--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.2);
@ -207,6 +207,14 @@
// Notification
--color-notification-background: var(--prim-gray-740);
// Main header
--main-header-background: var(--prim-gray-870);
// Card
--card-background: var(--prim-gray-870);
--card-background-hover: var(--prim-gray-820);
--card-border: var(--border-width-base) var(--border-style-base) var(--prim-gray-740);
// Execution
--execution-card-background-hover: var(--color-foreground-base);
--execution-selector-background: var(--prim-gray-740);
@ -215,7 +223,7 @@
--execution-card-text-waiting: var(--prim-color-secondary-tint-100);
// NDV
--color-run-data-background: var(--prim-gray-800);
--color-run-data-background: var(--prim-gray-870);
--color-ndv-droppable-parameter: var(--prim-color-primary);
--color-ndv-droppable-parameter-background: var(--prim-color-primary-alpha-010);
--color-ndv-droppable-parameter-active-background: var(--prim-color-alt-a-alpha-015);
@ -278,6 +286,11 @@
// Text highlight
--color-text-highlight-background: var(--prim-color-alt-d-shade-600);
// Menu
--color-menu-background: var(--prim-gray-870);
--color-menu-hover-background: var(--prim-gray-670);
--color-menu-active-background: var(--prim-gray-670);
// AI
--node-type-background-l: 20%;
--node-type-supplemental-label-color-h: 235;
@ -452,7 +465,7 @@
--color-info-tint-2: var(--prim-gray-740);
--border-color-base: var(--color-foreground-base);
--border-color-light: var(--color-foreground-light);
--border-base: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
--border-base: var(--border-width-base) var(--border-style-base) var(--prim-gray-780);
--node-type-supplemental-label-color-l: 100%;
--node-type-supplemental-label-color: hsl(
var(--node-type-supplemental-label-color-h),
@ -462,13 +475,10 @@
--color-configurable-node-name: var(--color-text-dark);
--color-secondary-link: var(--prim-color-secondary-tint-200);
--color-secondary-link-hover: var(--prim-color-secondary-tint-100);
//Params
--color-icon-base: var(--color-text-light);
--color-icon-hover: var(--prim-color-primary);
--color-menu-background: var(--prim-gray-740);
--color-menu-hover-background: var(--prim-gray-670);
--color-menu-active-background: var(--prim-gray-670);
}
body[data-theme='dark'] {

43
packages/design-system/src/css/_tokens.scss
View file

@ -41,8 +41,8 @@
--color-danger-tint-2: var(--prim-color-alt-c-tint-450);
// Text
--color-text-dark: var(--prim-gray-740);
--color-text-base: var(--prim-gray-540);
--color-text-dark: var(--prim-gray-940);
--color-text-base: var(--prim-gray-840);
--color-text-light: var(--prim-gray-420);
--color-text-lighter: var(--prim-gray-120);
--color-text-xlight: var(--prim-gray-0);
@ -265,6 +265,14 @@
// Notification
--color-notification-background: var(--color-background-xlight);
// Main header
--main-header-background: var(--color-background-xlight);
// Card
--card-background: var(--color-background-xlight);
--card-background-hover: var(--prim-gray-10);
--card-border: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
// Execution
--execution-card-border-new: var(--prim-gray-200);
--execution-card-border-success: var(--prim-color-alt-a-tint-300);
@ -351,6 +359,11 @@
// Text highlight
--color-text-highlight-background: var(--prim-color-alt-d-shade-150);
// Menu
--color-menu-background: var(--prim-gray-0);
--color-menu-hover-background: var(--prim-gray-120);
--color-menu-active-background: var(--prim-gray-120);
// AI
--node-type-background-l: 95%;
--node-type-supplemental-label-color-h: 235;
@ -533,11 +546,6 @@
--color-secondary-link: var(--color-secondary);
--color-secondary-link-hover: var(--color-secondary-shade-1);
// Menu
--color-menu-background: var(--prim-gray-0);
--color-menu-hover-background: var(--prim-gray-120);
--color-menu-active-background: var(--prim-gray-120);
// Generated Color Shades from 50 to 950
// Not yet used in design system
@each $color in ('neutral', 'success', 'warning', 'danger') {
@ -605,7 +613,11 @@
--font-weight-regular: 400;
--font-weight-bold: 600;
// --font-family: 'Open Sans', sans-serif;
--font-family: 'Open Sans', sans-serif;
--font-family-heading: 'Geomanist Book', 'Open Sans', sans-serif;
--font-family-body: 'Open Sans', sans-serif;
--font-family-button: 'Open Sans', sans-serif;
--font-family-monospace: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
--spacing-5xs: 0.125rem;
@ -628,5 +640,20 @@
}
:root {
@include theme;
body {
@include theme;
}
}
// ! TODO:
// To move somewhere....
.n8n-heading {
font-family: var(--font-family-heading);
letter-spacing: 0.03rem;
}
.vue-flow__background {
circle {
fill: var(--color-canvas-dot);
}
}

2
packages/design-system/src/css/common/var.scss
View file

@ -849,7 +849,7 @@ $menu-item-font-weight: var(--menu-item-font-weight, var(--font-weight-regular))
$menu-item-font-color: var(--menu-font-color, var(--color-text-dark));
$menu-item-icon-font-color: var(--menu-item-font-color, var(--color-text-light));
/// color||Color|0
$menu-background-color: var(--menu-background-color, var(--color-background-xlight));
$menu-background-color: var(--color-menu-background, var(--color-background-xlight));
$menu-item-hover-fill: var(--menu-item-hover-fill, transparent);
$menu-item-hover-font-color: var(--menu-item-hover-font-color, var(--color-text-dark));
$menu-item-active-font-color: var(--menu-item-active-font-color, var(--color-primary));

2
packages/editor-ui/src/components/CredentialCard.vue
View file

@ -179,7 +179,7 @@ function moveResource() {
<style lang="scss" module>
.cardLink {
transition: box-shadow 0.3s ease;
transition: all 0.3s ease;
cursor: pointer;
padding: 0 0 0 var(--spacing-s);
align-items: stretch;

3
packages/editor-ui/src/components/MainHeader/MainHeader.vue
View file

@ -251,10 +251,11 @@ function hideGithubButton() {
}
.main-header {
background-color: var(--color-background-xlight);
background-color: var(--main-header-background);
width: 100%;
box-sizing: border-box;
border-bottom: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
border-bottom: var(--border-base);
}
.top-menu {

5
packages/editor-ui/src/components/MainSidebar.vue
View file

@ -468,11 +468,12 @@ onClickOutside(createBtn as Ref<VueInstance>, () => {
.sideMenu {
position: relative;
height: 100%;
border-right: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
// border-right: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
border-right: var(--border-base);
transition: width 150ms ease-in-out;
width: $sidebar-expanded-width;
padding-top: 54px;
background-color: var(--menu-background, var(--color-background-xlight));
background-color: var(--color-menu-background, var(--color-background-xlight));
.logo {
position: absolute;

2
packages/editor-ui/src/components/WorkflowCard.vue
View file

@ -294,7 +294,7 @@ function moveResource() {
<style lang="scss" module>
.cardLink {
transition: box-shadow 0.3s ease;
transition: all 0.3s ease;
cursor: pointer;
padding: 0;
align-items: stretch;