marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-24 17:59:39 +02:00
Code Issues Packages Projects Releases Wiki Activity

Updating the color scales for the neo theme

Browse Source
This commit is contained in:
Knut Sveidqvist
2024-08-02 11:47:57 +02:00
parent 85e7af566e
commit f93e331be5
1 changed files with 48 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
packages/mermaid/src/themes/theme-neo.js
View File

@@ -142,18 +142,21 @@ class Theme {
/* Color Scale */
/* Each color-set will have a background, a foreground and a border color */
this.cScale0 = this.cScale0 || this.primaryColor;
this.cScale1 = this.cScale1 || this.secondaryColor;
this.cScale2 = this.cScale2 || this.tertiaryColor;
this.cScale3 = this.cScale3 || adjust(this.primaryColor, { h: 30 });
this.cScale4 = this.cScale4 || adjust(this.primaryColor, { h: 60 });
this.cScale5 = this.cScale5 || adjust(this.primaryColor, { h: 90 });
this.cScale6 = this.cScale6 || adjust(this.primaryColor, { h: 120 });
this.cScale7 = this.cScale7 || adjust(this.primaryColor, { h: 150 });
this.cScale8 = this.cScale8 || adjust(this.primaryColor, { h: 210, l: 150 });
this.cScale9 = this.cScale9 || adjust(this.primaryColor, { h: 270 });
this.cScale10 = this.cScale10 || adjust(this.primaryColor, { h: 300 });
this.cScale11 = this.cScale11 || adjust(this.primaryColor, { h: 330 });
const primaryColor = '#ECECFE';
const secondaryColor = '#E9E9F1';
const tertiaryColor = adjust(primaryColor, { h: 180, l: 5 });
this.cScale0 = this.cScale0 || primaryColor;
this.cScale1 = this.cScale1 || secondaryColor;
this.cScale2 = this.cScale2 || tertiaryColor;
this.cScale3 = this.cScale3 || adjust(primaryColor, { h: 30 });
this.cScale4 = this.cScale4 || adjust(primaryColor, { h: 60 });
this.cScale5 = this.cScale5 || adjust(primaryColor, { h: 90 });
this.cScale6 = this.cScale6 || adjust(primaryColor, { h: 120 });
this.cScale7 = this.cScale7 || adjust(primaryColor, { h: 150 });
this.cScale8 = this.cScale8 || adjust(primaryColor, { h: 210, l: 150 });
this.cScale9 = this.cScale9 || adjust(primaryColor, { h: 270 });
this.cScale10 = this.cScale10 || adjust(primaryColor, { h: 300 });
this.cScale11 = this.cScale11 || adjust(primaryColor, { h: 330 });
if (this.darkMode) {
for (let i = 0; i < this.THEME_COLOR_LIMIT; i++) {
this['cScale' + i] = darken(this['cScale' + i], 75);
@@ -198,28 +201,28 @@ class Theme {
this.classText = this.classText || this.textColor;
/* user-journey */
this.fillType0 = this.fillType0 || this.primaryColor;
this.fillType1 = this.fillType1 || this.secondaryColor;
this.fillType2 = this.fillType2 || adjust(this.primaryColor, { h: 64 });
this.fillType3 = this.fillType3 || adjust(this.secondaryColor, { h: 64 });
this.fillType4 = this.fillType4 || adjust(this.primaryColor, { h: -64 });
this.fillType5 = this.fillType5 || adjust(this.secondaryColor, { h: -64 });
this.fillType6 = this.fillType6 || adjust(this.primaryColor, { h: 128 });
this.fillType7 = this.fillType7 || adjust(this.secondaryColor, { h: 128 });
this.fillType0 = this.fillType0 || primaryColor;
this.fillType1 = this.fillType1 || secondaryColor;
this.fillType2 = this.fillType2 || adjust(primaryColor, { h: 64 });
this.fillType3 = this.fillType3 || adjust(secondaryColor, { h: 64 });
this.fillType4 = this.fillType4 || adjust(primaryColor, { h: -64 });
this.fillType5 = this.fillType5 || adjust(secondaryColor, { h: -64 });
this.fillType6 = this.fillType6 || adjust(primaryColor, { h: 128 });
this.fillType7 = this.fillType7 || adjust(secondaryColor, { h: 128 });
/* pie */
this.pie1 = this.pie1 || this.primaryColor;
this.pie2 = this.pie2 || this.secondaryColor;
this.pie3 = this.pie3 || this.tertiaryColor;
this.pie4 = this.pie4 || adjust(this.primaryColor, { l: -10 });
this.pie5 = this.pie5 || adjust(this.secondaryColor, { l: -10 });
this.pie6 = this.pie6 || adjust(this.tertiaryColor, { l: -10 });
this.pie7 = this.pie7 || adjust(this.primaryColor, { h: +60, l: -10 });
this.pie8 = this.pie8 || adjust(this.primaryColor, { h: -60, l: -10 });
this.pie9 = this.pie9 || adjust(this.primaryColor, { h: 120, l: 0 });
this.pie10 = this.pie10 || adjust(this.primaryColor, { h: +60, l: -20 });
this.pie11 = this.pie11 || adjust(this.primaryColor, { h: -60, l: -20 });
this.pie12 = this.pie12 || adjust(this.primaryColor, { h: 120, l: -10 });
this.pie1 = this.pie1 || primaryColor;
this.pie2 = this.pie2 || secondaryColor;
this.pie3 = this.pie3 || tertiaryColor;
this.pie4 = this.pie4 || adjust(primaryColor, { l: -10 });
this.pie5 = this.pie5 || adjust(secondaryColor, { l: -10 });
this.pie6 = this.pie6 || adjust(tertiaryColor, { l: -10 });
this.pie7 = this.pie7 || adjust(primaryColor, { h: +60, l: -10 });
this.pie8 = this.pie8 || adjust(primaryColor, { h: -60, l: -10 });
this.pie9 = this.pie9 || adjust(primaryColor, { h: 120, l: 0 });
this.pie10 = this.pie10 || adjust(primaryColor, { h: +60, l: -20 });
this.pie11 = this.pie11 || adjust(primaryColor, { h: -60, l: -20 });
this.pie12 = this.pie12 || adjust(primaryColor, { h: 120, l: -10 });
this.pieTitleTextSize = this.pieTitleTextSize || '25px';
this.pieTitleTextColor = this.pieTitleTextColor || this.taskTextDarkColor;
this.pieSectionTextSize = this.pieSectionTextSize || '17px';
@@ -233,10 +236,10 @@ class Theme {
this.pieOpacity = this.pieOpacity || '0.7';
/* quadrant-graph */
this.quadrant1Fill = this.quadrant1Fill || this.primaryColor;
this.quadrant2Fill = this.quadrant2Fill || adjust(this.primaryColor, { r: 5, g: 5, b: 5 });
this.quadrant3Fill = this.quadrant3Fill || adjust(this.primaryColor, { r: 10, g: 10, b: 10 });
this.quadrant4Fill = this.quadrant4Fill || adjust(this.primaryColor, { r: 15, g: 15, b: 15 });
this.quadrant1Fill = this.quadrant1Fill || primaryColor;
this.quadrant2Fill = this.quadrant2Fill || adjust(primaryColor, { r: 5, g: 5, b: 5 });
this.quadrant3Fill = this.quadrant3Fill || adjust(primaryColor, { r: 10, g: 10, b: 10 });
this.quadrant4Fill = this.quadrant4Fill || adjust(primaryColor, { r: 15, g: 15, b: 15 });
this.quadrant1TextFill = this.quadrant1TextFill || this.primaryTextColor;
this.quadrant2TextFill =
this.quadrant2TextFill || adjust(this.primaryTextColor, { r: -5, g: -5, b: -5 });
@@ -275,7 +278,7 @@ class Theme {
};
/* requirement-diagram */
this.requirementBackground = this.requirementBackground || this.primaryColor;
this.requirementBackground = this.requirementBackground || primaryColor;
this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;
this.requirementBorderSize = this.requirementBorderSize || '1';
this.requirementTextColor = this.requirementTextColor || this.primaryTextColor;
@@ -286,14 +289,14 @@ class Theme {
this.relationLabelColor = this.relationLabelColor || this.actorTextColor;
/* git */
this.git0 = this.git0 || this.primaryColor;
this.git1 = this.git1 || this.secondaryColor;
this.git2 = this.git2 || this.tertiaryColor;
this.git3 = this.git3 || adjust(this.primaryColor, { h: -30 });
this.git4 = this.git4 || adjust(this.primaryColor, { h: -60 });
this.git5 = this.git5 || adjust(this.primaryColor, { h: -90 });
this.git6 = this.git6 || adjust(this.primaryColor, { h: +60 });
this.git7 = this.git7 || adjust(this.primaryColor, { h: +120 });
this.git0 = this.git0 || primaryColor;
this.git1 = this.git1 || secondaryColor;
this.git2 = this.git2 || tertiaryColor;
this.git3 = this.git3 || adjust(primaryColor, { h: -30 });
this.git4 = this.git4 || adjust(primaryColor, { h: -60 });
this.git5 = this.git5 || adjust(primaryColor, { h: -90 });
this.git6 = this.git6 || adjust(primaryColor, { h: +60 });
this.git7 = this.git7 || adjust(primaryColor, { h: +120 });
if (this.darkMode) {
this.git0 = lighten(this.git0, 25);
this.git1 = lighten(this.git1, 25);