2022-07-27 09:43:25 +02:00
|
|
|
import { darken, lighten, adjust, invert, isDark } from 'khroma';
|
|
|
|
|
2022-07-25 17:03:18 +02:00
|
|
|
const genSections = (options) => {
|
|
|
|
let sections = '';
|
2022-07-27 09:43:25 +02:00
|
|
|
|
|
|
|
for (let i = 0; i < 8; i++) {
|
|
|
|
options['lineColor' + i] = options['lineColor' + i] || options['gitBranchLabel' + i];
|
|
|
|
if (isDark(options['lineColor' + i])) {
|
|
|
|
options['lineColor' + i] = lighten(options['lineColor' + i], 30);
|
|
|
|
} else {
|
|
|
|
options['lineColor' + i] = darken(options['lineColor' + i], 30);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-07-25 17:03:18 +02:00
|
|
|
for (let i = 1; i < 8; i++) {
|
|
|
|
const sw = '' + (17 - 3 * i);
|
|
|
|
sections += `
|
2022-07-27 09:43:25 +02:00
|
|
|
.section-${i - 1} rect, .section-${i - 1} path {
|
2022-07-25 17:03:18 +02:00
|
|
|
fill: ${options['git' + i]};
|
|
|
|
}
|
|
|
|
.section-${i - 1} text {
|
|
|
|
fill: ${options['gitBranchLabel' + i]};
|
|
|
|
}
|
|
|
|
.section-edge-${i - 1}{
|
|
|
|
stroke: ${options['git' + i]};
|
|
|
|
}
|
|
|
|
.edge-depth-${i - 1}{
|
|
|
|
stroke-width: ${sw};
|
|
|
|
}
|
2022-07-27 09:43:25 +02:00
|
|
|
.section-${i - 1} line {
|
|
|
|
stroke: ${options['lineColor' + i]} ;
|
|
|
|
stroke-width: 3;
|
|
|
|
}
|
2022-07-25 17:03:18 +02:00
|
|
|
`;
|
|
|
|
}
|
|
|
|
return sections;
|
|
|
|
};
|
|
|
|
|
2022-07-23 10:16:54 +02:00
|
|
|
const getStyles = (options) =>
|
|
|
|
`
|
2022-07-25 17:03:18 +02:00
|
|
|
.edge {
|
|
|
|
stroke-width: 3;
|
|
|
|
}
|
|
|
|
${genSections(options)}
|
2022-07-27 09:43:25 +02:00
|
|
|
.section-root rect, .section-root path {
|
2022-07-25 17:03:18 +02:00
|
|
|
fill: ${options.git0};
|
|
|
|
}
|
|
|
|
.section-root text {
|
|
|
|
fill: ${options.gitBranchLabel0};
|
2022-07-23 10:16:54 +02:00
|
|
|
}
|
2022-07-25 17:03:18 +02:00
|
|
|
|
2022-07-23 10:16:54 +02:00
|
|
|
`;
|
2022-07-18 16:00:03 +02:00
|
|
|
export default getStyles;
|