refactor: lint bare fill/stroke colors, add vars for git graph color series (#37543)

- make `scale-unlimited/declaration-strict-value` cover fill and stroke
- add new color vars for color series in gitgraph
- move most rule disablement to per-line
- remove dead highlight colors since https://github.com/go-gitea/gitea/pull/34948
- move stylelint config to ts now that the linked issue is fixed

Co-authored-by: Claude (Opus 4.7) <noreply@anthropic.com>

stylelint.config.ts

@@ -1,6 +1,5 @@
-// @ts-check
-// TODO: Move to .ts after https://github.com/stylelint/stylelint/issues/8893 is fixed
 import {fileURLToPath} from 'node:url';
+import type {Config} from 'stylelint';
 
 const cssVarFiles = [
   fileURLToPath(new URL('web_src/css/base.css', import.meta.url)),
@@ -8,7 +7,6 @@ const cssVarFiles = [
   fileURLToPath(new URL('web_src/css/themes/theme-gitea-dark.css', import.meta.url)),
 ];
 
-/** @type {import('stylelint').Config} */
 export default {
   extends: 'stylelint-config-recommended',
   reportUnscopedDisables: true,
@@ -25,18 +23,6 @@ export default {
     '/web_src/fomantic',
   ],
   overrides: [
-    {
-      files: ['**/chroma/*', '**/codemirror/*', '**/console.css', 'font_i18n.css'],
-      rules: {
-        'scale-unlimited/declaration-strict-value': null,
-      },
-    },
-    {
-      files: ['**/chroma/*', '**/codemirror/*'],
-      rules: {
-        'block-no-empty': null,
-      },
-    },
     {
       files: ['**/*.vue'],
       customSyntax: 'postcss-html',
@@ -139,7 +125,7 @@ export default {
     'no-unknown-custom-media': null, // disabled until stylelint supports multi-file linting
     'no-unknown-custom-properties': null,  // disabled until stylelint supports multi-file linting
     'plugin/declaration-block-no-ignored-properties': true,
-    'scale-unlimited/declaration-strict-value': [['/color$/', 'font-weight'], {ignoreValues: '/^(inherit|transparent|unset|initial|currentcolor|none)$/', ignoreFunctions: true, disableFix: true, expandShorthand: true}],
+    'scale-unlimited/declaration-strict-value': [['/color$/', 'fill', 'stroke', 'font-weight'], {ignoreValues: '/^(inherit|transparent|unset|initial|currentcolor|none)$/', ignoreFunctions: true, disableFix: true, expandShorthand: true}],
     'selector-attribute-quotes': 'always',
     'selector-no-vendor-prefix': true,
     'selector-pseudo-element-colon-notation': 'double',
@@ -148,4 +134,4 @@ export default {
     'shorthand-property-no-redundant-values': true,
     'value-no-vendor-prefix': [true, {ignoreValues: ['box', 'inline-box']}],
   },
-};
+} satisfies Config;

web_src/css/features/console.css

@@ -1,4 +1,5 @@
 /* Based on https://github.com/buildkite/terminal-to-html/blob/697ff23bd8dc48b9d23f11f259f5256dae2455f0/assets/terminal.css */
+/* stylelint-disable scale-unlimited/declaration-strict-value -- terminal ANSI palette uses literal hex values */
 
 .console {
   background: var(--color-console-bg);

web_src/css/features/gitgraph.css

@@ -84,162 +84,82 @@
   fill: var(--color-secondary-dark-5);
 }
 
+#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-0 {
+  stroke: var(--color-series-16-0);
+  fill: var(--color-series-16-0);
+}
+
 #git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-1 {
-  stroke: #499a37;
+  stroke: var(--color-series-16-1);
-  fill: #499a37;
+  fill: var(--color-series-16-1);
 }
 
 #git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-2 {
-  stroke: #ce4751;
+  stroke: var(--color-series-16-2);
-  fill: #ce4751;
+  fill: var(--color-series-16-2);
 }
 
 #git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-3 {
-  stroke: #8f9121;
+  stroke: var(--color-series-16-3);
-  fill: #8f9121;
+  fill: var(--color-series-16-3);
 }
 
 #git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-4 {
-  stroke: #ac32a6;
+  stroke: var(--color-series-16-4);
-  fill: #ac32a6;
+  fill: var(--color-series-16-4);
 }
 
 #git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-5 {
