mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-11-05 13:26:48 +08:00
feat(css): color-mix (#10719)
This commit is contained in:
Nathan Walker
@@ -2,9 +2,7 @@ import * as definition from '.';
|
||||
import * as types from '../utils/types';
|
||||
import * as knownColors from './known-colors';
|
||||
import { Color } from '.';
|
||||
|
||||
const SHARP = '#';
|
||||
const HEX_REGEX = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)|(^#[0-9A-F]{8}$)|(^#[0-9A-F]{4}$)/i;
|
||||
import { HEX_REGEX, argbFromColorMix, argbFromHslOrHsla, argbFromHsvOrHsva, argbFromRgbOrRgba, hslToRgb, hsvToRgb, isCssColorMixExpression, isHslOrHsla, isHsvOrHsva, isRgbOrRgba, rgbToHsl, rgbToHsv, argbFromString } from './color-utils';
|
||||
|
||||
export class ColorBase implements definition.Color {
|
||||
private _argb: number;
|
||||
@@ -29,7 +27,9 @@ export class ColorBase implements definition.Color {
|
||||
const argb = knownColors.getKnownColor(lowered);
|
||||
this._name = arg;
|
||||
this._argb = argb;
|
||||
} else if (arg[0].charAt(0) === SHARP && (arg.length === 4 || arg.length === 5 || arg.length === 7 || arg.length === 9)) {
|
||||
} else if (isCssColorMixExpression(lowered)) {
|
||||
this._argb = argbFromColorMix(lowered);
|
||||
} else if (arg[0].charAt(0) === '#' && (arg.length === 4 || arg.length === 5 || arg.length === 7 || arg.length === 9)) {
|
||||
// we dont use the regexp as it is quite slow. Instead we expect it to be a valid hex format
|
||||
// strange that it would not be. And if it is not a thrown error seems best
|
||||
// The parameter is a "#RRGGBBAA" formatted string
|
||||
@@ -89,7 +89,7 @@ export class ColorBase implements definition.Color {
|
||||
}
|
||||
|
||||
get hex(): string {
|
||||
let result = SHARP + ('000000' + (this._argb & 0xffffff).toString(16)).toUpperCase().slice(-6);
|
||||
let result = '#' + ('000000' + (this._argb & 0xffffff).toString(16)).toUpperCase().slice(-6);
|
||||
if (this.a !== 0xff) {
|
||||
return (result += ('00' + this.a.toString(16).toUpperCase()).slice(-2));
|
||||
}
|
||||
@@ -109,28 +109,7 @@ export class ColorBase implements definition.Color {
|
||||
}
|
||||
|
||||
public _argbFromString(hex: string): number {
|
||||
// always called as SHARP as first char
|
||||
hex = hex.substring(1);
|
||||
const length = hex.length;
|
||||
// first we normalize
|
||||
if (length === 3) {
|
||||
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
|
||||
} else if (length === 4) {
|
||||
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2] + hex[3] + hex[3];
|
||||
}
|
||||
|
||||
let intVal = parseInt(hex, 16);
|
||||
if (hex.length === 6) {
|
||||
// add the alpha component since the provided string is RRGGBB
|
||||
intVal = (intVal & 0x00ffffff) + 0xff000000;
|
||||
} else {
|
||||
// the new format is #RRGGBBAA
|
||||
// we need to shift the alpha value to 0x01000000 position
|
||||
const a = (intVal / 0x00000001) & 0xff;
|
||||
intVal = (intVal >>> 8) + (a & 0xff) * 0x01000000;
|
||||
}
|
||||
|
||||
return intVal;
|
||||
return argbFromString(hex);
|
||||
}
|
||||
|
||||
public equals(value: definition.Color): boolean {
|
||||
@@ -397,196 +376,3 @@ export class ColorBase implements definition.Color {
|
||||
return new Color(rgba.a, rgba.r, rgba.g, rgba.b);
|
||||
}
|
||||
}
|
||||
|
||||
function isRgbOrRgba(value: string): boolean {
|
||||
return (value.startsWith('rgb(') || value.startsWith('rgba(')) && value.endsWith(')');
|
||||
}
|
||||
|
||||
function isHslOrHsla(value: string): boolean {
|
||||
return (value.startsWith('hsl') || value.startsWith('hsla(')) && value.endsWith(')');
|
||||
}
|
||||
function isHsvOrHsva(value: string): boolean {
|
||||
return (value.startsWith('hsv') || value.startsWith('hsva(')) && value.endsWith(')');
|
||||
}
|
||||
|
||||
function parseColorWithAlpha(value: string): any {
|
||||
const separator = value.indexOf(',') !== -1 ? ',' : ' ';
|
||||
const parts = value
|
||||
.replace(/(rgb|hsl|hsv)a?\(/, '')
|
||||
.replace(')', '')
|
||||
.replace(/\//, ' ')
|
||||
.replace(/%/g, '')
|
||||
.split(separator)
|
||||
.filter((part) => Boolean(part.length));
|
||||
|
||||
let f = 255;
|
||||
let s = 255;
|
||||
let t = 255;
|
||||
let a = 255;
|
||||
|
||||
if (parts[0]) {
|
||||
f = parseFloat(parts[0].trim());
|
||||
}
|
||||
|
||||
if (parts[1]) {
|
||||
s = parseFloat(parts[1].trim());
|
||||
}
|
||||
|
||||
if (parts[2]) {
|
||||
t = parseFloat(parts[2].trim());
|
||||
}
|
||||
|
||||
if (parts[3]) {
|
||||
a = Math.round(parseFloat(parts[3].trim()) * 255);
|
||||
}
|
||||
|
||||
return { f, s, t, a };
|
||||
}
|
||||
|
||||
function argbFromRgbOrRgba(value: string): number {
|
||||
const { f: r, s: g, t: b, a } = parseColorWithAlpha(value);
|
||||
|
||||
return (a & 0xff) * 0x01000000 + (r & 0xff) * 0x00010000 + (g & 0xff) * 0x00000100 + (b & 0xff);
|
||||
}
|
||||
|
||||
function argbFromHslOrHsla(value: string): number {
|
||||
const { f: h, s: s, t: l, a } = parseColorWithAlpha(value);
|
||||
|
||||
const { r, g, b } = hslToRgb(h, s, l);
|
||||
|
||||
return (a & 0xff) * 0x01000000 + (r & 0xff) * 0x00010000 + (g & 0xff) * 0x00000100 + (b & 0xff);
|
||||
}
|
||||
|
||||
function argbFromHsvOrHsva(value: string): number {
|
||||
const { f: h, s: s, t: v, a } = parseColorWithAlpha(value);
|
||||
|
||||
const { r, g, b } = hsvToRgb(h, s, v);
|
||||
|
||||
return (a & 0xff) * 0x01000000 + (r & 0xff) * 0x00010000 + (g & 0xff) * 0x00000100 + (b & 0xff);
|
||||
}
|
||||
|
||||
// `rgbToHsl`
|
||||
// Converts an RGB color value to HSL.
|
||||
// *Assumes:* r, g, and b are contained in [0, 255]
|
||||
// *Returns:* { h, s, l } in [0,360] and [0,100]
|
||||
function rgbToHsl(r, g, b) {
|
||||
r /= 255;
|
||||
g /= 255;
|
||||
b /= 255;
|
||||
|
||||
const max = Math.max(r, g, b),
|
||||
min = Math.min(r, g, b);
|
||||
let h, s;
|
||||
const l = (max + min) / 2;
|
||||
|
||||
if (max == min) {
|
||||
h = s = 0; // achromatic
|
||||
} else {
|
||||
const d = max - min;
|
||||
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
|
||||
switch (max) {
|
||||
case r:
|
||||
h = (g - b) / d + (g < b ? 6 : 0);
|
||||
break;
|
||||
case g:
|
||||
h = (b - r) / d + 2;
|
||||
break;
|
||||
case b:
|
||||
h = (r - g) / d + 4;
|
||||
break;
|
||||
}
|
||||
|
||||
h /= 6;
|
||||
}
|
||||
|
||||
return { h: h * 360, s: s * 100, l: l * 100 };
|
||||
}
|
||||
|
||||
function hue2rgb(p, q, t) {
|
||||
if (t < 0) t += 1;
|
||||
if (t > 1) t -= 1;
|
||||
if (t < 1 / 6) return p + (q - p) * 6 * t;
|
||||
if (t < 1 / 2) return q;
|
||||
if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
|
||||
return p;
|
||||
}
|
||||
|
||||
// `hslToRgb`
|
||||
// Converts an HSL color value to RGB.
|
||||
// *Assumes:* h is contained in [0, 360] and s and l are contained [0, 100]
|
||||
// *Returns:* { r, g, b } in the set [0, 255]
|
||||
function hslToRgb(h1, s1, l1) {
|
||||
const h = (h1 % 360) / 360;
|
||||
const s = s1 / 100;
|
||||
const l = l1 / 100;
|
||||
let r, g, b;
|
||||
if (s === 0) {
|
||||
r = g = b = l; // achromatic
|
||||
} else {
|
||||
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
|
||||
const p = 2 * l - q;
|
||||
r = hue2rgb(p, q, h + 1 / 3);
|
||||
g = hue2rgb(p, q, h);
|
||||
b = hue2rgb(p, q, h - 1 / 3);
|
||||
}
|
||||
|
||||
return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255) };
|
||||
}
|
||||
|
||||
// `rgbToHsv`
|
||||
// Converts an RGB color value to HSV
|
||||
// *Assumes:* r, g, and b are contained in the set [0, 255]
|
||||
// *Returns:* { h, s, v } in [0,360] and [0,100]
|
||||
function rgbToHsv(r, g, b) {
|
||||
r /= 255;
|
||||
g /= 255;
|
||||
b /= 255;
|
||||
|
||||
const max = Math.max(r, g, b),
|
||||
min = Math.min(r, g, b);
|
||||
let h;
|
||||
const v = max;
|
||||
|
||||
const d = max - min;
|
||||
const s = max === 0 ? 0 : d / max;
|
||||
|
||||
if (max == min) {
|
||||
h = 0; // achromatic
|
||||
} else {
|
||||
switch (max) {
|
||||
case r:
|
||||
h = (g - b) / d + (g < b ? 6 : 0);
|
||||
break;
|
||||
case g:
|
||||
h = (b - r) / d + 2;
|
||||
break;
|
||||
case b:
|
||||
h = (r - g) / d + 4;
|
||||
break;
|
||||
}
|
||||
h /= 6;
|
||||
}
|
||||
return { h: h * 360, s: s * 100, v: v * 100 };
|
||||
}
|
||||
|
||||
// `hsvToRgb`
|
||||
// Converts an HSV color value to RGB.
|
||||
// *Assumes:* h is contained in [0, 360] and s and v are contained [0, 100]
|
||||
// *Returns:* { r, g, b } in the set [0, 255]
|
||||
function hsvToRgb(h1, s1, v1) {
|
||||
const h = ((h1 % 360) / 360) * 6;
|
||||
const s = s1 / 100;
|
||||
const v = v1 / 100;
|
||||
|
||||
const i = Math.floor(h),
|
||||
f = h - i,
|
||||
p = v * (1 - s),
|
||||
q = v * (1 - f * s),
|
||||
t = v * (1 - (1 - f) * s),
|
||||
mod = i % 6,
|
||||
r = [v, q, p, p, t, v][mod],
|
||||
g = [t, v, v, q, p, p][mod],
|
||||
b = [p, p, t, v, v, q][mod];
|
||||
|
||||
return { r: r * 255, g: g * 255, b: b * 255 };
|
||||
}
|
||||
|
||||
253
packages/core/color/color-utils.ts
Normal file
253
packages/core/color/color-utils.ts
Normal file
@@ -0,0 +1,253 @@
|
||||
import { color } from '@csstools/css-color-parser';
|
||||
import { parseComponentValue } from '@csstools/css-parser-algorithms';
|
||||
import { serializeRGB } from '@csstools/css-color-parser';
|
||||
import { tokenize } from '@csstools/css-tokenizer';
|
||||
|
||||
export const HEX_REGEX = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)|(^#[0-9A-F]{8}$)|(^#[0-9A-F]{4}$)/i;
|
||||
|
||||
export function isCssColorMixExpression(value: string) {
|
||||
return value.includes('color-mix(');
|
||||
}
|
||||
|
||||
export function argbFromColorMix(value: string): number {
|
||||
const astComponentValue = parseComponentValue(tokenize({ css: value }));
|
||||
const colorData = color(astComponentValue);
|
||||
|
||||
let argb: number;
|
||||
|
||||
if (colorData) {
|
||||
const serialized = serializeRGB(colorData);
|
||||
argb = argbFromRgbOrRgba(serialized.toString());
|
||||
} else {
|
||||
argb = -1;
|
||||
}
|
||||
|
||||
return argb;
|
||||
}
|
||||
|
||||
export function fromArgbToRgba(argb: number): { a: number; r: number; g: number; b: number } {
|
||||
return {
|
||||
a: (argb >> 24) & 0xff,
|
||||
r: (argb >> 16) & 0xff,
|
||||
g: (argb >> 8) & 0xff,
|
||||
b: argb & 0xff,
|
||||
};
|
||||
}
|
||||
|
||||
export function isRgbOrRgba(value: string): boolean {
|
||||
return (value.startsWith('rgb(') || value.startsWith('rgba(')) && value.endsWith(')');
|
||||
}
|
||||
|
||||
export function isHslOrHsla(value: string): boolean {
|
||||
return (value.startsWith('hsl') || value.startsWith('hsla(')) && value.endsWith(')');
|
||||
}
|
||||
export function isHsvOrHsva(value: string): boolean {
|
||||
return (value.startsWith('hsv') || value.startsWith('hsva(')) && value.endsWith(')');
|
||||
}
|
||||
|
||||
export function parseColorWithAlpha(value: string): any {
|
||||
const separator = value.indexOf(',') !== -1 ? ',' : ' ';
|
||||
const parts = value
|
||||
.replace(/(rgb|hsl|hsv)a?\(/, '')
|
||||
.replace(')', '')
|
||||
.replace(/\//, ' ')
|
||||
.replace(/%/g, '')
|
||||
.split(separator)
|
||||
.filter((part) => Boolean(part.length));
|
||||
|
||||
let f = 255;
|
||||
let s = 255;
|
||||
let t = 255;
|
||||
let a = 255;
|
||||
|
||||
if (parts[0]) {
|
||||
f = parseFloat(parts[0].trim());
|
||||
}
|
||||
|
||||
if (parts[1]) {
|
||||
s = parseFloat(parts[1].trim());
|
||||
}
|
||||
|
||||
if (parts[2]) {
|
||||
t = parseFloat(parts[2].trim());
|
||||
}
|
||||
|
||||
if (parts[3]) {
|
||||
a = Math.round(parseFloat(parts[3].trim()) * 255);
|
||||
}
|
||||
|
||||
return { f, s, t, a };
|
||||
}
|
||||
|
||||
export function argbFromString(hex: string) {
|
||||
// always called as SHARP as first char
|
||||
hex = hex.substring(1);
|
||||
const length = hex.length;
|
||||
// first we normalize
|
||||
if (length === 3) {
|
||||
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
|
||||
} else if (length === 4) {
|
||||
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2] + hex[3] + hex[3];
|
||||
}
|
||||
|
||||
let intVal = parseInt(hex, 16);
|
||||
if (hex.length === 6) {
|
||||
// add the alpha component since the provided string is RRGGBB
|
||||
intVal = (intVal & 0x00ffffff) + 0xff000000;
|
||||
} else {
|
||||
// the new format is #RRGGBBAA
|
||||
// we need to shift the alpha value to 0x01000000 position
|
||||
const a = (intVal / 0x00000001) & 0xff;
|
||||
intVal = (intVal >>> 8) + (a & 0xff) * 0x01000000;
|
||||
}
|
||||
|
||||
return intVal;
|
||||
}
|
||||
|
||||
export function argbFromRgbOrRgba(value: string): number {
|
||||
const { f: r, s: g, t: b, a } = parseColorWithAlpha(value);
|
||||
|
||||
return (a & 0xff) * 0x01000000 + (r & 0xff) * 0x00010000 + (g & 0xff) * 0x00000100 + (b & 0xff);
|
||||
}
|
||||
|
||||
export function argbFromHslOrHsla(value: string): number {
|
||||
const { f: h, s: s, t: l, a } = parseColorWithAlpha(value);
|
||||
|
||||
const { r, g, b } = hslToRgb(h, s, l);
|
||||
|
||||
return (a & 0xff) * 0x01000000 + (r & 0xff) * 0x00010000 + (g & 0xff) * 0x00000100 + (b & 0xff);
|
||||
}
|
||||
|
||||
export function argbFromHsvOrHsva(value: string): number {
|
||||
const { f: h, s: s, t: v, a } = parseColorWithAlpha(value);
|
||||
|
||||
const { r, g, b } = hsvToRgb(h, s, v);
|
||||
|
||||
return (a & 0xff) * 0x01000000 + (r & 0xff) * 0x00010000 + (g & 0xff) * 0x00000100 + (b & 0xff);
|
||||
}
|
||||
|
||||
// `rgbToHsl`
|
||||
// Converts an RGB color value to HSL.
|
||||
// *Assumes:* r, g, and b are contained in [0, 255]
|
||||
// *Returns:* { h, s, l } in [0,360] and [0,100]
|
||||
export function rgbToHsl(r: number, g: number, b: number) {
|
||||
r /= 255;
|
||||
g /= 255;
|
||||
b /= 255;
|
||||
|
||||
const max = Math.max(r, g, b),
|
||||
min = Math.min(r, g, b);
|
||||
let h, s;
|
||||
const l = (max + min) / 2;
|
||||
|
||||
if (max == min) {
|
||||
h = s = 0; // achromatic
|
||||
} else {
|
||||
const d = max - min;
|
||||
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
|
||||
switch (max) {
|
||||
case r:
|
||||
h = (g - b) / d + (g < b ? 6 : 0);
|
||||
break;
|
||||
case g:
|
||||
h = (b - r) / d + 2;
|
||||
break;
|
||||
case b:
|
||||
h = (r - g) / d + 4;
|
||||
break;
|
||||
}
|
||||
|
||||
h /= 6;
|
||||
}
|
||||
|
||||
return { h: h * 360, s: s * 100, l: l * 100 };
|
||||
}
|
||||
|
||||
export function hue2rgb(p: number, q: number, t: number) {
|
||||
if (t < 0) t += 1;
|
||||
if (t > 1) t -= 1;
|
||||
if (t < 1 / 6) return p + (q - p) * 6 * t;
|
||||
if (t < 1 / 2) return q;
|
||||
if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
|
||||
return p;
|
||||
}
|
||||
|
||||
// `hslToRgb`
|
||||
// Converts an HSL color value to RGB.
|
||||
// *Assumes:* h is contained in [0, 360] and s and l are contained [0, 100]
|
||||
// *Returns:* { r, g, b } in the set [0, 255]
|
||||
export function hslToRgb(h1: number, s1: number, l1: number) {
|
||||
const h = (h1 % 360) / 360;
|
||||
const s = s1 / 100;
|
||||
const l = l1 / 100;
|
||||
let r, g, b;
|
||||
if (s === 0) {
|
||||
r = g = b = l; // achromatic
|
||||
} else {
|
||||
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
|
||||
const p = 2 * l - q;
|
||||
r = hue2rgb(p, q, h + 1 / 3);
|
||||
g = hue2rgb(p, q, h);
|
||||
b = hue2rgb(p, q, h - 1 / 3);
|
||||
}
|
||||
|
||||
return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255) };
|
||||
}
|
||||
|
||||
// `rgbToHsv`
|
||||
// Converts an RGB color value to HSV
|
||||
// *Assumes:* r, g, and b are contained in the set [0, 255]
|
||||
// *Returns:* { h, s, v } in [0,360] and [0,100]
|
||||
export function rgbToHsv(r: number, g: number, b: number) {
|
||||
r /= 255;
|
||||
g /= 255;
|
||||
b /= 255;
|
||||
|
||||
const max = Math.max(r, g, b),
|
||||
min = Math.min(r, g, b);
|
||||
let h;
|
||||
const v = max;
|
||||
|
||||
const d = max - min;
|
||||
const s = max === 0 ? 0 : d / max;
|
||||
|
||||
if (max == min) {
|
||||
h = 0; // achromatic
|
||||
} else {
|
||||
switch (max) {
|
||||
case r:
|
||||
h = (g - b) / d + (g < b ? 6 : 0);
|
||||
break;
|
||||
case g:
|
||||
h = (b - r) / d + 2;
|
||||
break;
|
||||
case b:
|
||||
h = (r - g) / d + 4;
|
||||
break;
|
||||
}
|
||||
h /= 6;
|
||||
}
|
||||
return { h: h * 360, s: s * 100, v: v * 100 };
|
||||
}
|
||||
|
||||
// `hsvToRgb`
|
||||
// Converts an HSV color value to RGB.
|
||||
// *Assumes:* h is contained in [0, 360] and s and v are contained [0, 100]
|
||||
// *Returns:* { r, g, b } in the set [0, 255]
|
||||
export function hsvToRgb(h1: number, s1: number, v1: number) {
|
||||
const h = ((h1 % 360) / 360) * 6;
|
||||
const s = s1 / 100;
|
||||
const v = v1 / 100;
|
||||
|
||||
const i = Math.floor(h),
|
||||
f = h - i,
|
||||
p = v * (1 - s),
|
||||
q = v * (1 - f * s),
|
||||
t = v * (1 - (1 - f) * s),
|
||||
mod = i % 6,
|
||||
r = [v, q, p, p, t, v][mod],
|
||||
g = [t, v, v, q, p, p][mod],
|
||||
b = [p, p, t, v, v, q][mod];
|
||||
|
||||
return { r: r * 255, g: g * 255, b: b * 255 };
|
||||
}
|
||||
@@ -53,12 +53,15 @@
|
||||
"preuninstall": "node cli-hooks/preuninstall.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@csstools/css-calc": "~2.1.2",
|
||||
"@csstools/css-color-parser": "^3.0.8",
|
||||
"@csstools/css-parser-algorithms": "^3.0.4",
|
||||
"@csstools/css-tokenizer": "^3.0.3",
|
||||
"@nativescript/hook": "~2.0.0",
|
||||
"acorn": "^8.7.0",
|
||||
"css-tree": "^1.1.2",
|
||||
"css-what": "^6.1.0",
|
||||
"emoji-regex": "^10.2.1",
|
||||
"reduce-css-calc": "^2.1.7",
|
||||
"tslib": "^2.0.0"
|
||||
},
|
||||
"nativescript": {
|
||||
|
||||
@@ -2,6 +2,9 @@
|
||||
"extends": "../../tsconfig.base.json",
|
||||
"files": [],
|
||||
"include": [],
|
||||
"compilerOptions": {
|
||||
"moduleResolution": "bundler"
|
||||
},
|
||||
"references": [
|
||||
{
|
||||
"path": "./tsconfig.lib.json"
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
import { ViewBase } from '../view-base';
|
||||
|
||||
// Types.
|
||||
import { PropertyChangeData, WrappedValue } from '../../../data/observable';
|
||||
import { Trace } from '../../../trace';
|
||||
|
||||
@@ -163,20 +161,27 @@ export function _evaluateCssCalcExpression(value: string) {
|
||||
}
|
||||
|
||||
if (isCssCalcExpression(value)) {
|
||||
// Note: reduce-css-calc can't handle certain values
|
||||
let cssValue = value.replace(/([0-9]+(\.[0-9]+)?)dip\b/g, '$1');
|
||||
if (cssValue.includes('unset')) {
|
||||
cssValue = cssValue.replace(/unset/g, '0');
|
||||
}
|
||||
if (cssValue.includes('infinity')) {
|
||||
cssValue = cssValue.replace(/infinity/g, '999999');
|
||||
}
|
||||
return require('reduce-css-calc')(cssValue);
|
||||
return require('@csstools/css-calc').calc(_replaceKeywordsWithValues(_replaceDip(value)));
|
||||
} else {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
|
||||
function _replaceDip(value: string) {
|
||||
return value.replace(/([0-9]+(\.[0-9]+)?)dip\b/g, '$1');
|
||||
}
|
||||
|
||||
function _replaceKeywordsWithValues(value: string) {
|
||||
let cssValue = value;
|
||||
if (cssValue.includes('unset')) {
|
||||
cssValue = cssValue.replace(/unset/g, '0');
|
||||
}
|
||||
if (cssValue.includes('infinity')) {
|
||||
cssValue = cssValue.replace(/infinity/g, '999999');
|
||||
}
|
||||
return cssValue;
|
||||
}
|
||||
|
||||
function getPropertiesFromMap(map): Property<any, any>[] | CssProperty<any, any>[] {
|
||||
const props = [];
|
||||
Object.getOwnPropertySymbols(map).forEach((symbol) => props.push(map[symbol]));
|
||||
|
||||
36
packages/core/ui/styling/css-color-mix.spec.ts
Normal file
36
packages/core/ui/styling/css-color-mix.spec.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
import { Color } from '../../color';
|
||||
|
||||
describe('css-color-mix', () => {
|
||||
// all examples from:
|
||||
// https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix
|
||||
|
||||
it('color-mix(in oklab, var(--color-black) 50%, transparent)', () => {
|
||||
const color = new Color('color-mix(in oklab, black 50%, transparent)');
|
||||
expect(color.toRgbString()).toBe('rgba(0, 0, 0, 0.50)');
|
||||
});
|
||||
|
||||
it('color-mix(in hsl, hsl(200 50 80), coral 80%)', () => {
|
||||
const color = new Color('color-mix(in hsl, hsl(200 50 80), coral 80%)');
|
||||
expect(color.toRgbString()).toBe('rgba(247, 103, 149, 1.00)');
|
||||
});
|
||||
|
||||
it('color-mix(in lch longer hue, hsl(200deg 50% 80%), coral)', () => {
|
||||
const color = new Color('color-mix(in lch longer hue, hsl(200deg 50% 80%), coral)');
|
||||
expect(color.toRgbString()).toBe('rgba(136, 202, 134, 1.00)');
|
||||
});
|
||||
|
||||
it('color-mix(in srgb, plum, #f00)', () => {
|
||||
const color = new Color('color-mix(in srgb, plum, #f00)');
|
||||
expect(color.toRgbString()).toBe('rgba(238, 80, 110, 1.00)');
|
||||
});
|
||||
|
||||
it('color-mix(in lab, plum 60%, #f00 50%)', () => {
|
||||
const color = new Color('color-mix(in lab, plum 60%, #f00 50%)');
|
||||
expect(color.toRgbString()).toBe('rgba(247, 112, 125, 1.00)');
|
||||
});
|
||||
|
||||
it('color-mix(in --swop5c, red, blue)', () => {
|
||||
const color = new Color('color-mix(in --swop5c, red, blue)');
|
||||
expect(color.toRgbString()).toBe('rgba(0, 0, 255, 0.00)');
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user