mirror of
https://github.com/n8n-io/n8n.git
synced 2024-11-15 17:14:05 -08:00
261 lines
5.7 KiB
SCSS
261 lines
5.7 KiB
SCSS
|
@mixin theme {
|
||
|
|
--color-primary-h: 7;
|
||
|
|
--color-primary-s: 100%;
|
||
|
|
--color-primary-l: 68%;
|
||
|
|
--color-primary: hsl(
|
||
|
|
var(--color-primary-h),
|
||
|
|
var(--color-primary-s),
|
||
|
|
var(--color-primary-l)
|
||
|
|
);
|
||
|
|
|
||
|
|
--color-primary-tint-1-l: 18%;
|
||
|
|
--color-primary-tint-1: hsl(
|
||
|
|
var(--color-primary-h),
|
||
|
|
var(--color-primary-s),
|
||
|
|
var(--color-primary-tint-1-l)
|
||
|
|
);
|
||
|
|
|
||
|
|
--color-primary-tint-2-l: 9%;
|
||
|
|
--color-primary-tint-2: hsl(
|
||
|
|
var(--color-primary-h),
|
||
|
|
var(--color-primary-s),
|
||
|
|
var(--color-primary-tint-2-l)
|
||
|
|
);
|
||
|
|
|
||
|
|
--color-primary-tint-3-l: 3%;
|
||
|
|
--color-primary-tint-3: hsl(
|
||
|
|
var(--color-primary-h),
|
||
|
|
var(--color-primary-s),
|
||
|
|
var(--color-primary-tint-3-l)
|
||
|
|
);
|
||
|
|
|
||
|
|
--color-primary-shade-1-l: 89%;
|
||
|
|
--color-primary-shade-1: hsl(
|
||
|
|
var(--color-primary-h),
|
||
|
|
var(--color-primary-s),
|
||
|
|
var(--color-primary-shade-1-l)
|
||
|
|
);
|
||
|
|
|
||
|
|
--color-secondary-h: 247;
|
||
|
|
--color-secondary-s: 100%;
|
||
|
|
--color-secondary-l: 35%;
|
||
|
|
--color-secondary: hsl(
|
||
|
|
var(--color-secondary-h),
|
||
|
|
var(--color-secondary-s),
|
||
|
|
var(--color-secondary-l)
|
||
|
|
);
|
||
|
|
|
||
|
|
--color-success-h: 150;
|
||
|
|
--color-success-s: 74%;
|
||
|
|
--color-success-l: 60%;
|
||
|
|
--color-success: hsl(
|
||
|
|
var(--color-success-h),
|
||
|
|
var(--color-success-s),
|
||
|
|
var(--color-success-l)
|
||
|
|
);
|
||
|
|
|
||
|
|
--color-success-tint-1-l: 12%;
|
||
|
|
--color-success-tint-1: hsl(
|
||
|
|
var(--color-success-h),
|
||
|
|
var(--color-success-s),
|
||
|
|
var(--color-success-tint-1-l)
|
||
|
|
);
|
||
|
|
|
||
|
|
--color-success-tint-2-l: 3%;
|
||
|
|
--color-success-tint-2: hsl(
|
||
|
|
var(--color-success-h),
|
||
|
|
var(--color-success-s),
|
||
|
|
var(--color-success-tint-2-l)
|
||
|
|
);
|
||
|
|
|
||
|
|
--color-warning-h: 36;
|
||
|
|
--color-warning-s: 77%;
|
||
|
|
--color-warning-l: 43%;
|
||
|
|
--color-warning: hsl(
|
||
|
|
var(--color-warning-h),
|
||
|
|
var(--color-warning-s),
|
||
|
|
var(--color-warning-l)
|
||
|
|
);
|
||
|
|
|
||
|
|
--color-warning-tint-1-l: 12%;
|
||
|
|
--color-warning-tint-1: hsl(
|
||
|
|
var(--color-warning-h),
|
||
|
|
var(--color-warning-s),
|
||
|
|
var(--color-warning-tint-1-l)
|
||
|
|
);
|
||
|
|
|
||
|
|
--color-warning-tint-2-l: 4%;
|
||
|
|
--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: 88%;
|
||
|
|
--color-danger-l: 35%;
|
||
|
|
--color-danger: hsl(
|
||
|
|
var(--color-danger-h),
|
||
|
|
var(--color-danger-s),
|
||
|
|
var(--color-danger-l)
|
||
|
|
);
|
||
|
|
|
||
|
|
--color-danger-tint-1-l: 8%;
|
||
|
|
--color-danger-tint-1: hsl(
|
||
|
|
var(--color-danger-h),
|
||
|
|
var(--color-danger-s),
|
||
|
|
var(--color-danger-tint-1-l)
|
||
|
|
);
|
||
|
|
|
||
|
|
--color-danger-tint-2-l: 3%;
|
||
|
|
--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: 42%;
|
||
|
|
--color-info: hsl(
|
||
|
|
var(--color-info-h),
|
||
|
|
var(--color-info-s),
|
||
|
|
var(--color-info-l)
|
||
|
|
);
|
||
|
|
|
||
|
|
--color-info-tint-1-l: 12%;
|
||
|
|
--color-info-tint-1: hsl(
|
||
|
|
var(--color-info-h),
|
||
|
|
var(--color-info-s),
|
||
|
|
var(--color-info-tint-1-l)
|
||
|
|
);
|
||
|
|
|
||
|
|
--color-info-tint-2-l: 4%;
|
||
|
|
--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: 100%;
|
||
|
|
--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: 49%;
|
||
|
|
--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%;
|
||
|
|
--color-text-light-l: 42%;
|
||
|
|
--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: 17%;
|
||
|
|
--color-text-lighter-l: 12%;
|
||
|
|
--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-base-h: 220;
|
||
|
|
--color-foreground-base-s: 20%;
|
||
|
|
--color-foreground-base-l: 12%;
|
||
|
|
--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: 7%;
|
||
|
|
--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: 0%;
|
||
|
|
--color-foreground-xlight: hsl(
|
||
|
|
var(--color-foreground-xlight-h),
|
||
|
|
var(--color-foreground-xlight-s),
|
||
|
|
var(--color-foreground-xlight-l)
|
||
|
|
);
|
||
|
|
|
||
|
|
--color-background-dark-h: 0;
|
||
|
|
--color-background-dark-s: 0%;
|
||
|
|
--color-background-dark-l: 100%;
|
||
|
|
--color-background-dark: hsl(
|
||
|
|
var(--color-background-dark-h),
|
||
|
|
var(--color-background-dark-s),
|
||
|
|
var(--color-background-dark-l)
|
||
|
|
);
|
||
|
|
|
||
|
|
--color-background-base-h: 252;
|
||
|
|
--color-background-base-s: 71%;
|
||
|
|
--color-background-base-l: 99%;
|
||
|
|
--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%;
|
||
|
|
--color-background-light-l: 98%;
|
||
|
|
--color-background-light: hsl(
|
||
|
|
var(--color-background-light-h),
|
||
|
|
var(--color-background-light-s),
|
||
|
|
var(--color-background-light-l)
|
||
|
|
);
|
||
|
|
|
||
|
|
--color-background-lighter-h: 220;
|
||
|
|
--color-background-lighter-s: 30%;
|
||
|
|
--color-background-lighter-l: 96%;
|
||
|
|
--color-background-lighter: hsl(
|
||
|
|
var(--color-background-lighter-h),
|
||
|
|
var(--color-background-lighter-s),
|
||
|
|
var(--color-background-lighter-l)
|
||
|
|
);
|
||
|
|
|
||
|
|
--color-background-xlight-h: 240;
|
||
|
|
--color-background-xlight-s: 4%;
|
||
|
|
--color-background-xlight-l: 19%;
|
||
|
|
--color-background-xlight: hsl(
|
||
|
|
var(--color-background-xlight-h),
|
||
|
|
var(--color-background-xlight-s),
|
||
|
|
var(--color-background-xlight-l)
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
body.theme-dark {
|
||
|
|
@include theme;
|
||
|
|
}
|