-  stroke: #7445e9;
+  stroke: var(--color-series-16-5);
-  fill: #7445e9;
+  fill: var(--color-series-16-5);
 }
 
 #git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-6 {
-  stroke: #c67d28;
+  stroke: var(--color-series-16-6);
-  fill: #c67d28;
+  fill: var(--color-series-16-6);
 }
 
 #git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-7 {
-  stroke: #4db392;
+  stroke: var(--color-series-16-7);
-  fill: #4db392;
+  fill: var(--color-series-16-7);
 }
 
 #git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-8 {
-  stroke: #aa4d30;
+  stroke: var(--color-series-16-8);
-  fill: #aa4d30;
+  fill: var(--color-series-16-8);
 }
 
 #git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-9 {
-  stroke: #2a6f84;
+  stroke: var(--color-series-16-9);
-  fill: #2a6f84;
+  fill: var(--color-series-16-9);
 }
 
 #git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-10 {
-  stroke: #c45327;
+  stroke: var(--color-series-16-10);
-  fill: #c45327;
+  fill: var(--color-series-16-10);
 }
 
 #git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-11 {
-  stroke: #3d965c;
+  stroke: var(--color-series-16-11);
-  fill: #3d965c;
+  fill: var(--color-series-16-11);
 }
 
 #git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-12 {
-  stroke: #792a93;
+  stroke: var(--color-series-16-12);
-  fill: #792a93;
+  fill: var(--color-series-16-12);
 }
 
 #git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-13 {
-  stroke: #439d73;
+  stroke: var(--color-series-16-13);
-  fill: #439d73;
+  fill: var(--color-series-16-13);
 }
 
 #git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-14 {
-  stroke: #103aad;
+  stroke: var(--color-series-16-14);
-  fill: #103aad;
+  fill: var(--color-series-16-14);
 }
 
 #git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-15 {
-  stroke: #982e85;
+  stroke: var(--color-series-16-15);
-  fill: #982e85;
+  fill: var(--color-series-16-15);
-}
-
-#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-0 {
-  stroke: #7db233;
-  fill: #7db233;
-}
-
-#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-1 {
-  stroke: #5ac144;
-  fill: #5ac144;
-}
-
-#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-2 {
-  stroke: #ed5a8b;
-  fill: #ed5a8b;
-}
-
-#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-3 {
-  stroke: #ced049;
-  fill: #ced048;
-}
-
-#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-4 {
-  stroke: #db61d7;
-  fill: #db62d6;
-}
-
-#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-5 {
-  stroke: #8455f9;
-  fill: #8455f9;
-}
-
-#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-6 {
-  stroke: #e6a151;
-  fill: #e6a151;
-}
-
-#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-7 {
-  stroke: #44daaa;
-  fill: #44daaa;
-}
-
-#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-8 {
-  stroke: #dd7a5c;
-  fill: #dd7a5c;
-}
-
-#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-9 {
-  stroke: #38859c;
-  fill: #38859c;
-}
-
-#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-10 {
-  stroke: #d95520;
-  fill: #d95520;
-}
-
-#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-11 {
-  stroke: #42ae68;
-  fill: #42ae68;
-}
-
-#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-12 {
-  stroke: #9126b5;
-  fill: #9126b5;
-}
-
-#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-13 {
-  stroke: #4ab080;
-  fill: #4ab080;
-}
-
-#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-14 {
-  stroke: #284fb8;
-  fill: #284fb8;
-}
-
-#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-15 {
-  stroke: #971c80;
-  fill: #971c80;
-}
-
-#git-graph-container:not(.monochrome) #rel-container .flow-group.highlight.flow-color-16-0 {
-  stroke: #87ca28;
-  fill: #87ca28;
 }

web_src/css/font_i18n.css

@@ -51,7 +51,7 @@
     local("SourceHanSans-Light"), local("Yu Gothic Regular"),
     local("YuGothic Regular"), local("Droid Sans Japanese"), local("Meiryo"),
     local("MS PGothic");
-  font-weight: 300;
+  font-weight: 300; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -66,7 +66,7 @@
     local("SourceHanSans-Regular"), local("Yu Gothic Medium"),
     local("YuGothic Medium"), local("Droid Sans Japanese"), local("Meiryo"),
     local("MS PGothic");
