mirrors/gitea
1
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2026-03-10 02:55:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Replace tinycolor2 with colord (#36673)

Browse Source 
[`colord`](https://github.com/omgovich/colord) is significantly smaller
than [`tinycolor2`](https://github.com/bgrins/TinyColor) (~4KB vs ~29KB
minified) and ships its own TypeScript types, removing the need for
`@types/tinycolor2`.

Behaviour is exactly the same for our use cases. By using `.alpha(1)` we
force the function to always output 6-digit hex format (it would output
8-digit for non-opaque colors).

---------

Signed-off-by: silverwind <me@silverwind.io>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
silverwind
2026-02-20 16:43:01 +01:00
committed by GitHub
parent 87f7291909
commit 91dc737a35
4 changed files with 13 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web_src/js/features/codeeditor.ts
View File

@@ -1,4 +1,4 @@
import tinycolor from 'tinycolor2';
import {colord} from 'colord';
import {basename, extname, isObject, isDarkTheme} from '../utils.ts';
import {onInputDebounce} from '../utils/dom.ts';
import type MonacoNamespace from 'monaco-editor';
@@ -94,7 +94,7 @@ function updateTheme(monaco: Monaco): void {
// https://github.com/microsoft/monaco-editor/issues/2427
// also, monaco can only parse 6-digit hex colors, so we convert the colors to that format
const styles = window.getComputedStyle(document.documentElement);
const getColor = (name: string) => tinycolor(styles.getPropertyValue(name).trim()).toString('hex6');
const getColor = (name: string) => colord(styles.getPropertyValue(name).trim()).alpha(1).toHex();
monaco.editor.defineTheme('gitea', {
base: isDarkTheme() ? 'vs-dark' : 'vs',

15
web_src/js/utils/color.ts
View File

@@ -1,22 +1,21 @@
import tinycolor from 'tinycolor2';
import type {ColorInput} from 'tinycolor2';
import {colord} from 'colord';
import type {AnyColor} from 'colord';
/** Returns relative luminance for a SRGB color - https://en.wikipedia.org/wiki/Relative_luminance */
// Keep this in sync with modules/util/color.go
function getRelativeLuminance(color: ColorInput): number {
const {r, g, b} = tinycolor(color).toRgb();
function getRelativeLuminance(color: AnyColor): number {
const {r, g, b} = colord(color).toRgb();
return (0.2126729 * r + 0.7151522 * g + 0.072175 * b) / 255;
}
function useLightText(backgroundColor: ColorInput): boolean {
function useLightText(backgroundColor: AnyColor): boolean {
return getRelativeLuminance(backgroundColor) < 0.453;
}
/** Given a background color, returns a black or white foreground color that the highest
* contrast ratio. */
/** Given a background color, returns a black or white foreground color with the highest contrast ratio. */
// In the future, the APCA contrast function, or CSS `contrast-color` will be better.
// https://github.com/color-js/color.js/blob/eb7b53f7a13bb716ec8b28c7a56f052cd599acd9/src/contrast/APCA.js#L42
export function contrastColor(backgroundColor: ColorInput): string {
export function contrastColor(backgroundColor: AnyColor): string {
return useLightText(backgroundColor) ? '#fff' : '#000';
}