Use MellowColor where applicablel

src/components/Alert/Alert.tsx

@@ -2,6 +2,8 @@ import React, { ReactNode } from 'react';
 
 import clsx from 'clsx';
 
+import { MellowColor } from '@types';
+
 export interface AlertProps {
   /**
    * The variant of the button.
@@ -10,7 +12,7 @@ export interface AlertProps {
   /**
    * The color of the button, only works when the variant is `color` or `hover`
    */
-  color?: 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'teal' | 'cyan' | 'blue' | 'indigo' | 'violet' | 'purple' | 'pink' | 'rose' | 'brown' | 'grey' | 'accent';
+  color?: MellowColor;
   /**
    * Custom classes for the dialog
    */

src/components/Avatar/Avatar.tsx

@@ -3,6 +3,8 @@ import useColor from '@hooks/useColor';
 
 import clsx from 'clsx';
 
+import { MellowColor } from '@types';
+
 export interface AvatarProps {
   /**
    * The text for the avatar
@@ -19,7 +21,7 @@ export interface AvatarProps {
   /**
    * The color of the avatar, only works when the variant is `color` or `hover`
    */
-  color?: 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'teal' | 'cyan' | 'blue' | 'indigo' | 'violet' | 'purple' | 'pink' | 'rose' | 'brown' | 'grey' | 'accent' | true;
+  color?: MellowColor | true;
   /**
    * The avatar size.
    */

src/components/BottomBar/BottomBar.tsx

@@ -2,11 +2,13 @@ import { ReactNode } from 'react';
 
 import clsx from 'clsx';
 
+import { MellowColor } from '@types';
+
 export interface BottomBarProps {
   /**
    * The color of the bottom bar
    */
-  color?: 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'teal' | 'cyan' | 'blue' | 'indigo' | 'violet' | 'purple' | 'pink' | 'rose' | 'brown' | 'grey' | 'accent';
+  color?: MellowColor;
   /**
    * Custom classes for the bottom nav
    */

src/components/Breadcrumb/Breadcrumb.tsx

@@ -2,11 +2,13 @@ import { ReactNode } from 'react';
 
 import clsx from 'clsx';
 
+import { MellowColor } from '@types';
+
 export interface BreadcrumbProps {
   /**
    * The color of the breadcrumb
    */
-  color?: 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'teal' | 'cyan' | 'blue' | 'indigo' | 'violet' | 'purple' | 'pink' | 'rose' | 'brown' | 'grey' | 'accent';
+  color?: MellowColor;
   /**
    * Custom classes for the bottom nav
    */

src/components/Button/Button.tsx

@@ -2,6 +2,8 @@ import { ElementType, ButtonHTMLAttributes, ReactNode, useMemo, ComponentPropsWi
 
 import clsx from 'clsx';
 
+import { MellowColor } from '@types';
+
 interface IButtonProps<T> extends ButtonHTMLAttributes<HTMLButtonElement> {
   /**
    * The variant of the button.
@@ -10,7 +12,7 @@ interface IButtonProps<T> extends ButtonHTMLAttributes<HTMLButtonElement> {
   /**
    * The color of the button, only works when the variant is `color` or `hover`
    */
-  color?: 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'teal' | 'cyan' | 'blue' | 'indigo' | 'violet' | 'purple' | 'pink' | 'rose' | 'brown' | 'grey' | 'accent';
+  color?: MellowColor;
   /**
    * The button size.
    */

src/components/Dropdown/Dropdown.tsx

@@ -2,11 +2,13 @@ import { Menu } from '@headlessui/react';
 import clsx from 'clsx';
 import React, { ReactNode } from 'react';
 
+import { MellowColor } from '@types';
+
 export interface DropdownProps {
   /**
    * The color of the button, only works when the variant is `color` or `hover`
    */
-  color?: 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'teal' | 'cyan' | 'blue' | 'indigo' | 'violet' | 'purple' | 'pink' | 'rose' | 'brown' | 'grey' | 'accent';
+  color?: MellowColor;
   /**
    * Value of the textarea
    */

src/components/DropdownItem/DropdownItem.tsx

@@ -2,11 +2,13 @@ import { Menu } from '@headlessui/react';
 import clsx from 'clsx';
 import React, { ElementType, ReactNode, useMemo } from 'react';
 
+import { MellowColor } from '@types';
+
 export interface DropdownItemProps<T> {
   /**
    * The color of the button, only works when the variant is `color` or `hover`
    */
-  color?: 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'teal' | 'cyan' | 'blue' | 'indigo' | 'violet' | 'purple' | 'pink' | 'rose' | 'brown' | 'grey' | 'accent';
+  color?: MellowColor;
   /**
    * Button disabled state.
    */

src/components/Label/Label.tsx

@@ -2,6 +2,8 @@ import React, { ReactNode } from 'react';
 
 import clsx from 'clsx';
 
+import { MellowColor } from '@types';
+
 export interface LabelProps {
   /**
    * The variant of the button.
@@ -10,7 +12,7 @@ export interface LabelProps {
   /**
    * The color of the button, only works when the variant is `color` or `hover`
    */
-  color?: 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'teal' | 'cyan' | 'blue' | 'indigo' | 'violet' | 'purple' | 'pink' | 'rose' | 'brown' | 'grey' | 'accent';
+  color?: MellowColor;
   /**
    * Label contents.
    */

src/components/List/List.tsx

@@ -2,6 +2,8 @@ import React, { ReactNode } from 'react';
 
 import clsx from 'clsx';
 
+import { MellowColor } from '@types';
+
 export interface ListProps {
   /**
    * Show a border around the list
@@ -14,7 +16,7 @@ export interface ListProps {
   /**
    * The color of the list
    */
-  color?: 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'teal' | 'cyan' | 'blue' | 'indigo' | 'violet' | 'purple' | 'pink' | 'rose' | 'brown' | 'grey' | 'accent';
+  color?: MellowColor;
   /**
    * The button size.
    */

src/components/ListItem/ListItem.tsx

@@ -2,6 +2,8 @@ import { ComponentPropsWithoutRef, ElementType, ReactNode, useMemo } from 'react
 
 import clsx from 'clsx';
 
+import { MellowColor } from '@types';
+
 export type ListItemProps<T extends ElementType> = {
   /**
    * Show a label around the list
@@ -26,7 +28,7 @@ export type ListItemProps<T extends ElementType> = {
   /**
    * The color of the list item
    */
-  color?: 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'teal' | 'cyan' | 'blue' | 'indigo' | 'violet' | 'purple' | 'pink' | 'rose' | 'brown' | 'grey' | 'accent';
+  color?: MellowColor;
   /**
    * Theme the item fully
    */

src/components/Progress/Progress.tsx

@@ -2,6 +2,8 @@ import React, { ReactNode } from 'react';
 
 import clsx from 'clsx';
 
+import { MellowColor } from '@types';
+
 export interface ProgressProps {
   /**
    * The highest value on the progress bar
@@ -14,7 +16,7 @@ export interface ProgressProps {
   /**
    * Color of the progress bar
    */
-  color?: 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'teal' | 'cyan' | 'blue' | 'indigo' | 'violet' | 'purple' | 'pink' | 'rose' | 'brown' | 'grey' | 'accent';
+  color?: MellowColor;
   /**
    * Size of the progress bar
    */

src/hooks/useColor.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 
-type MellowColor = 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'teal' | 'cyan' | 'blue' | 'indigo' | 'violet' | 'purple' | 'pink' | 'rose' | 'brown' | 'grey';
+import { MellowColor } from '@types';
 
 export default function useColor(string: string): MellowColor {
   const colors: MellowColor[] = ['red', 'orange', 'amber', 'yellow', 'lime', 'green', 'teal', 'cyan', 'blue', 'indigo', 'violet', 'purple', 'pink', 'rose', 'brown', 'grey'];

src/index.ts

@@ -182,4 +182,4 @@ export type { ToolbarProps } from '@components/Toolbar';
 
 export { default as useColor } from '@hooks/useColor';
 
-export { MellowColors } from '@types';
+export { MellowColor } from '@types';