Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
silverwind merged 9 commits into from
May 7, 2026
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
1ad0243
Lint bare `fill`/`stroke` colors, clean stylelint overrides
silverwind May 4, 2026
a945c1c
Replace stylelint file-level disables with narrower scope
silverwind May 4, 2026
5f8b2f0
Use color-mix in srgb at 13% for graph highlight palette
silverwind May 4, 2026
70aef30
Add highlight CSS vars and devtest series-colors page
silverwind May 4, 2026
8543ba9
Simplify series-colors devtest to 16x2 grid of 12px squares
silverwind May 4, 2026
b85e16c
Drop unused .flow-group.highlight rules, file-level disable for conso…
silverwind May 4, 2026
9e4ffbb
Remove series-colors devtest page
silverwind May 4, 2026
8506817
Convert stylelint.config.js to .ts
silverwind May 4, 2026
186d5af
Merge branch 'main' into stylelint-fill-stroke
silverwind May 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 3 additions & 17 deletions stylelint.config.js → stylelint.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
// @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)),
fileURLToPath(new URL('web_src/css/themes/theme-gitea-light.css', import.meta.url)),
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,
Expand All @@ -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',
Expand Down Expand Up @@ -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',
Expand All @@ -148,4 +134,4 @@ export default {
'shorthand-property-no-redundant-values': true,
'value-no-vendor-prefix': [true, {ignoreValues: ['box', 'inline-box']}],
},
};
} satisfies Config;
1 change: 1 addition & 0 deletions web_src/css/features/console.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
Expand Down
150 changes: 35 additions & 115 deletions web_src/css/features/gitgraph.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Comment thread
silverwind marked this conversation as resolved.

#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-1 {
stroke: #499a37;
fill: #499a37;
stroke: var(--color-series-16-1);
fill: var(--color-series-16-1);
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-2 {
stroke: #ce4751;
fill: #ce4751;
stroke: var(--color-series-16-2);
fill: var(--color-series-16-2);
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-3 {
stroke: #8f9121;
fill: #8f9121;
stroke: var(--color-series-16-3);
fill: var(--color-series-16-3);
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-4 {
stroke: #ac32a6;
fill: #ac32a6;
stroke: var(--color-series-16-4);
fill: var(--color-series-16-4);
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-5 {
stroke: #7445e9;
fill: #7445e9;
stroke: var(--color-series-16-5);
fill: var(--color-series-16-5);
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-6 {
stroke: #c67d28;
fill: #c67d28;
stroke: var(--color-series-16-6);
fill: var(--color-series-16-6);
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-7 {
stroke: #4db392;
fill: #4db392;
stroke: var(--color-series-16-7);
fill: var(--color-series-16-7);
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-8 {
stroke: #aa4d30;
fill: #aa4d30;
stroke: var(--color-series-16-8);
fill: var(--color-series-16-8);
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-9 {
stroke: #2a6f84;
fill: #2a6f84;
stroke: var(--color-series-16-9);
fill: var(--color-series-16-9);
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-10 {
stroke: #c45327;
fill: #c45327;
stroke: var(--color-series-16-10);
fill: var(--color-series-16-10);
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-11 {
stroke: #3d965c;
fill: #3d965c;
stroke: var(--color-series-16-11);
fill: var(--color-series-16-11);
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-12 {
stroke: #792a93;
fill: #792a93;
stroke: var(--color-series-16-12);
fill: var(--color-series-16-12);
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-13 {
stroke: #439d73;
fill: #439d73;
stroke: var(--color-series-16-13);
fill: var(--color-series-16-13);
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-14 {
stroke: #103aad;
fill: #103aad;
stroke: var(--color-series-16-14);
fill: var(--color-series-16-14);
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-15 {
stroke: #982e85;
fill: #982e85;
}

#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;
stroke: var(--color-series-16-15);
fill: var(--color-series-16-15);
}
Loading