From ee21d5453f335e2530ba947e1896353d663525ad Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 23 Nov 2022 01:22:27 +0100 Subject: [PATCH] Move all remaining colors into CSS variables (#21903) This should eliminate all non-variable color usage in the styles, making gitea fully themeable via CSS variables. Also, it adds a linter to enforce variables for colors. --- .stylelintrc.yaml | 11 +++ package-lock.json | 120 +++++++++++++++++++++++ package.json | 1 + web_src/less/_base.less | 27 +++-- web_src/less/_dashboard.less | 2 +- web_src/less/_install.less | 2 +- web_src/less/_repository.less | 66 ++++++------- web_src/less/themes/theme-arc-green.less | 13 +++ 8 files changed, 199 insertions(+), 43 deletions(-) diff --git a/.stylelintrc.yaml b/.stylelintrc.yaml index 342bf6a4e860..d51a08bf8e59 100644 --- a/.stylelintrc.yaml +++ b/.stylelintrc.yaml @@ -1,8 +1,19 @@ extends: stylelint-config-standard +plugins: + - stylelint-declaration-strict-value + overrides: - files: ["**/*.less"] customSyntax: postcss-less + - files: ["**/*.less"] + rules: + scale-unlimited/declaration-strict-value: [color, { + ignoreValues: /^(inherit|transparent|unset|initial)$/ + }] + - files: ["**/chroma/*", "**/codemirror/*", "**/standalone/*", "**/console/*"] + rules: + scale-unlimited/declaration-strict-value: null rules: alpha-value-notation: null diff --git a/package-lock.json b/package-lock.json index 346dae412df9..b9c649c9de93 100644 --- a/package-lock.json +++ b/package-lock.json @@ -65,6 +65,7 @@ "postcss-less": "6.0.0", "stylelint": "14.15.0", "stylelint-config-standard": "29.0.0", + "stylelint-declaration-strict-value": "1.9.1", "svgo": "3.0.2", "updates": "13.2.1", "vitest": "0.25.2" @@ -2260,6 +2261,15 @@ "node": ">= 8" } }, + "node_modules/css-color-names": { + "version": "0.0.4", + "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz", + "integrity": "sha512-zj5D7X1U2h2zsXOAM8EyUREBnnts6H+Jm+d1M2DbiQQcUtnqgQsMrdo8JW9R80YFUmIdBZeMu5wvYM7hcgWP/Q==", + "dev": true, + "engines": { + "node": "*" + } + }, "node_modules/css-functions-list": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.1.0.tgz", @@ -2310,6 +2320,12 @@ "url": "https://github.com/sponsors/fb55" } }, + "node_modules/css-shorthand-properties": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/css-shorthand-properties/-/css-shorthand-properties-1.1.1.tgz", + "integrity": "sha512-Md+Juc7M3uOdbAFwOYlTrccIZ7oCFuzrhKYQjdeUEW/sE1hv17Jp/Bws+ReOPpGVBTYCBoYo+G17V5Qo8QQ75A==", + "dev": true + }, "node_modules/css-tree": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz", @@ -2324,6 +2340,23 @@ "npm": ">=7.0.0" } }, + "node_modules/css-values": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/css-values/-/css-values-0.1.0.tgz", + "integrity": "sha512-hQ6JSn4t/70aOCvdlP9zTOsFFUifMSKWz3PX7rz5NZl+uEHCqTFVJJvfP07isErCGEVHYoc8Orja8wLKZRvOeg==", + "dev": true, + "dependencies": { + "css-color-names": "0.0.4", + "ends-with": "^0.2.0", + "postcss-value-parser": "^3.3.0" + } + }, + "node_modules/css-values/node_modules/postcss-value-parser": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz", + "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==", + "dev": true + }, "node_modules/css-what": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz", @@ -3497,6 +3530,15 @@ "node": ">= 4" } }, + "node_modules/ends-with": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/ends-with/-/ends-with-0.2.0.tgz", + "integrity": "sha512-lRppY4dK3VkqBdR242sKcAJeYc8Gf/DhoX9AWvWI2RzccmLnqBQfwm2k4oSDv5MPDjUqawCauXhZkyWxkVhRsg==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/enhanced-resolve": { "version": "5.10.0", "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz", @@ -7990,6 +8032,15 @@ "node": ">=8" } }, + "node_modules/shortcss": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/shortcss/-/shortcss-0.1.3.tgz", + "integrity": "sha512-MIOoTd99CIGTrAuGiMUx9VZrnrZmWzEHuKbGM/w+ia/w98cezhlN9w4aQOVSxswdoqkUnWrMw3tThOi3sevZAg==", + "dev": true, + "dependencies": { + "css-shorthand-properties": "^1.0.0" + } + }, "node_modules/side-channel": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz", @@ -8399,6 +8450,19 @@ "stylelint": "^14.14.0" } }, + "node_modules/stylelint-declaration-strict-value": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/stylelint-declaration-strict-value/-/stylelint-declaration-strict-value-1.9.1.tgz", + "integrity": "sha512-iIkMh2ukIfSTtJoEDgGq5cqUyYWP8NExPk2YSGcePtFikb7KmJoSi0QYajiZRxge/PTbYspci7nIcrtArJlAsw==", + "dev": true, + "dependencies": { + "css-values": "^0.1.0", + "shortcss": "^0.1.3" + }, + "peerDependencies": { + "stylelint": ">=7 <=14" + } + }, "node_modules/stylelint/node_modules/balanced-match": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-2.0.0.tgz", @@ -11448,6 +11512,12 @@ "which": "^2.0.1" } }, + "css-color-names": { + "version": "0.0.4", + "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz", + "integrity": "sha512-zj5D7X1U2h2zsXOAM8EyUREBnnts6H+Jm+d1M2DbiQQcUtnqgQsMrdo8JW9R80YFUmIdBZeMu5wvYM7hcgWP/Q==", + "dev": true + }, "css-functions-list": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.1.0.tgz", @@ -11482,6 +11552,12 @@ "nth-check": "^2.0.1" } }, + "css-shorthand-properties": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/css-shorthand-properties/-/css-shorthand-properties-1.1.1.tgz", + "integrity": "sha512-Md+Juc7M3uOdbAFwOYlTrccIZ7oCFuzrhKYQjdeUEW/sE1hv17Jp/Bws+ReOPpGVBTYCBoYo+G17V5Qo8QQ75A==", + "dev": true + }, "css-tree": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz", @@ -11492,6 +11568,25 @@ "source-map-js": "^1.0.1" } }, + "css-values": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/css-values/-/css-values-0.1.0.tgz", + "integrity": "sha512-hQ6JSn4t/70aOCvdlP9zTOsFFUifMSKWz3PX7rz5NZl+uEHCqTFVJJvfP07isErCGEVHYoc8Orja8wLKZRvOeg==", + "dev": true, + "requires": { + "css-color-names": "0.0.4", + "ends-with": "^0.2.0", + "postcss-value-parser": "^3.3.0" + }, + "dependencies": { + "postcss-value-parser": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz", + "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==", + "dev": true + } + } + }, "css-what": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz", @@ -12421,6 +12516,12 @@ "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz", "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==" }, + "ends-with": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/ends-with/-/ends-with-0.2.0.tgz", + "integrity": "sha512-lRppY4dK3VkqBdR242sKcAJeYc8Gf/DhoX9AWvWI2RzccmLnqBQfwm2k4oSDv5MPDjUqawCauXhZkyWxkVhRsg==", + "dev": true + }, "enhanced-resolve": { "version": "5.10.0", "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz", @@ -15622,6 +15723,15 @@ "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==" }, + "shortcss": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/shortcss/-/shortcss-0.1.3.tgz", + "integrity": "sha512-MIOoTd99CIGTrAuGiMUx9VZrnrZmWzEHuKbGM/w+ia/w98cezhlN9w4aQOVSxswdoqkUnWrMw3tThOi3sevZAg==", + "dev": true, + "requires": { + "css-shorthand-properties": "^1.0.0" + } + }, "side-channel": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz", @@ -15970,6 +16080,16 @@ "stylelint-config-recommended": "^9.0.0" } }, + "stylelint-declaration-strict-value": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/stylelint-declaration-strict-value/-/stylelint-declaration-strict-value-1.9.1.tgz", + "integrity": "sha512-iIkMh2ukIfSTtJoEDgGq5cqUyYWP8NExPk2YSGcePtFikb7KmJoSi0QYajiZRxge/PTbYspci7nIcrtArJlAsw==", + "dev": true, + "requires": { + "css-values": "^0.1.0", + "shortcss": "^0.1.3" + } + }, "stylis": { "version": "4.1.3", "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz", diff --git a/package.json b/package.json index a90c1618fafd..15c2601cd7aa 100644 --- a/package.json +++ b/package.json @@ -65,6 +65,7 @@ "postcss-less": "6.0.0", "stylelint": "14.15.0", "stylelint-config-standard": "29.0.0", + "stylelint-declaration-strict-value": "1.9.1", "svgo": "3.0.2", "updates": "13.2.1", "vitest": "0.25.2" diff --git a/web_src/less/_base.less b/web_src/less/_base.less index 6054331ec49e..14b69dec49a6 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -118,6 +118,20 @@ --color-info-border: #a9d5de; --color-info-bg: #f8ffff; --color-info-text: #276f86; + --color-red-badge: #db2828; + --color-red-badge-bg: #db28281a; + --color-red-badge-hover-bg: #db28284d; + --color-green-badge: #21ba45; + --color-green-badge-bg: #21ba451a; + --color-green-badge-hover-bg: #21ba454d; + --color-yellow-badge: #fbbd08; + --color-yellow-badge-bg: #fbbd081a; + --color-yellow-badge-hover-bg: #fbbd084d; + --color-orange-badge: #f2711c; + --color-orange-badge-bg: #f2711c1a; + --color-orange-badge-hover-bg: #f2711c4d; + --color-git: #f05133; + /* target-based colors */ --color-body: #ffffff; --color-text-dark: #080808; --color-text: #212121; @@ -1196,11 +1210,7 @@ a.ui.card:hover, } .searchbox { - background-color: #f4f4f4 !important; - - &:focus { - background-color: #e9e9e9 !important; - } + background-color: var(--color-input-background) !important; } .text .svg { @@ -1932,7 +1942,7 @@ footer { } .archived-icon { - color: lighten(#000000, 70%) !important; + color: var(--color-secondary-dark-2) !important; } .oauth2-authorize-application-box { @@ -2085,7 +2095,7 @@ a.ui.label:hover { .lines-commit { &:extend(.unselectable); vertical-align: top; - color: #999999; + color: var(--color-grey); padding: 0 !important; background: var(--color-code-sidebar-bg); width: 1%; @@ -2161,6 +2171,7 @@ a.ui.label:hover { color: var(--color-text); } +.ui.active.button, .ui.button:active, .ui.active.button:active, .ui.active.button:hover { @@ -2312,7 +2323,7 @@ a.ui.basic.label:hover { } .migrate .svg.gitea-git { - color: #f05133; /* from https://upload.wikimedia.org/wikipedia/commons/e/e0/Git-logo.svg */ + color: var(--color-git); } .color-icon { diff --git a/web_src/less/_dashboard.less b/web_src/less/_dashboard.less index e9a906cbedaa..4ba0788af108 100644 --- a/web_src/less/_dashboard.less +++ b/web_src/less/_dashboard.less @@ -183,7 +183,7 @@ } #privateFilterCheckbox .svg { - color: #888888; + color: var(--color-grey); margin-right: .25rem; } diff --git a/web_src/less/_install.less b/web_src/less/_install.less index 515d727f8a4f..026a76fbbad4 100644 --- a/web_src/less/_install.less +++ b/web_src/less/_install.less @@ -59,7 +59,7 @@ .reinstall-message { width: 70%; margin: 20px auto; - color: red; + color: var(--color-red); text-align: left; font-weight: bold; } diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index f89a5df33d9b..85cb842b72f2 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -548,7 +548,7 @@ position: absolute; top: 9px; left: 10px; - color: #b0c4ce; + color: var(--color-grey); } } } @@ -915,8 +915,8 @@ border: 1px solid var(--color-light-border); &.isSigned.isWarning { - border: 1px solid #db2828; - background: fade(#db2828, 10%); + border: 1px solid var(--color-red-badge); + background: var(--color-red-badge-bg); .shortsha { display: inline-block; @@ -924,13 +924,13 @@ } &:hover { - background: fade(#db2828, 30%) !important; + background: var(--color-red-badge-hover-bg) !important; } } &.isSigned.isVerified { - border: 1px solid #21ba45; - background: fade(#21ba45, 10%); + border: 1px solid var(--color-green-badge); + background: var(--color-green-badge-bg); .shortsha { display: inline-block; @@ -938,13 +938,13 @@ } &:hover { - background: fade(#21ba45, 30%) !important; + background: var(--color-green-badge-hover-bg) !important; } } &.isSigned.isVerifiedUntrusted { - border: 1px solid #fbbd08; - background: fade(#fbbd08, 10%); + border: 1px solid var(--color-yellow-badge); + background: var(--color-yellow-badge-bg); .shortsha { display: inline-block; @@ -952,13 +952,13 @@ } &:hover { - background: fade(#fbbd08, 30%) !important; + background: var(--color-yellow-badge-hover-bg) !important; } } &.isSigned.isVerifiedUnmatched { - border: 1px solid #f2711c; - background: fade(#f2711c, 10%); + border: 1px solid var(--color-orange-badge); + background: var(--color-orange-badge-bg); .shortsha { display: inline-block; @@ -966,7 +966,7 @@ } &:hover { - background: fade(#f2711c, 30%) !important; + background: var(--color-orange-badge-hover-bg) !important; } } } @@ -1433,8 +1433,8 @@ } &.isSigned.isWarning { - border: 1px solid #db2828; - background: fade(#db2828, 10%); + border: 1px solid var(--color-red-badge); + background: var(--color-red-badge-bg); .shortsha { display: inline-block; @@ -1442,18 +1442,18 @@ } .detail.icon { - border-left: 1px solid #db2828; - color: #db2828; + border-left: 1px solid var(--color-red-badge); + color: var(--color-red-badge); } &:hover { - background: fade(#db2828, 30%) !important; + background: var(--color-red-badge-hover-bg) !important; } } &.isSigned.isVerified { - border: 1px solid #21ba45; - background: fade(#21ba45, 10%); + border: 1px solid var(--color-green-badge); + background: var(--color-green-badge-bg); .shortsha { display: inline-block; @@ -1461,18 +1461,18 @@ } .detail.icon { - border-left: 1px solid #21ba45; - color: #21ba45; + border-left: 1px solid var(--color-green-badge); + color: var(--color-green-badge); } &:hover { - background: fade(#21ba45, 30%) !important; + background: var(--color-green-badge-hover-bg) !important; } } &.isSigned.isVerifiedUntrusted { - border: 1px solid #fbbd08; - background: fade(#fbbd08, 10%); + border: 1px solid var(--color-yellow-badge); + background: var(--color-yellow-badge-bg); .shortsha { display: inline-block; @@ -1480,18 +1480,18 @@ } .detail.icon { - border-left: 1px solid #fbbd08; - color: #fbbd08; + border-left: 1px solid var(--color-yellow-badge); + color: var(--color-yellow-badge); } &:hover { - background: fade(#fbbd08, 30%) !important; + background: var(--color-yellow-badge-hover-bg) !important; } } &.isSigned.isVerifiedUnmatched { - border: 1px solid #f2711c; - background: fade(#f2711c, 10%); + border: 1px solid var(--color-orange-badge); + background: var(--color-orange-badge-bg); .shortsha { display: inline-block; @@ -1499,12 +1499,12 @@ } .detail.icon { - border-left: 1px solid #f2711c; - color: #f2711c; + border-left: 1px solid var(--color-orange-badge); + color: var(--color-orange-badge); } &:hover { - background: fade(#f2711c, 30%) !important; + background: var(--color-orange-badge-hover-bg) !important; } } } diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less index fab1b9c3b473..8c05ad278f4c 100644 --- a/web_src/less/themes/theme-arc-green.less +++ b/web_src/less/themes/theme-arc-green.less @@ -107,6 +107,19 @@ --color-info-border: #306090; --color-info-bg: #26354c; --color-info-text: #38a8e8; + --color-red-badge: #db2828; + --color-red-badge-bg: #db28281a; + --color-red-badge-hover-bg: #db28284d; + --color-green-badge: #21ba45; + --color-green-badge-bg: #21ba451a; + --color-green-badge-hover-bg: #21ba454d; + --color-yellow-badge: #fbbd08; + --color-yellow-badge-bg: #fbbd081a; + --color-yellow-badge-hover-bg: #fbbd084d; + --color-orange-badge: #f2711c; + --color-orange-badge-bg: #f2711c1a; + --color-orange-badge-hover-bg: #f2711c4d; + --color-git: #f05133; /* target-based colors */ --color-body: #383c4a; --color-box-header: #404652;