@react-navigation/elements 3.0.0-alpha.23 → 3.0.0-alpha.25

package/lib/module/Button.js

@@ -1,13 +1,14 @@
 "use strict";
 
-import { useLinkProps, useTheme } from '@react-navigation/native';
+import { MaterialSymbol, SFSymbol, useLinkProps, useTheme } from '@react-navigation/native';
 import * as React from 'react';
-import { Platform, StyleSheet } from 'react-native';
+import { Image, Platform, StyleSheet, View } from 'react-native';
 import { Color } from "./Color.js";
 import { PlatformPressable } from "./PlatformPressable.js";
 import { Text } from "./Text.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const BUTTON_RADIUS = 40;
+const ICON_SIZE = 14;
 export function Button(props) {
   if ('screen' in props || 'action' in props) {
     // @ts-expect-error: This is already type-checked by the prop types
@@ -47,7 +48,9 @@ function ButtonLink({
 function ButtonBase({
   variant = 'tinted',
   color: customColor,
+  icon,
   android_ripple,
+  disabled,
   style,
   children,
   ...rest
@@ -74,11 +77,20 @@ function ButtonBase({
       textColor = Color.foreground(backgroundColor);
       break;
   }
+  if (disabled) {
+    textColor = dark ? 'rgba(235, 235, 245, 0.3)' : 'rgba(60, 60, 67, 0.3)';
+    if (variant !== 'plain') {
+      backgroundColor = dark ? 'rgba(118, 118, 128, 0.24)' : 'rgba(118, 118, 128, 0.12)';
+    }
+  }
+  const rippleColor = Color(textColor)?.fade(0.88).string() ?? (variant === 'filled' || dark ? 'rgba(255, 255, 255, 0.12)' : 'rgba(0, 0, 0, 0.12)');
+  const iconNode = renderIcon(icon, textColor, ICON_SIZE);
   return /*#__PURE__*/_jsx(PlatformPressable, {
     ...rest,
+    disabled: disabled,
     android_ripple: {
-      radius: BUTTON_RADIUS,
-      color: Color(textColor)?.fade(0.85).string() ?? 'rgba(0, 0, 0, 0.1)',
+      foreground: true,
+      color: rippleColor,
       ...android_ripple
     },
     pressOpacity: Platform.OS === 'ios' ? undefined : 1,
@@ -88,20 +100,81 @@ function ButtonBase({
     style: [{
       backgroundColor
     }, styles.button, style],
-    children: /*#__PURE__*/_jsx(Text, {
-      style: [{
-        color: textColor
-      }, fonts.regular, styles.text],
-      children: children
+    children: /*#__PURE__*/_jsxs(View, {
+      style: styles.content,
+      children: [iconNode && /*#__PURE__*/_jsx(View, {
+        style: styles.icon,
+        children: iconNode
+      }), /*#__PURE__*/_jsx(Text, {
+        style: [{
+          color: textColor
+        }, fonts.regular, styles.text],
+        children: children
+      })]
     })
   });
 }
+function renderIcon(icon, color, size) {
+  if (!icon) {
+    return null;
+  }
+  const iconValue = typeof icon === 'function' ? icon({
+    color,
+    size
+  }) : icon;
+  if (/*#__PURE__*/React.isValidElement(iconValue)) {
+    return iconValue;
+  }
+  if (typeof iconValue === 'object' && iconValue != null && 'type' in iconValue) {
+    switch (iconValue.type) {
+      case 'image':
+        return /*#__PURE__*/_jsx(Image, {
+          source: iconValue.source,
+          style: {
+            width: size,
+            height: size,
+            tintColor: iconValue.tinted === false ? undefined : color
+          }
+        });
+      case 'sfSymbol':
+        return /*#__PURE__*/_jsx(SFSymbol, {
+          name: iconValue.name,
+          size: size,
+          color: color
+        });
+      case 'materialSymbol':
+        return /*#__PURE__*/_jsx(MaterialSymbol, {
+          name: iconValue.name,
+          variant: iconValue.variant,
+          weight: iconValue.weight,
+          size: size,
+          color: color
+        });
+      default:
+        {
+          const _exhaustiveCheck = iconValue;
+          return _exhaustiveCheck;
+        }
+    }
+  }
+  return null;
+}
 const styles = StyleSheet.create({
   button: {
     paddingHorizontal: 24,
     paddingVertical: 10,
     borderRadius: BUTTON_RADIUS,
-    borderCurve: 'continuous'
+    borderCurve: 'continuous',
+    overflow: 'hidden'
+  },
+  content: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8
+  },
+  icon: {
+    marginLeft: -6
   },
   text: {
     fontSize: 14,

package/lib/module/Button.js.map

@@ -1 +1 @@
-{"version":3,"names":["useLinkProps","useTheme","React","Platform","StyleSheet","Color","PlatformPressable","Text","jsx","_jsx","BUTTON_RADIUS","Button","props","ButtonLink","ButtonBase","screen","params","action","href","onPress","rest","e","variant","color","customColor","android_ripple","style","children","dark","colors","fonts","primary","backgroundColor","textColor","fade","string","foreground","radius","pressOpacity","OS","undefined","hoverEffect","styles","button","regular","text","create","paddingHorizontal","paddingVertical","borderRadius","borderCurve","fontSize","lineHeight","letterSpacing","textAlign"],"sourceRoot":"../../src","sources":["Button.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["MaterialSymbol","SFSymbol","useLinkProps","useTheme","React","Image","Platform","StyleSheet","View","Color","PlatformPressable","Text","jsx","_jsx","jsxs","_jsxs","BUTTON_RADIUS","ICON_SIZE","Button","props","ButtonLink","ButtonBase","screen","params","action","href","onPress","rest","e","variant","color","customColor","icon","android_ripple","disabled","style","children","dark","colors","fonts","primary","backgroundColor","textColor","fade","string","foreground","rippleColor","iconNode","renderIcon","pressOpacity","OS","undefined","hoverEffect","styles","button","content","regular","text","size","iconValue","isValidElement","type","source","width","height","tintColor","tinted","name","weight","_exhaustiveCheck","create","paddingHorizontal","paddingVertical","borderRadius","borderCurve","overflow","flexDirection","alignItems","justifyContent","gap","marginLeft","fontSize","lineHeight","letterSpacing","textAlign"],"sourceRoot":"../../src","sources":["Button.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/Color.js

@@ -1,12 +1,13 @@
 "use strict";
 
-// eslint-disable-next-line no-restricted-imports
-import OriginalColor from 'color';
 import { Platform } from 'react-native';
 import { DynamicColorIOS, PlatformColor } from './PlatformColor';
 export function Color(value) {
-  if (typeof value === 'string' && !value.startsWith('var(')) {
-    return OriginalColor(value);
+  if (typeof value === 'string') {
+    const parsed = parse(value);
+    if (parsed) {
+      return build(parsed);
+    }
   }
   return undefined;
 }
@@ -42,14 +43,466 @@ Color.foreground = color => {
         });
       }
     }
-  } else if (typeof color === 'string' && !color.startsWith('var(')) {
-    const processed = OriginalColor(color);
-    if (processed.isLight()) {
-      return processed.darken(0.71).string();
+  } else if (typeof color === 'string') {
+    const parsed = parse(color);
+    if (parsed && isLight(parsed)) {
+      return darken(parsed, 0.71).string();
     }
   }
   return '#fff';
 };
+function build(parsed) {
+  function alpha(amount) {
+    if (amount === undefined) {
+      return clamp(parsed.parts[3], 0, 1);
+    }
+    const newParts = parsed.parts.slice();
+    newParts[3] = amount;
+    return build({
+      type: parsed.type,
+      parts: newParts
+    });
+  }
+  function fade(amount) {
+    const newParts = parsed.parts.slice();
+    newParts[3] = parsed.parts[3] * (1 - amount);
+    return build({
+      type: parsed.type,
+      parts: newParts
+    });
+  }
+  function string() {
+    return stringify(parsed);
+  }
+  return {
+    alpha,
+    fade,
+    string
+  };
+}
+function parse(color) {
+  if (color.toLowerCase() === 'transparent') {
+    return {
+      type: 'rgb',
+      parts: [0, 0, 0, 0]
+    };
+  }
+  const named = NAMED_COLORS[color.toLowerCase()];
+  if (named) {
+    return {
+      type: 'rgb',
+      parts: [...named, 1]
+    };
+  }
+  const hex = color.match(/^#([\da-f]+)$/i);
+  if (hex) {
+    // Normalize 3-digit (#rgb) and 4-digit (#rgba) hex to 6-digit (#rrggbb) and 8-digit (#rrggbbaa)
+    const digits = hex[1].length === 3 || hex[1].length === 4 ? Array.from(hex[1], d => d + d).join('') : hex[1];
+    if (digits.length !== 6 && digits.length !== 8) {
+      return undefined;
+    }
+    return {
+      type: 'rgb',
+      parts: [parseInt(digits.slice(0, 2), 16), parseInt(digits.slice(2, 4), 16), parseInt(digits.slice(4, 6), 16), digits.length === 8 ? parseInt(digits.slice(6, 8), 16) / 255 : 1]
+    };
+  }
+  const matched = color.match(/^([a-z]+)\(([^)]*)\)$/i);
+  if (!matched) {
+    return undefined;
+  }
+
+  // Get the color function name (e.g., "rgb", "hsl", "lab", etc.) and the color values
+  const fnName = matched[1].toLowerCase();
+  const argStr = matched[2];
+  const type = fnName === 'rgba' ? 'rgb' : fnName === 'hsla' ? 'hsl' : COLOR_TYPES.find(t => t === fnName);
+  if (!type) {
+    return undefined;
+  }
+
+  // Get values and optional alpha value based on the color format
+  // e.g. CSS L4 (rgb(255 0 0 / 0.5) or rgb(255 0 0 / 50%)) or CSS L3 (rgba(255, 0, 0, 0.5))
+  const slashIdx = argStr.indexOf('/');
+  const valuesStr = slashIdx >= 0 ? argStr.slice(0, slashIdx) : argStr;
+  let alphaStr = slashIdx >= 0 ? argStr.slice(slashIdx + 1).trim() : undefined;
+  const tokens = valuesStr.split(/[,\s]+/).filter(Boolean);
+  if (alphaStr === undefined && tokens.length === 4) {
+    alphaStr = tokens.pop();
+  }
+  if (tokens.length !== 3) {
+    return undefined;
+  }
+  const percent = max => value => parsePercent(value, max);
+  const parsers = {
+    rgb: [percent(255), percent(255), percent(255)],
+    hsl: [parseAngle, percent(100), percent(100)],
+    hwb: [parseAngle, percent(100), percent(100)],
+    lab: [percent(100), percent(125), percent(125)],
+    lch: [percent(100), percent(150), parseAngle],
+    oklch: [percent(1), percent(0.4), parseAngle],
+    oklab: [percent(1), percent(0.4), percent(0.4)]
+  };
+  try {
+    const parts = parsers[type].map((parseChannel, index) => parseChannel(tokens[index]));
+    const a = alphaStr === undefined ? 1 : parseAlpha(alphaStr);
+    parts.push(a);
+    return {
+      type,
+      parts
+    };
+  } catch {
+    return undefined;
+  }
+}
+function stringify(color) {
+  const [p0, p1, p2, rawA] = color.parts;
+  const a = trim(clamp(rawA, 0, 1));
+
+  // Legacy CSS L3: name(v1, v2, v3) / namea(v1, v2, v3, alpha)
+  const legacy = (name, v1, v2, v3) => a < 1 ? `${name}a(${v1}, ${v2}, ${v3}, ${a})` : `${name}(${v1}, ${v2}, ${v3})`;
+
+  // Modern CSS L4: name(v1 v2 v3) / name(v1 v2 v3 / alpha)
+  const modern = (name, v1, v2, v3) => a < 1 ? `${name}(${v1} ${v2} ${v3} / ${a})` : `${name}(${v1} ${v2} ${v3})`;
+  switch (color.type) {
+    case 'rgb':
+      return legacy('rgb', clamp(Math.round(p0), 0, 255), clamp(Math.round(p1), 0, 255), clamp(Math.round(p2), 0, 255));
+    case 'hsl':
+      return legacy('hsl', trim(p0), `${trim(clamp(p1, 0, 100))}%`, `${trim(clamp(p2, 0, 100))}%`);
+    case 'hwb':
+      return modern('hwb', trim(p0), `${trim(clamp(p1, 0, 100))}%`, `${trim(clamp(p2, 0, 100))}%`);
+    case 'lab':
+      return modern('lab', trim(clamp(p0, 0, 100)), trim(clamp(p1, -125, 125)), trim(clamp(p2, -125, 125)));
+    case 'oklab':
+      return modern('oklab', trim(clamp(p0, 0, 1)), trim(clamp(p1, -0.4, 0.4)), trim(clamp(p2, -0.4, 0.4)));
+    case 'lch':
+      return modern('lch', trim(clamp(p0, 0, 100)), trim(clamp(p1, 0, 150)), trim(p2));
+    case 'oklch':
+      return modern('oklch', trim(clamp(p0, 0, 1)), trim(clamp(p1, 0, 0.4)), trim(p2));
+    default:
+      {
+        const _exhaustiveCheck = color.type;
+        return _exhaustiveCheck;
+      }
+  }
+}
+function darken(color, amount) {
+  const factor = 1 - amount;
+  const parts = color.parts.slice();
+  switch (color.type) {
+    case 'lab':
+    case 'lch':
+    case 'oklab':
+    case 'oklch':
+      parts[0] *= factor;
+      return build({
+        type: color.type,
+        parts
+      });
+    case 'hsl':
+      parts[2] *= factor;
+      return build({
+        type: 'hsl',
+        parts
+      });
+    case 'rgb':
+    case 'hwb':
+      {
+        const [r, g, b] = color.type === 'hwb' ? hwbToRgb(parts[0], parts[1], parts[2]) : parts;
+        const [h, s, l] = rgbToHsl(r, g, b);
+        return build({
+          type: 'hsl',
+          parts: [h, s, l * factor, parts[3]]
+        });
+      }
+    default:
+      {
+        const _exhaustiveCheck = color.type;
+        return _exhaustiveCheck;
+      }
+  }
+}
+
+// YIQ luma midpoint (0-255)
+// https://en.wikipedia.org/wiki/YIQ
+const YIQ_LIGHT_THRESHOLD = 128;
+
+// Rec. 601 luma coefficients (sum to 1.0)
+const YIQ_WEIGHT_R = 0.299;
+const YIQ_WEIGHT_G = 0.587;
+const YIQ_WEIGHT_B = 0.114;
+function isLight(color) {
+  let rgb;
+  switch (color.type) {
+    case 'lab':
+    case 'lch':
+      return color.parts[0] > 50;
+    case 'oklab':
+    case 'oklch':
+      return color.parts[0] > 0.5;
+    case 'rgb':
+      rgb = [color.parts[0], color.parts[1], color.parts[2]];
+      break;
+    case 'hsl':
+      rgb = hslToRgb(color.parts[0], color.parts[1], color.parts[2]);
+      break;
+    case 'hwb':
+      rgb = hwbToRgb(color.parts[0], color.parts[1], color.parts[2]);
+      break;
+    default:
+      {
+        const _exhaustiveCheck = color.type;
+        return _exhaustiveCheck;
+      }
+  }
+  const yiq = YIQ_WEIGHT_R * rgb[0] + YIQ_WEIGHT_G * rgb[1] + YIQ_WEIGHT_B * rgb[2];
+  return yiq > YIQ_LIGHT_THRESHOLD;
+}
+function trim(n) {
+  return Number(n.toFixed(3));
+}
+function clamp(n, min, max) {
+  return n < min ? min : n > max ? max : n;
+}
+function parseNumber(s) {
+  const n = Number(s);
+  if (s === '' || Number.isNaN(n)) {
+    throw new Error(`Invalid number: ${s}`);
+  }
+  return n;
+}
+function parsePercent(s, max) {
+  if (s.endsWith('%')) {
+    return parseNumber(s.slice(0, -1)) / 100 * max;
+  }
+  return parseNumber(s);
+}
+function parseAngle(s) {
+  let degrees;
+  if (s.endsWith('grad')) {
+    degrees = parseNumber(s.slice(0, -4)) * 0.9;
+  } else if (s.endsWith('turn')) {
+    degrees = parseNumber(s.slice(0, -4)) * 360;
+  } else if (s.endsWith('rad')) {
+    degrees = parseNumber(s.slice(0, -3)) * 180 / Math.PI;
+  } else if (s.endsWith('deg')) {
+    degrees = parseNumber(s.slice(0, -3));
+  } else {
+    degrees = parseNumber(s);
+  }
+  return (degrees % 360 + 360) % 360;
+}
+function parseAlpha(s) {
+  return s.endsWith('%') ? parseNumber(s.slice(0, -1)) / 100 : parseNumber(s);
+}
+function rgbToHsl(r, g, b) {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  if (max === min) {
+    return [0, 0, l * 100];
+  }
+  const d = max - min;
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+  let h;
+  if (max === r) {
+    h = (g - b) / d + (g < b ? 6 : 0);
+  } else if (max === g) {
+    h = (b - r) / d + 2;
+  } else {
+    h = (r - g) / d + 4;
+  }
+  return [h * 60, s * 100, l * 100];
+}
+function hslToRgb(h, s, l) {
+  s /= 100;
+  l /= 100;
+  const chroma = (1 - Math.abs(2 * l - 1)) * s;
+  const huePrime = (h % 360 + 360) % 360 / 60;
+  const secondary = chroma * (1 - Math.abs(huePrime % 2 - 1));
+  const lightnessOffset = l - chroma / 2;
+  let redPrime;
+  let greenPrime;
+  let bluePrime;
+  if (huePrime < 1) {
+    [redPrime, greenPrime, bluePrime] = [chroma, secondary, 0];
+  } else if (huePrime < 2) {
+    [redPrime, greenPrime, bluePrime] = [secondary, chroma, 0];
+  } else if (huePrime < 3) {
+    [redPrime, greenPrime, bluePrime] = [0, chroma, secondary];
+  } else if (huePrime < 4) {
+    [redPrime, greenPrime, bluePrime] = [0, secondary, chroma];
+  } else if (huePrime < 5) {
+    [redPrime, greenPrime, bluePrime] = [secondary, 0, chroma];
+  } else {
+    [redPrime, greenPrime, bluePrime] = [chroma, 0, secondary];
+  }
+  return [(redPrime + lightnessOffset) * 255, (greenPrime + lightnessOffset) * 255, (bluePrime + lightnessOffset) * 255];
+}
+function hwbToRgb(h, w, b) {
+  const whiteRatio = w / 100;
+  const blackRatio = b / 100;
+  if (whiteRatio + blackRatio >= 1) {
+    const gray = whiteRatio / (whiteRatio + blackRatio) * 255;
+    return [gray, gray, gray];
+  }
+  const [pureRed, pureGreen, pureBlue] = hslToRgb(h, 100, 50);
+  const factor = 1 - whiteRatio - blackRatio;
+  return [pureRed * factor + whiteRatio * 255, pureGreen * factor + whiteRatio * 255, pureBlue * factor + whiteRatio * 255];
+}
+const COLOR_TYPES = ['rgb', 'hsl', 'hwb', 'lab', 'lch', 'oklch', 'oklab'];
+const NAMED_COLORS = {
+  aliceblue: [240, 248, 255],
+  antiquewhite: [250, 235, 215],
+  aqua: [0, 255, 255],
+  aquamarine: [127, 255, 212],
+  azure: [240, 255, 255],
+  beige: [245, 245, 220],
+  bisque: [255, 228, 196],
+  black: [0, 0, 0],
+  blanchedalmond: [255, 235, 205],
+  blue: [0, 0, 255],
+  blueviolet: [138, 43, 226],
+  brown: [165, 42, 42],
+  burntsienna: [234, 126, 93],
+  burlywood: [222, 184, 135],
+  cadetblue: [95, 158, 160],
+  chartreuse: [127, 255, 0],
+  chocolate: [210, 105, 30],
+  coral: [255, 127, 80],
+  cornflowerblue: [100, 149, 237],
+  cornsilk: [255, 248, 220],
+  crimson: [220, 20, 60],
+  cyan: [0, 255, 255],
+  darkblue: [0, 0, 139],
+  darkcyan: [0, 139, 139],
+  darkgoldenrod: [184, 134, 11],
+  darkgray: [169, 169, 169],
+  darkgreen: [0, 100, 0],
+  darkgrey: [169, 169, 169],
+  darkkhaki: [189, 183, 107],
+  darkmagenta: [139, 0, 139],
+  darkolivegreen: [85, 107, 47],
+  darkorange: [255, 140, 0],
+  darkorchid: [153, 50, 204],
+  darkred: [139, 0, 0],
+  darksalmon: [233, 150, 122],
+  darkseagreen: [143, 188, 143],
+  darkslateblue: [72, 61, 139],
+  darkslategray: [47, 79, 79],
+  darkslategrey: [47, 79, 79],
+  darkturquoise: [0, 206, 209],
+  darkviolet: [148, 0, 211],
+  deeppink: [255, 20, 147],
+  deepskyblue: [0, 191, 255],
+  dimgray: [105, 105, 105],
+  dimgrey: [105, 105, 105],
+  dodgerblue: [30, 144, 255],
+  firebrick: [178, 34, 34],
+  floralwhite: [255, 250, 240],
+  forestgreen: [34, 139, 34],
+  fuchsia: [255, 0, 255],
+  gainsboro: [220, 220, 220],
+  ghostwhite: [248, 248, 255],
+  gold: [255, 215, 0],
+  goldenrod: [218, 165, 32],
+  gray: [128, 128, 128],
+  green: [0, 128, 0],
+  greenyellow: [173, 255, 47],
+  grey: [128, 128, 128],
+  honeydew: [240, 255, 240],
+  hotpink: [255, 105, 180],
+  indianred: [205, 92, 92],
+  indigo: [75, 0, 130],
+  ivory: [255, 255, 240],
+  khaki: [240, 230, 140],
+  lavender: [230, 230, 250],
+  lavenderblush: [255, 240, 245],
+  lawngreen: [124, 252, 0],
+  lemonchiffon: [255, 250, 205],
+  lightblue: [173, 216, 230],
+  lightcoral: [240, 128, 128],
+  lightcyan: [224, 255, 255],
+  lightgoldenrodyellow: [250, 250, 210],
+  lightgray: [211, 211, 211],
+  lightgreen: [144, 238, 144],
+  lightgrey: [211, 211, 211],
+  lightpink: [255, 182, 193],
+  lightsalmon: [255, 160, 122],
+  lightseagreen: [32, 178, 170],
+  lightskyblue: [135, 206, 250],
+  lightslategray: [119, 136, 153],
+  lightslategrey: [119, 136, 153],
+  lightsteelblue: [176, 196, 222],
+  lightyellow: [255, 255, 224],
+  lime: [0, 255, 0],
+  limegreen: [50, 205, 50],
+  linen: [250, 240, 230],
+  magenta: [255, 0, 255],
+  maroon: [128, 0, 0],
+  mediumaquamarine: [102, 205, 170],
+  mediumblue: [0, 0, 205],
+  mediumorchid: [186, 85, 211],
+  mediumpurple: [147, 112, 219],
+  mediumseagreen: [60, 179, 113],
+  mediumslateblue: [123, 104, 238],
+  mediumspringgreen: [0, 250, 154],
+  mediumturquoise: [72, 209, 204],
+  mediumvioletred: [199, 21, 133],
+  midnightblue: [25, 25, 112],
+  mintcream: [245, 255, 250],
+  mistyrose: [255, 228, 225],
+  moccasin: [255, 228, 181],
+  navajowhite: [255, 222, 173],
+  navy: [0, 0, 128],
+  oldlace: [253, 245, 230],
+  olive: [128, 128, 0],
+  olivedrab: [107, 142, 35],
+  orange: [255, 165, 0],
+  orangered: [255, 69, 0],
+  orchid: [218, 112, 214],
+  palegoldenrod: [238, 232, 170],
+  palegreen: [152, 251, 152],
+  paleturquoise: [175, 238, 238],
+  palevioletred: [219, 112, 147],
+  papayawhip: [255, 239, 213],
+  peachpuff: [255, 218, 185],
+  peru: [205, 133, 63],
+  pink: [255, 192, 203],
+  plum: [221, 160, 221],
+  powderblue: [176, 224, 230],
+  purple: [128, 0, 128],
+  rebeccapurple: [102, 51, 153],
+  red: [255, 0, 0],
+  rosybrown: [188, 143, 143],
+  royalblue: [65, 105, 225],
+  saddlebrown: [139, 69, 19],
+  salmon: [250, 128, 114],
+  sandybrown: [244, 164, 96],
+  seagreen: [46, 139, 87],
+  seashell: [255, 245, 238],
+  sienna: [160, 82, 45],
+  silver: [192, 192, 192],
+  skyblue: [135, 206, 235],
+  slateblue: [106, 90, 205],
+  slategray: [112, 128, 144],
+  slategrey: [112, 128, 144],
+  snow: [255, 250, 250],
+  springgreen: [0, 255, 127],
+  steelblue: [70, 130, 180],
+  tan: [210, 180, 140],
+  teal: [0, 128, 128],
+  thistle: [216, 191, 216],
+  tomato: [255, 99, 71],
+  turquoise: [64, 224, 208],
+  violet: [238, 130, 238],
+  wheat: [245, 222, 179],
+  white: [255, 255, 255],
+  whitesmoke: [245, 245, 245],
+  yellow: [255, 255, 0],
+  yellowgreen: [154, 205, 50]
+};
 const ANDROID_COLOR_MAP = {
   system_background_dark: 'system_on_background_dark',
   system_background_light: 'system_on_background_light',