mirror of
https://github.com/n8n-io/n8n.git
synced 2024-09-21 07:17:38 -07:00
6d6f3acd97
* 🔨 base functionality done * :fix: changes accordingly to review * :fix: replaced div with n8n-text * :fix: return wrong deleted color variable * add mock examples for testing * add slack node test param * 🔨 changed font size of hint, added top margin * 🔨 updated comments and function name * 🔨 updated parameterHint to hint * 🔨 updated text color, set compact to true, changed inputLabelHint to hint * 🔨 updated components styles * 🔨 replaced mini with xsmall * :fix: fixed line height * :fix: changed line height to 1.25 * :hummer: removed mock data * 🔨 changed xsmall line-height * ⚡ update to merge hint Co-authored-by: Mutasem <mutdmour@gmail.com>
356 lines
8.2 KiB
SCSS
356 lines
8.2 KiB
SCSS
@mixin theme {
|
|
--color-primary-h: 6.9;
|
|
--color-primary-s: 100%;
|
|
--color-primary-l: 67.6%;
|
|
--color-primary: hsl(
|
|
var(--color-primary-h),
|
|
var(--color-primary-s),
|
|
var(--color-primary-l)
|
|
);
|
|
|
|
--color-primary-tint-1-l: 88%;
|
|
--color-primary-tint-1: hsl(
|
|
var(--color-primary-h),
|
|
var(--color-primary-s),
|
|
var(--color-primary-tint-1-l)
|
|
);
|
|
|
|
--color-primary-tint-2-l: 94.5%;
|
|
--color-primary-tint-2: hsl(
|
|
var(--color-primary-h),
|
|
var(--color-primary-s),
|
|
var(--color-primary-tint-2-l)
|
|
);
|
|
|
|
--color-primary-tint-3-l: 96.9%;
|
|
--color-primary-tint-3: hsl(
|
|
var(--color-primary-h),
|
|
var(--color-primary-s),
|
|
var(--color-primary-tint-3-l)
|
|
);
|
|
|
|
--color-primary-shade-1-l: 57.6%;
|
|
--color-primary-shade-1: hsl(
|
|
var(--color-primary-h),
|
|
var(--color-primary-s),
|
|
var(--color-primary-shade-1-l)
|
|
);
|
|
|
|
--color-primary-shade-2-l: 23%;
|
|
--color-primary-shade-2: hsl(
|
|
var(--color-primary-h),
|
|
var(--color-primary-s),
|
|
var(--color-primary-shade-2-l)
|
|
);
|
|
|
|
--color-secondary-h: 247;
|
|
--color-secondary-s: 49%;
|
|
--color-secondary-l: 53%;
|
|
--color-secondary: hsl(
|
|
var(--color-secondary-h),
|
|
var(--color-secondary-s),
|
|
var(--color-secondary-l)
|
|
);
|
|
|
|
--color-success-h: 150.4;
|
|
--color-success-s: 60%;
|
|
--color-success-l: 40.4%;
|
|
--color-success: hsl(
|
|
var(--color-success-h),
|
|
var(--color-success-s),
|
|
var(--color-success-l)
|
|
);
|
|
|
|
--color-success-tint-1-l: 90%;
|
|
--color-success-tint-1: hsl(
|
|
var(--color-success-h),
|
|
var(--color-success-s),
|
|
var(--color-success-tint-1-l)
|
|
);
|
|
|
|
--color-success-tint-2-l: 94.9%;
|
|
--color-success-tint-2: hsl(
|
|
var(--color-success-h),
|
|
var(--color-success-s),
|
|
var(--color-success-tint-2-l)
|
|
);
|
|
|
|
--color-success-light-h: 150;
|
|
--color-success-light-s: 54%;
|
|
--color-success-light-l: 70%;
|
|
--color-success-light: hsl(
|
|
var(--color-success-light-h),
|
|
var(--color-success-light-s),
|
|
var(--color-success-light-l)
|
|
);
|
|
|
|
--color-warning-h: 36;
|
|
--color-warning-s: 77%;
|
|
--color-warning-l: 57%;
|
|
--color-warning: hsl(
|
|
var(--color-warning-h),
|
|
var(--color-warning-s),
|
|
var(--color-warning-l)
|
|
);
|
|
|
|
--color-warning-tint-1-l: 88%;
|
|
--color-warning-tint-1: hsl(
|
|
var(--color-warning-h),
|
|
var(--color-warning-s),
|
|
var(--color-warning-tint-1-l)
|
|
);
|
|
|
|
--color-warning-tint-2-l: 96%;
|
|
--color-warning-tint-2: hsl(
|
|
var(--color-warning-h),
|
|
var(--color-warning-s),
|
|
var(--color-warning-tint-2-l)
|
|
);
|
|
|
|
--color-danger-h: 0;
|
|
--color-danger-s: 87.6%;
|
|
--color-danger-l: 65.3%;
|
|
--color-danger: hsl(
|
|
var(--color-danger-h),
|
|
var(--color-danger-s),
|
|
var(--color-danger-l)
|
|
);
|
|
|
|
--color-danger-tint-1-l: 93.9%;
|
|
--color-danger-tint-1: hsl(
|
|
var(--color-danger-h),
|
|
var(--color-danger-s),
|
|
var(--color-danger-tint-1-l)
|
|
);
|
|
--color-danger-tint-2-l: 96.9%;
|
|
--color-danger-tint-2: hsl(
|
|
var(--color-danger-h),
|
|
var(--color-danger-s),
|
|
var(--color-danger-tint-2-l)
|
|
);
|
|
|
|
--color-info-h: 220;
|
|
--color-info-s: 4%;
|
|
--color-info-l: 58%;
|
|
--color-info: hsl(
|
|
var(--color-info-h),
|
|
var(--color-info-s),
|
|
var(--color-info-l)
|
|
);
|
|
|
|
--color-info-tint-1-l: 88%;
|
|
--color-info-tint-1: hsl(
|
|
var(--color-info-h),
|
|
var(--color-info-s),
|
|
var(--color-info-tint-1-l)
|
|
);
|
|
--color-info-tint-2-l: 96%;
|
|
--color-info-tint-2: hsl(
|
|
var(--color-info-h),
|
|
var(--color-info-s),
|
|
var(--color-info-tint-2-l)
|
|
);
|
|
|
|
--color-text-dark-h: 0;
|
|
--color-text-dark-s: 0%;
|
|
--color-text-dark-l: 33.3%;
|
|
--color-text-dark: hsl(
|
|
var(--color-text-dark-h),
|
|
var(--color-text-dark-s),
|
|
var(--color-text-dark-l)
|
|
);
|
|
|
|
--color-text-base-h: 240;
|
|
--color-text-base-s: 4%;
|
|
--color-text-base-l: 51%;
|
|
--color-text-base: hsl(
|
|
var(--color-text-base-h),
|
|
var(--color-text-base-s),
|
|
var(--color-text-base-l)
|
|
);
|
|
|
|
--color-text-light-h: 220;
|
|
--color-text-light-s: 4.2%;
|
|
--color-text-light-l: 58.2%;
|
|
--color-text-light: hsl(
|
|
var(--color-text-light-h),
|
|
var(--color-text-light-s),
|
|
var(--color-text-light-l)
|
|
);
|
|
|
|
--color-text-lighter-h: 222;
|
|
--color-text-lighter-s: 16.7%;
|
|
--color-text-lighter-l: 88.2%;
|
|
--color-text-lighter: hsl(
|
|
var(--color-text-lighter-h),
|
|
var(--color-text-lighter-s),
|
|
var(--color-text-lighter-l)
|
|
);
|
|
|
|
--color-text-xlight-h: 0;
|
|
--color-text-xlight-s: 0%;
|
|
--color-text-xlight-l: 100%;
|
|
--color-text-xlight: hsl(
|
|
var(--color-text-xlight-h),
|
|
var(--color-text-xlight-s),
|
|
var(--color-text-xlight-l)
|
|
);
|
|
|
|
--color-foreground-xdark-h: 220;
|
|
--color-foreground-xdark-s: 7.4%;
|
|
--color-foreground-xdark-l: 52.5%;
|
|
--color-foreground-xdark: hsl(
|
|
var(--color-foreground-xdark-h),
|
|
var(--color-foreground-xdark-s),
|
|
var(--color-foreground-xdark-l)
|
|
);
|
|
|
|
--color-foreground-dark-h: 228;
|
|
--color-foreground-dark-s: 9.6%;
|
|
--color-foreground-dark-l: 79.6%;
|
|
--color-foreground-dark: hsl(
|
|
var(--color-foreground-dark-h),
|
|
var(--color-foreground-dark-s),
|
|
var(--color-foreground-dark-l)
|
|
);
|
|
|
|
--color-foreground-base-h: 220;
|
|
--color-foreground-base-s: 20%;
|
|
--color-foreground-base-l: 88.2%;
|
|
--color-foreground-base: hsl(
|
|
var(--color-foreground-base-h),
|
|
var(--color-foreground-base-s),
|
|
var(--color-foreground-base-l)
|
|
);
|
|
|
|
--color-foreground-light-h: 0;
|
|
--color-foreground-light-s: 0%;
|
|
--color-foreground-light-l: 93.3%;
|
|
--color-foreground-light: hsl(
|
|
var(--color-foreground-light-h),
|
|
var(--color-foreground-light-s),
|
|
var(--color-foreground-light-l)
|
|
);
|
|
|
|
--color-foreground-xlight-h: 0;
|
|
--color-foreground-xlight-s: 0%;
|
|
--color-foreground-xlight-l: 100%;
|
|
--color-foreground-xlight: hsl(
|
|
var(--color-foreground-xlight-h),
|
|
var(--color-foreground-xlight-s),
|
|
var(--color-foreground-xlight-l)
|
|
);
|
|
|
|
--color-background-dark-h: 240;
|
|
--color-background-dark-s: 4.2%;
|
|
--color-background-dark-l: 18.8%;
|
|
--color-background-dark: hsl(
|
|
var(--color-background-dark-h),
|
|
var(--color-background-dark-s),
|
|
var(--color-background-dark-l)
|
|
);
|
|
|
|
--color-background-base-h: 220;
|
|
--color-background-base-s: 30%;
|
|
--color-background-base-l: 96.1%;
|
|
--color-background-base: hsl(
|
|
var(--color-background-base-h),
|
|
var(--color-background-base-s),
|
|
var(--color-background-base-l)
|
|
);
|
|
|
|
--color-background-light-h: 220;
|
|
--color-background-light-s: 27.3%;
|
|
--color-background-light-l: 97.8%;
|
|
--color-background-light: hsl(
|
|
var(--color-background-light-h),
|
|
var(--color-background-light-s),
|
|
var(--color-background-light-l)
|
|
);
|
|
|
|
--color-background-lighter-h: 252;
|
|
--color-background-lighter-s: 71.4%;
|
|
--color-background-lighter-l: 98.6%;
|
|
--color-background-lighter: hsl(
|
|
var(--color-background-lighter-h),
|
|
var(--color-background-lighter-s),
|
|
var(--color-background-lighter-l)
|
|
);
|
|
|
|
--color-background-xlight-h: 0;
|
|
--color-background-xlight-s: 0%;
|
|
--color-background-xlight-l: 100%;
|
|
--color-background-xlight: hsl(
|
|
var(--color-background-xlight-h),
|
|
var(--color-background-xlight-s),
|
|
var(--color-background-xlight-l)
|
|
);
|
|
|
|
--color-canvas-dot-h: 204;
|
|
--color-canvas-dot-s: 15.6%;
|
|
--color-canvas-dot-l: 87.5%;
|
|
--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;
|
|
--border-radius-small: 2px;
|
|
--border-color-base: var(--color-foreground-base);
|
|
--border-color-light: var(--color-foreground-light);
|
|
|
|
--border-style-base: solid;
|
|
--border-width-base: 1px;
|
|
--border-base: var(--border-width-base) var(--border-style-base)
|
|
var(--color-foreground-base);
|
|
|
|
--font-size-3xs: 0.625rem;
|
|
--font-size-2xs: 0.75rem;
|
|
--font-size-xs: 0.8125rem;
|
|
--font-size-s: 0.875rem;
|
|
--font-size-m: 1rem;
|
|
--font-size-l: 1.125rem;
|
|
--font-size-xl: 1.25rem;
|
|
--font-size-2xl: 1.75rem;
|
|
|
|
--font-line-height-compact: 1.25;
|
|
--font-line-height-regular: 1.3;
|
|
--font-line-height-loose: 1.35;
|
|
--font-line-height-xloose: 1.5;
|
|
|
|
--font-weight-regular: 400;
|
|
--font-weight-semi-bold: 500;
|
|
--font-weight-bold: 600;
|
|
--font-family: 'Open Sans', sans-serif;
|
|
|
|
--spacing-5xs: 0.125rem;
|
|
--spacing-4xs: 0.25rem;
|
|
--spacing-3xs: 0.375rem;
|
|
--spacing-2xs: 0.5rem;
|
|
--spacing-xs: 0.75rem;
|
|
--spacing-s: 1rem;
|
|
--spacing-m: 1.25rem;
|
|
--spacing-l: 1.5rem;
|
|
--spacing-xl: 2rem;
|
|
--spacing-2xl: 3rem;
|
|
--spacing-3xl: 4rem;
|
|
--spacing-4xl: 8rem;
|
|
--spacing-5xl: 16rem;
|
|
}
|
|
|
|
:root {
|
|
@include theme;
|
|
}
|