-  font-weight: 400;
+  font-weight: 400; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -81,7 +81,7 @@
     local("SourceHanSans-Medium"), local("Yu Gothic Medium"),
     local("YuGothic Medium"), local("Droid Sans Japanese"), local("Meiryo"),
     local("MS PGothic");
-  font-weight: 500;
+  font-weight: 500; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -95,7 +95,7 @@
     local("NotoSansCJKJP-Bold"), local("Source Han Sans Bold"),
     local("SourceHanSans-Bold"), local("Yu Gothic Bold"), local("YuGothic Bold"),
     local("Droid Sans Japanese"), local("Meiryo Bold"), local("MS PGothic");
-  font-weight: 600;
+  font-weight: 600; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -124,7 +124,7 @@
     local("NotoSansCJKSC-Light"), local("HiraginoSansGB-W3"),
     local("Hiragino Sans GB W3"), local("Microsoft YaHei Light"),
     local("Heiti SC Light"), local("SimHei");
-  font-weight: 300;
+  font-weight: 300; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -137,7 +137,7 @@
     local("NotoSansCJKSC-Regular"), local("HiraginoSansGB-W3"),
     local("Hiragino Sans GB W3"), local("Microsoft YaHei"),
     local("Heiti SC Light"), local("SimHei");
-  font-weight: 400;
+  font-weight: 400; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -150,7 +150,7 @@
     local("NotoSansCJKSC-Medium"), local("HiraginoSansGB-W3"),
     local("Hiragino Sans GB W3"), local("Microsoft YaHei"),
     local("Heiti SC Light"), local("SimHei");
-  font-weight: 500;
+  font-weight: 500; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -163,7 +163,7 @@
     local("NotoSansCJKSC-Bold"), local("HiraginoSansGB-W6"),
     local("Hiragino Sans GB W6"), local("Microsoft YaHei Bold"),
     local("Heiti SC Medium"), local("SimHei");
-  font-weight: 600;
+  font-weight: 600; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -192,7 +192,7 @@
     local("NotoSansCJKTC-Light"), local("HiraginoSansTC-W3"),
     local("Hiragino Sans TC W3"), local("Microsoft JhengHei Light"),
     local("Heiti TC Light"), local("PMingLiU");
-  font-weight: 300;
+  font-weight: 300; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -205,7 +205,7 @@
     local("NotoSansCJKTC-Regular"), local("HiraginoSansTC-W3"),
     local("Hiragino Sans TC W3"), local("Microsoft JhengHei"),
     local("Heiti TC Light"), local("PMingLiU");
-  font-weight: 400;
+  font-weight: 400; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -218,7 +218,7 @@
     local("NotoSansCJKTC-Medium"), local("HiraginoSansTC-W3"),
     local("Hiragino Sans TC W3"), local("Microsoft JhengHei"),
     local("Heiti TC Light"), local("PMingLiU");
-  font-weight: 500;
+  font-weight: 500; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -231,7 +231,7 @@
     local("NotoSansCJKTC-Bold"), local("HiraginoSansTC-W6"),
     local("Hiragino Sans TC W6"), local("Microsoft JhengHei Bold"),
     local("Heiti TC Medium"), local("PMingLiU");
-  font-weight: 600;
+  font-weight: 600; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -262,7 +262,7 @@
     local("NotoSansCJKTC-Light"), local("HiraginoSansTC-W3"),
     local("Hiragino Sans TC W3"), local("Microsoft JhengHei Light"),
     local("Heiti TC Light"), local("PMingLiU_HKSCS"), local("PMingLiU");
-  font-weight: 300;
+  font-weight: 300; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -277,7 +277,7 @@
     local("NotoSansCJKTC-Regular"), local("HiraginoSansTC-W3"),
     local("Hiragino Sans TC W3"), local("Microsoft JhengHei"),
     local("Heiti TC Light"), local("PMingLiU_HKSCS"), local("PMingLiU");
-  font-weight: 400;
+  font-weight: 400; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -292,7 +292,7 @@
     local("NotoSansCJKTC-Medium"), local("HiraginoSansTC-W3"),
     local("Hiragino Sans TC W3"), local("Microsoft JhengHei"),
     local("Heiti TC Light"), local("PMingLiU_HKSCS"), local("PMingLiU");
