iOS UIColor for the System UI theme specification

uiColor.js

import { rgba } from "polished";

export default {
  label: [
    rgba(0, 0, 0, 1),
    rgba(60, 60, 67, 0.6),
    rgba(60, 60, 67, 0.3),
    rgba(60, 60, 67, 0.18),
  ],
  fill: [
    rgba(120, 120, 128, 0.2),
    rgba(120, 120, 128, 0.16),
    rgba(118, 118, 128, 0.12),
    rgba(116, 116, 128, 0.08),
  ],
  placeholderText: rgba(60, 60, 67, 0.3),
  background: [
    rgba(255, 255, 255, 1),
    rgba(242, 242, 247, 1),
    rgba(255, 255, 255, 1),
  ],
  groupedBackground: [
    rgba(242, 242, 247, 1),
    rgba(255, 255, 255, 1),
    rgba(242, 242, 247, 1),
  ],
  separator: rgba(60, 60, 67, 0.29),
  opaqueSeparator: rgba(198, 198, 200, 1),
  link: rgba(0, 122, 255, 1),
  darkText: rgba(0, 0, 0, 1),
  lightText: rgba(255, 255, 255, 0.6),
  tint: {
    red: "#FF3B30",
    orange: "#FF9500",
    yellow: "#FFCC00",
    green: "#34C759",
    teal: "#5AC8FA",
    blue: "#007AFF",
    indigo: "#5856D6",
    purple: "#AF52DE",
    pink: "#FF2D55",
  },
  gray: [
    rgba(142, 142, 147, 1),
    rgba(174, 174, 178, 1),
    rgba(199, 199, 204, 1),
    rgba(209, 209, 214, 1),
    rgba(229, 229, 234, 1),
    rgba(242, 242, 247, 1),
  ],
  clear: rgba(0, 0, 0, 0),
  fixed: {
    black: rgba(0, 0, 0, 1),
    blue: rgba(0, 0, 255, 1),
    brown: rgba(153, 102, 51, 1),
    cyan: rgba(0, 255, 255, 1),
    darkGray: rgba(85, 85, 85, 1),
    gray: rgba(127, 127, 127, 1),
    green: rgba(0, 255, 0, 1),
    lightGray: rgba(170, 170, 170, 1),
    magenta: rgba(255, 0, 255, 1),
    orange: rgba(255, 127, 0, 1),
    purple: rgba(127, 0, 127, 1),
    red: rgba(255, 0, 0, 1),
    white: rgba(255, 255, 255, 1),
    yellow: rgba(255, 255, 0, 1),
  },
  modes: {
    dark: {
      label: [
        rgba(255, 255, 255, 1),
        rgba(235, 235, 245, 0.6),
        rgba(235, 235, 245, 0.3),
        rgba(235, 235, 245, 0.18),
      ],
      fill: [
        rgba(120, 120, 128, 0.36),
        rgba(120, 120, 128, 0.32),
        rgba(118, 118, 128, 0.24),
        rgba(118, 118, 128, 0.18),
      ],
      placeholderText: rgba(235, 235, 245, 0.3),
      background: [
        rgba(0, 0, 0, 1),
        rgba(28, 28, 30, 1),
        rgba(44, 44, 46, 1),
      ],
      groupedBackground: [
        rgba(0, 0, 0, 1),
        rgba(28, 28, 30, 1),
        rgba(44, 44, 46, 1),
      ],
      separator: rgba(84, 84, 88, 0.6),
      opaqueSeparator: rgba(56, 56, 58, 1),
      link: rgba(9, 132, 255, 1),
      darkText: rgba(0, 0, 0, 1),
      lightText: rgba(255, 255, 255, 0.6),
      tint: {
        red: "#FF453A",
        orange: "#FF9F0A",
        yellow: "#FFD60A",
        green: "#32D74B",
        teal: "#64D2FF",
        blue: "#0A84FF",
        indigo: "#5E5CE6",
        purple: "#BF5AF2",
        pink: "#FF375F",
      },
      gray: [
        rgba(142, 142, 147, 1),
        rgba(99, 99, 102, 1),
        rgba(72, 72, 74, 1),
        rgba(58, 58, 60, 1),
        rgba(44, 44, 46, 1),
        rgba(28, 28, 30, 1),
      ],
      clear: rgba(0, 0, 0, 0),
      fixed: {
        black: rgba(0, 0, 0, 1),
        blue: rgba(0, 0, 255, 1),
        brown: rgba(153, 102, 51, 1),
        cyan: rgba(0, 255, 255, 1),
        darkGray: rgba(85, 85, 85, 1),
        gray: rgba(127, 127, 127, 1),
        green: rgba(0, 255, 0, 1),
        lightGray: rgba(170, 170, 170, 1),
        magenta: rgba(255, 0, 255, 1),
        orange: rgba(255, 127, 0, 1),
        purple: rgba(127, 0, 127, 1),
        red: rgba(255, 0, 0, 1),
        white: rgba(255, 255, 255, 1),
        yellow: rgba(255, 255, 0, 1),
      },
    },
  },
};