@furystack/shades-common-components
Version:
98 lines • 3.83 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { Injectable } from '@furystack/inject';
import { EventHub } from '@furystack/utils';
import { cssVariableTheme, getCssVariable, useThemeCssVariables } from './css-variable-theme.js';
export class RgbColor {
r;
g;
b;
a;
constructor(r, g, b, a = 1) {
this.r = r;
this.g = g;
this.b = b;
this.a = a;
}
update(key, value) {
this[key] = value;
return this;
}
toString() {
return `rgba(${this.r},${this.g},${this.b},${this.a})`;
}
}
/**
* Service class for theme-related operations
*/
let ThemeProviderService = class ThemeProviderService extends EventHub {
/**
* @deprecated does not respect CSS vars
* @param color The background color
* @param bright The Bright color
* @param dark The Dark color
* @returns The bright or dark color variant that fits the background color
*/
getTextColor(color, bright = '#000000', dark = '#FFFFFF') {
const { r, g, b } = this.getRgbFromColorString(color);
const yiq = (r * 299 + g * 587 + b * 114) / 1000;
return yiq >= 128 ? bright : dark;
}
/**
*
* @param color The color string
* @returns The parsed R,G,B, A values
*/
getRgbFromColorString(color) {
if (color.startsWith('var(--')) {
return this.getRgbFromColorString(getCssVariable(color));
}
if (color.startsWith('#')) {
if (color.length === 7) {
const r = parseInt(color.substr(1, 2), 16);
const g = parseInt(color.substr(3, 2), 16);
const b = parseInt(color.substr(5, 2), 16);
return new RgbColor(r, g, b);
}
if (color.length === 4) {
const r = parseInt(color.substr(1, 1) + color.substr(1, 1), 16);
const g = parseInt(color.substr(2, 1) + color.substr(2, 1), 16);
const b = parseInt(color.substr(3, 1) + color.substr(3, 1), 16);
return new RgbColor(r, g, b);
}
}
if (color.startsWith('rgba(')) {
const result = new RegExp(/^rgba[(](?<red>[\d]+)[,][\s]?(?<green>[\d]+)[,][\s]?(?<blue>[\d]+)[,][\s]?(?<alpha>[\d|.]+)[)]/gm).exec(color);
if (result && result.groups) {
return new RgbColor(parseInt(result.groups.red, 10), parseInt(result.groups.green, 10), parseInt(result.groups.blue, 10), parseInt(result.groups.alpha, 10));
}
}
throw Error(`Color format '${color}' is not supported.'`);
}
theme = cssVariableTheme;
_assignedTheme = cssVariableTheme;
/**
* Returns the last assigned theme object
*/
getAssignedTheme() {
return this._assignedTheme;
}
/**
* Assigns a new theme, updates the CSS variables and emits a themeChanged event
* @param theme The Theme instance
*/
setAssignedTheme(theme) {
this._assignedTheme = theme;
useThemeCssVariables(theme);
this.emit('themeChanged', theme);
}
};
ThemeProviderService = __decorate([
Injectable({ lifetime: 'singleton' })
], ThemeProviderService);
export { ThemeProviderService };
//# sourceMappingURL=theme-provider-service.js.map