-  font-weight: 500;
+  font-weight: 500; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -307,7 +307,7 @@
     local("NotoSansCJKTC-Bold"), local("HiraginoSansTC-W6"),
     local("Hiragino Sans TC W6"), local("Microsoft JhengHei Bold"),
     local("Heiti TC Medium"), local("PMingLiU_HKSCS"), local("PMingLiU");
-  font-weight: 600;
+  font-weight: 600; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -335,7 +335,7 @@
     local("SourceHanSansK-Light"), local("Noto Sans CJK KR Light"),
     local("NotoSansCJKKR-Light"), local("NanumBarunGothic Light"),
     local("Malgun Gothic Semilight"), local("Nanum Gothic"), local("Dotum");
-  font-weight: 300;
+  font-weight: 300; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -347,7 +347,7 @@
     local("SourceHanSansK-Regular"), local("Noto Sans CJK KR Regular"),
     local("NotoSansCJKKR-Regular"), local("NanumBarunGothic"),
     local("Malgun Gothic"), local("Nanum Gothic"), local("Dotum");
-  font-weight: 400;
+  font-weight: 400; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -359,7 +359,7 @@
     local("SourceHanSansK-Medium"), local("Noto Sans CJK KR Medium"),
     local("NotoSansCJKKR-Medium"), local("NanumBarunGothic"),
     local("Malgun Gothic"), local("Nanum Gothic"), local("Dotum");
-  font-weight: 500;
+  font-weight: 500; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }
@@ -371,7 +371,7 @@
     local("SourceHanSansK-Bold"), local("Noto Sans CJK KR Bold"),
     local("NotoSansCJKKR-Bold"), local("NanumBarunGothic Bold"),
     local("Malgun Gothic Bold"), local("Nanum Gothic Bold"), local("Dotum");
-  font-weight: 600;
+  font-weight: 600; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
   unicode-range: U+11??, U+2E80-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF,
     U+F900-FAFF, U+FE00-FE6F, U+FF00-FFEF, U+1F2??, U+2????;
 }

web_src/css/themes/theme-gitea-dark.css

@@ -141,6 +141,23 @@ gitea-theme-meta-info {
   --color-ansi-bright-magenta: #d74397;
   --color-ansi-bright-cyan: #00b6ad;
   --color-ansi-bright-white: var(--color-console-fg);
+  /* 16-color series */
+  --color-series-16-0: #7db233;
+  --color-series-16-1: #499a37;
+  --color-series-16-2: #ce4751;
+  --color-series-16-3: #8f9121;
+  --color-series-16-4: #ac32a6;
+  --color-series-16-5: #7445e9;
+  --color-series-16-6: #c67d28;
+  --color-series-16-7: #4db392;
+  --color-series-16-8: #aa4d30;
+  --color-series-16-9: #2a6f84;
+  --color-series-16-10: #c45327;
+  --color-series-16-11: #3d965c;
+  --color-series-16-12: #792a93;
+  --color-series-16-13: #439d73;
+  --color-series-16-14: #103aad;
+  --color-series-16-15: #982e85;
   /* other colors */
   --color-grey: #3d3f44;
   --color-grey-light: #898d96;

web_src/css/themes/theme-gitea-light.css

@@ -141,6 +141,23 @@ gitea-theme-meta-info {
   --color-ansi-bright-magenta: #d74397;
   --color-ansi-bright-cyan: #00b6ad;
   --color-ansi-bright-white: var(--color-console-fg);
+  /* 16-color series */
+  --color-series-16-0: #7db233;
+  --color-series-16-1: #499a37;
+  --color-series-16-2: #ce4751;
+  --color-series-16-3: #8f9121;
+  --color-series-16-4: #ac32a6;
+  --color-series-16-5: #7445e9;
+  --color-series-16-6: #c67d28;
+  --color-series-16-7: #4db392;
+  --color-series-16-8: #aa4d30;
+  --color-series-16-9: #2a6f84;
+  --color-series-16-10: #c45327;
+  --color-series-16-11: #3d965c;
+  --color-series-16-12: #792a93;
+  --color-series-16-13: #439d73;
+  --color-series-16-14: #103aad;
+  --color-series-16-15: #982e85;
   /* other colors */
   --color-grey: #697077;
   --color-grey-light: #7c838a;