From 0c1f63bbc18785504d0a1549323b2ab560324754 Mon Sep 17 00:00:00 2001 From: Angus MacDonald Date: Sun, 29 Nov 2020 12:16:08 -0600 Subject: [PATCH] Add support for color names --- src/is/is.ts | 19 +++- src/mathf/color.ts | 8 +- src/string/color-name-to-hex.ts | 160 ++++++++++++++++++++++++++++++++ src/string/css-unit.ts | 16 +++- 4 files changed, 195 insertions(+), 8 deletions(-) create mode 100644 src/string/color-name-to-hex.ts diff --git a/src/is/is.ts b/src/is/is.ts index 31b2756bce..611c40621c 100644 --- a/src/is/is.ts +++ b/src/is/is.ts @@ -1,7 +1,8 @@ - /** * A utility function that generally tests the state of things. */ +import {ColorNameToHex} from '../string/color-name-to-hex'; + export class is { /** @@ -344,6 +345,20 @@ export class is { return is.string(value) && value.startsWith('#'); } + /** + * A string value that appears to be a css color. + * + * ``` + * is.cssHex('red') // true + * is.cssHex('blue') // true + * is.cssHex('lemonchiffon') // true + * is.cssHex('samwise gamgee') // false + * + * ``` + */ + static cssColorName(value: any): boolean { + return ColorNameToHex.has(value); + } /** * A string value that appears to be a css rgba like. @@ -444,4 +459,4 @@ export class is { var re = new RegExp(botPattern, 'i'); return re.test(navigator.userAgent); } -} \ No newline at end of file +} diff --git a/src/mathf/color.ts b/src/mathf/color.ts index 2d41188a91..c11a45f501 100644 --- a/src/mathf/color.ts +++ b/src/mathf/color.ts @@ -1,5 +1,6 @@ import { mathf } from './mathf'; import { is } from '..'; +import {ColorNameToHex} from '../string/color-name-to-hex'; export interface ColorRGBA { r: number, @@ -207,12 +208,17 @@ export class color { * color.cssToRgba('#FFFFFF') // { r: 255, b: 255, g: 255, a: 1} * color.cssToRgba('rgba(255, 255, 255, 0.3)') // { r: 255, b: 255, g: 255, a: 0.3} * color.cssToRgb('rgb(255, 255, 255)') // { r: 255, b: 255, g: 255, a: 1} + * color.cssToRgb('red') // { r: 255, b: 0, g: 0, a: 1} * * color.cssToRgba(20) // null * color.cssToRgba('hello') // null * ``` */ static cssToRgba(css: string): ColorRGBA | null { + if (is.cssColorName(css)) { + return this.hexToRgba(ColorNameToHex.get(css)); + } + if (is.cssHex(css)) { return color.hexToRgba(css); } @@ -258,4 +264,4 @@ export class color { static rgbaToCss(rgba: ColorRGBA): string { return `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${rgba.a})`; } -} \ No newline at end of file +} diff --git a/src/string/color-name-to-hex.ts b/src/string/color-name-to-hex.ts new file mode 100644 index 0000000000..0da47ee1da --- /dev/null +++ b/src/string/color-name-to-hex.ts @@ -0,0 +1,160 @@ +const mapping: Map = new Map([ + ['black', '#000000'], + ['silver', '#c0c0c0'], + ['gray', '#808080'], + ['white', '#ffffff'], + ['maroon', '#800000'], + ['red', '#ff0000'], + ['purple', '#800080'], + ['fuchsia', '#ff00ff'], + ['green', '#008000'], + ['lime', '#00ff00'], + ['olive', '#808000'], + ['yellow', '#ffff00'], + ['navy', '#000080'], + ['blue', '#0000ff'], + ['teal', '#008080'], + ['aqua', '#00ffff'], + ['orange', '#ffa500'], + ['aliceblue', '#f0f8ff'], + ['antiquewhite', '#faebd7'], + ['aquamarine', '#7fffd4'], + ['azure', '#f0ffff'], + ['beige', '#f5f5dc'], + ['bisque', '#ffe4c4'], + ['blanchedalmond', '#ffebcd'], + ['blueviolet', '#8a2be2'], + ['brown', '#a52a2a'], + ['burlywood', '#deb887'], + ['cadetblue', '#5f9ea0'], + ['chartreuse', '#7fff00'], + ['chocolate', '#d2691e'], + ['coral', '#ff7f50'], + ['cornflowerblue', '#6495ed'], + ['cornsilk', '#fff8dc'], + ['crimson', '#dc143c'], + ['cyan', '#00ffff'], + ['darkblue', '#00008b'], + ['darkcyan', '#008b8b'], + ['darkgoldenrod', '#b8860b'], + ['darkgray', '#a9a9a9'], + ['darkgreen', '#006400'], + ['darkgrey', '#a9a9a9'], + ['darkkhaki', '#bdb76b'], + ['darkmagenta', '#8b008b'], + ['darkolivegreen', '#556b2f'], + ['darkorange', '#ff8c00'], + ['darkorchid', '#9932cc'], + ['darkred', '#8b0000'], + ['darksalmon', '#e9967a'], + ['darkseagreen', '#8fbc8f'], + ['darkslateblue', '#483d8b'], + ['darkslategray', '#2f4f4f'], + ['darkslategrey', '#2f4f4f'], + ['darkturquoise', '#00ced1'], + ['darkviolet', '#9400d3'], + ['deeppink', '#ff1493'], + ['deepskyblue', '#00bfff'], + ['dimgray', '#696969'], + ['dimgrey', '#696969'], + ['dodgerblue', '#1e90ff'], + ['firebrick', '#b22222'], + ['floralwhite', '#fffaf0'], + ['forestgreen', '#228b22'], + ['gainsboro', '#dcdcdc'], + ['ghostwhite', '#f8f8ff'], + ['gold', '#ffd700'], + ['goldenrod', '#daa520'], + ['greenyellow', '#adff2f'], + ['grey', '#808080'], + ['honeydew', '#f0fff0'], + ['hotpink', '#ff69b4'], + ['indianred', '#cd5c5c'], + ['indigo', '#4b0082'], + ['ivory', '#fffff0'], + ['khaki', '#f0e68c'], + ['lavender', '#e6e6fa'], + ['lavenderblush', '#fff0f5'], + ['lawngreen', '#7cfc00'], + ['lemonchiffon', '#fffacd'], + ['lightblue', '#add8e6'], + ['lightcoral', '#f08080'], + ['lightcyan', '#e0ffff'], + ['lightgoldenrodyellow', '#fafad2'], + ['lightgray', '#d3d3d3'], + ['lightgreen', '#90ee90'], + ['lightgrey', '#d3d3d3'], + ['lightpink', '#ffb6c1'], + ['lightsalmon', '#ffa07a'], + ['lightseagreen', '#20b2aa'], + ['lightskyblue', '#87cefa'], + ['lightslategray', '#778899'], + ['lightslategrey', '#778899'], + ['lightsteelblue', '#b0c4de'], + ['lightyellow', '#ffffe0'], + ['limegreen', '#32cd32'], + ['linen', '#faf0e6'], + ['magenta', '#ff00ff'], + ['mediumaquamarine', '#66cdaa'], + ['mediumblue', '#0000cd'], + ['mediumorchid', '#ba55d3'], + ['mediumpurple', '#9370db'], + ['mediumseagreen', '#3cb371'], + ['mediumslateblue', '#7b68ee'], + ['mediumspringgreen', '#00fa9a'], + ['mediumturquoise', '#48d1cc'], + ['mediumvioletred', '#c71585'], + ['midnightblue', '#191970'], + ['mintcream', '#f5fffa'], + ['mistyrose', '#ffe4e1'], + ['moccasin', '#ffe4b5'], + ['navajowhite', '#ffdead'], + ['oldlace', '#fdf5e6'], + ['olivedrab', '#6b8e23'], + ['orangered', '#ff4500'], + ['orchid', '#da70d6'], + ['palegoldenrod', '#eee8aa'], + ['palegreen', '#98fb98'], + ['paleturquoise', '#afeeee'], + ['palevioletred', '#db7093'], + ['papayawhip', '#ffefd5'], + ['peachpuff', '#ffdab9'], + ['peru', '#cd853f'], + ['pink', '#ffc0cb'], + ['plum', '#dda0dd'], + ['powderblue', '#b0e0e6'], + ['rosybrown', '#bc8f8f'], + ['royalblue', '#4169e1'], + ['saddlebrown', '#8b4513'], + ['salmon', '#fa8072'], + ['sandybrown', '#f4a460'], + ['seagreen', '#2e8b57'], + ['seashell', '#fff5ee'], + ['sienna', '#a0522d'], + ['skyblue', '#87ceeb'], + ['slateblue', '#6a5acd'], + ['slategray', '#708090'], + ['slategrey', '#708090'], + ['snow', '#fffafa'], + ['springgreen', '#00ff7f'], + ['steelblue', '#4682b4'], + ['tan', '#d2b48c'], + ['thistle', '#d8bfd8'], + ['tomato', '#ff6347'], + ['turquoise', '#40e0d0'], + ['violet', '#ee82ee'], + ['wheat', '#f5deb3'], + ['whitesmoke', '#f5f5f5'], + ['yellowgreen', '#9acd32'], + ['rebeccapurple', '#663399'], +]); + +export class ColorNameToHex { + static has(name: string): boolean { + return mapping.has(name); + } + + static get(name: string): string { + return mapping.get(name); + } +} diff --git a/src/string/css-unit.ts b/src/string/css-unit.ts index 5de69664b1..76fc83f361 100644 --- a/src/string/css-unit.ts +++ b/src/string/css-unit.ts @@ -2,6 +2,7 @@ import { is } from '../is/is'; import { ColorRGBA, color } from '../mathf/color'; +import {ColorNameToHex} from './color-name-to-hex'; /** * The different types of structures that can be passed. @@ -23,6 +24,11 @@ export enum CssUnitObjectTypes { */ cssHex = 'cssHex', + /** + * A css color such as 'red' + */ + cssColor = 'cssColor', + /** * A css rgba unit such as 'rgba(255, 255, 255, 0.3)' */ @@ -116,6 +122,10 @@ export class cssUnit { result.value = color.cssToRgba(css); result.type = CssUnitObjectTypes.cssHex; result.valueType = CssUnitObjectTypes.rgba; + } else if (is.cssColorName(css)) { + result.value = color.cssToRgba(css); + result.type = CssUnitObjectTypes.cssColor; + result.valueType = CssUnitObjectTypes.rgba; } else { result.value = value ? +value : null; result.unit = unit ? unit[0] : null; @@ -127,8 +137,4 @@ export class cssUnit { return result; } - - - - -} \ No newline at end of file +}