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.tags/v1.19.0-rc0
@@ -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 |
@@ -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", |
@@ -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" |
@@ -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 { |
@@ -183,7 +183,7 @@ | |||
} | |||
#privateFilterCheckbox .svg { | |||
color: #888888; | |||
color: var(--color-grey); | |||
margin-right: .25rem; | |||
} | |||
@@ -59,7 +59,7 @@ | |||
.reinstall-message { | |||
width: 70%; | |||
margin: 20px auto; | |||
color: red; | |||
color: var(--color-red); | |||
text-align: left; | |||
font-weight: bold; | |||
} |
@@ -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; | |||
} | |||
} | |||
} |
@@ -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; |