mirror of
https://github.com/HSLdevcom/digitransit-ui
synced 2026-02-02 05:40:11 +01:00
9a1afdbf5b
Configuration exposed a limited set of theme colors prefixes with 'mode-' to component libraries. Many parts of UI used either a hard coded color or incorrectly HSL theme color. Now all relevant colors can put into a general use color map and component can access them. First use case is near you mode icon row's expand arrow.
49 lines
963 B
JavaScript
49 lines
963 B
JavaScript
/* eslint no-bitwise: ["error", { "allow": [">>", "&", "|", "<<"] }] */
|
|
// eslint-disable-next-line
|
|
export function LightenDarkenColor(color, amt) {
|
|
/* https://css-tricks.com/snippets/javascript/lighten-darken-color/ */
|
|
|
|
let col = color;
|
|
let usePound = false;
|
|
|
|
if (col[0] === '#') {
|
|
col = col.slice(1);
|
|
usePound = true;
|
|
}
|
|
|
|
const num = parseInt(col, 16);
|
|
|
|
let r = (num >> 16) + amt;
|
|
|
|
if (r > 255) {
|
|
r = 255;
|
|
} else if (r < 0) {
|
|
r = 0;
|
|
}
|
|
|
|
let b = ((num >> 8) & 0x00ff) + amt;
|
|
|
|
if (b > 255) {
|
|
b = 255;
|
|
} else if (b < 0) {
|
|
b = 0;
|
|
}
|
|
|
|
let g = (num & 0x0000ff) + amt;
|
|
|
|
if (g > 255) {
|
|
g = 255;
|
|
} else if (g < 0) {
|
|
g = 0;
|
|
}
|
|
|
|
return (
|
|
(usePound ? '#' : '') +
|
|
String(`000000${(g | (b << 8) | (r << 16)).toString(16)}`).slice(-6)
|
|
);
|
|
}
|
|
|
|
/* map extended route mode to color */
|
|
export function getModeIconColor(config, mode) {
|
|
return config.colors[mode.toLowerCase()] || config.colors.primary;
|
|
}
|