$dark-color-map: (
  'neutral': (
    color: var(--base-white),
    border: var(--gray-200),
    bg: var(--base-black),
  ),
  'error': (
    color: var(--base-white),
    border: var(--gray-200),
    bg: var(--primary-red-500),
  ),
  'warning': (
    color: var(--base-white),
    border: var(--gray-200),
    bg: var(--orange-500),
  ),
  'success': (
    color: var(--base-white),
    border: var(--gray-200),
    bg: var(--green-500),
  ),
  'blue': (
    color: var(--base-white),
    border: var(--gray-200),
    bg: var(--blue-500),
  ),
  'pink': (
    color: var(--base-white),
    border: var(--gray-200),
    bg: var(--pink-500),
  ),
  'violet': (
    color: var(--base-white),
    border: var(--gray-200),
    bg: var(--violet-500),
  ),
  'disabled': (
    color: var(--gray-300),
    border: var(--gray-200),
    bg: var(--gray-100),
  ),
);
$color-map: (
  'neutral': (
    color: var(--gray-600),
    // (color, outline)
    border:
      (
        var(--gray-200),
        var(--gray-400),
      ),
    // (color, outline)
    bg:
      (
        var(--gray-50),
        var(--base-white),
      ),
    group: (
      border: var(--gray-100),
      bg: var(--gray-50),
      hover-bg: var(--gray-100),
      hover-border: var(--gray-200),
      invert-color: var(--gray-500),
    ),
  ),
  'error': (
    color: var(--primary-red-600),
    border: (
      var(--primary-red-200),
      var(--primary-red-400),
    ),
    bg: (
      var(--primary-red-50),
      var(--base-white),
    ),
    group: (
      border: var(--primary-red-100),
      bg: var(--primary-red-50),
      hover-bg: var(--primary-red-100),
      hover-border: var(--primary-red-200),
      invert-color: var(--primary-red-500),
    ),
  ),
  'warning': (
    color: var(--orange-600),
    border: (
      var(--orange-200),
      var(--orange-400),
    ),
    bg: (
      var(--orange-50),
      var(--base-white),
    ),
    group: (
      border: var(--orange-100),
      bg: var(--orange-50),
      hover-bg: var(--orange-100),
      hover-border: var(--orange-200),
      invert-color: var(--orange-500),
    ),
  ),
  'success': (
    color: var(--green-600),
    border: (
      var(--green-200),
      var(--green-400),
    ),
    bg: (
      var(--green-50),
      var(--base-white),
    ),
    group: (
      border: var(--green-100),
      bg: var(--green-50),
      hover-bg: var(--green-100),
      hover-border: var(--green-200),
      invert-color: var(--green-500),
    ),
  ),
  'blue': (
    color: var(--blue-600),
    border: (
      var(--blue-200),
      var(--blue-400),
    ),
    bg: (
      var(--blue-50),
      var(--base-white),
    ),
  ),
  'pink': (
    color: var(--pink-600),
    border: (
      var(--pink-200),
      var(--pink-400),
    ),
    bg: (
      var(--pink-50),
      var(--base-white),
    ),
  ),
  'violet': (
    color: var(--violet-600),
    border: (
      var(--violet-200),
      var(--violet-400),
    ),
    bg: (
      var(--violet-50),
      var(--base-white),
    ),
    group: (
      border: var(--violet-100),
      bg: var(--violet-50),
      hover-bg: var(--violet-100),
      hover-border: var(--violet-200),
      invert-color: var(--violet-500),
    ),
  ),
);

$color-disabled: (
  color: var(--gray-300),
  border: var(--gray-200),
  bg: var(--gray-100),
);