{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "font-color-toolbar-button",
  "title": "Font Color Toolbar Button",
  "description": "A color picker toolbar button with text and background color controls.",
  "dependencies": [
    "@udecode/cn",
    "@platejs/basic-styles",
    "lodash"
  ],
  "registryDependencies": [
    "dropdown-menu",
    "separator",
    "button",
    "tooltip",
    "https://platejs.org/r/toolbar.json"
  ],
  "files": [
    {
      "path": "src/registry/ui/font-color-toolbar-button.tsx",
      "content": "'use client';\n\nimport React from 'react';\n\nimport type {\n  DropdownMenuItemProps,\n  DropdownMenuProps,\n} from '@radix-ui/react-dropdown-menu';\n\nimport { useComposedRef } from '@udecode/cn';\nimport debounce from 'lodash/debounce.js';\nimport { CheckIcon, EraserIcon, PlusIcon } from 'lucide-react';\nimport {\n  type PlateEditor,\n  useEditorRef,\n  useEditorSelector,\n} from 'platejs/react';\n\nimport { buttonVariants } from '@/components/ui/button';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu';\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/components/ui/tooltip';\nimport { cn } from '@/lib/utils';\n\nimport { ToolbarButton, ToolbarMenuGroup } from './toolbar';\n\nconst MAX_CUSTOM_COLORS = 19;\nconst HEX_COLOR_RE = /^#[\\da-f]{6}$/i;\n\nfunction normalizeColor(color: string): string {\n  return color.toLowerCase();\n}\n\nfunction isValidHexColor(color: string): boolean {\n  return HEX_COLOR_RE.test(color);\n}\n\nfunction computeIsBrightColor(hex: string): boolean {\n  if (!isValidHexColor(hex)) return false;\n\n  const r = Number.parseInt(hex.slice(1, 3), 16);\n  const g = Number.parseInt(hex.slice(3, 5), 16);\n  const b = Number.parseInt(hex.slice(5, 7), 16);\n\n  return (r * 299 + g * 587 + b * 114) / 1000 > 130;\n}\n\nfunction getEditorColorMarks(editor: PlateEditor, nodeType: string): string[] {\n  const usedColors = new Set<string>();\n\n  for (const [node] of editor.api.nodes({\n    at: [],\n    match: (n) =>\n      'text' in n &&\n      typeof (n as Record<string, unknown>)[nodeType] === 'string',\n    mode: 'all',\n  })) {\n    const color = (node as Record<string, unknown>)[nodeType] as string;\n    usedColors.add(normalizeColor(color));\n  }\n\n  return Array.from(usedColors);\n}\n\nexport function FontColorToolbarButton({\n  children,\n  nodeType,\n  tooltip,\n}: {\n  nodeType: string;\n  tooltip?: string;\n} & DropdownMenuProps) {\n  const editor = useEditorRef();\n\n  const selectionDefined = useEditorSelector(\n    (editor) => !!editor.selection,\n    []\n  );\n\n  const color = useEditorSelector(\n    (editor) => editor.api.mark(nodeType) as string,\n    [nodeType]\n  );\n\n  const [selectedColor, setSelectedColor] = React.useState<string>();\n  const [updatedColor, setUpdatedColor] = React.useState<string>();\n  const [open, setOpen] = React.useState(false);\n  const [colorsQueue, setColorsQueue] = React.useState<string[]>([]);\n\n  const recordColorUsage = React.useCallback((color: string) => {\n    const normalized = normalizeColor(color);\n\n    if (!isValidHexColor(normalized)) return;\n\n    setColorsQueue((prev) => {\n      const filtered = prev\n        .filter((c) => c !== normalized)\n        .filter(\n          (c) => !DEFAULT_COLORS.some((dc) => normalizeColor(dc.value) === c)\n        );\n\n      return [normalized, ...filtered].slice(0, 30);\n    });\n  }, []);\n\n  const appendColors = React.useCallback((colors: string[]) => {\n    setColorsQueue((prev) => {\n      const normalized = colors.map(normalizeColor).filter(isValidHexColor);\n      const existingSet = new Set(prev);\n      const newColors = normalized\n        .filter((c) => !existingSet.has(c))\n        .filter(\n          (c) => !DEFAULT_COLORS.some((dc) => normalizeColor(dc.value) === c)\n        );\n\n      return [...newColors, ...prev].slice(0, 30);\n    });\n  }, []);\n\n  const onToggle = React.useCallback(\n    (value = !open) => {\n      setOpen(value);\n\n      if (value) {\n        const colorUsed = getEditorColorMarks(editor, nodeType);\n        appendColors(colorUsed);\n\n        if (selectedColor) {\n          recordColorUsage(normalizeColor(selectedColor));\n        }\n      }\n      if (!value) {\n        setUpdatedColor(undefined);\n\n        if (editor.selection) {\n          setTimeout(() => {\n            editor.tf.focus();\n          }, 100);\n        }\n      }\n    },\n    [open, editor, nodeType, appendColors, selectedColor, recordColorUsage]\n  );\n\n  const updateColor = React.useCallback(\n    (value: string) => {\n      if (editor.selection) {\n        setSelectedColor(value);\n        setUpdatedColor(value);\n\n        editor.tf.select(editor.selection);\n        editor.tf.addMarks({ [nodeType]: value });\n      }\n    },\n    [editor, nodeType]\n  );\n\n  const updateColorAndClose = React.useCallback(\n    (value: string) => {\n      updateColor(value);\n      onToggle();\n    },\n    [onToggle, updateColor]\n  );\n\n  const clearColor = React.useCallback(() => {\n    if (editor.selection) {\n      editor.tf.select(editor.selection);\n      editor.tf.removeMarks(nodeType);\n      onToggle();\n    }\n  }, [editor, onToggle, nodeType]);\n\n  React.useEffect(() => {\n    if (selectionDefined) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect -- Preserve the mark color while menu focus clears editor selection.\n      setSelectedColor(color);\n    }\n  }, [color, selectionDefined]);\n\n  return (\n    <DropdownMenu modal onOpenChange={onToggle} open={open}>\n      <DropdownMenuTrigger asChild>\n        <ToolbarButton pressed={open} tooltip={tooltip}>\n          {children}\n        </ToolbarButton>\n      </DropdownMenuTrigger>\n\n      <DropdownMenuContent align=\"start\">\n        <ColorPicker\n          clearColor={clearColor}\n          color={selectedColor || color}\n          colors={DEFAULT_COLORS}\n          colorsQueue={colorsQueue}\n          customColors={DEFAULT_CUSTOM_COLORS}\n          recordColorUsage={recordColorUsage}\n          updateColor={updateColorAndClose}\n          updateCustomColor={updateColor}\n          updatedColor={updatedColor}\n        />\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n\nfunction PureColorPicker({\n  className,\n  clearColor,\n  color,\n  colors,\n  colorsQueue,\n  customColors,\n  recordColorUsage,\n  updateColor,\n  updateCustomColor,\n  updatedColor,\n  ...props\n}: React.ComponentProps<'div'> & {\n  colors: TColor[];\n  colorsQueue: string[];\n  customColors: TColor[];\n  clearColor: () => void;\n  recordColorUsage: (color: string) => void;\n  updateColor: (color: string) => void;\n  updateCustomColor: (color: string) => void;\n  color?: string;\n  updatedColor?: string;\n}) {\n  return (\n    <div className={cn('flex flex-col', className)} {...props}>\n      <ToolbarMenuGroup label=\"Custom Colors\">\n        <ColorCustom\n          className=\"px-2\"\n          color={color}\n          colors={colors}\n          colorsQueue={colorsQueue}\n          customColors={customColors}\n          recordColorUsage={recordColorUsage}\n          updateColor={updateColor}\n          updateCustomColor={updateCustomColor}\n          updatedColor={updatedColor}\n        />\n      </ToolbarMenuGroup>\n      <ToolbarMenuGroup label=\"Default Colors\">\n        <ColorDropdownMenuItems\n          className=\"px-2\"\n          color={color}\n          colors={colors}\n          updateColor={updateColor}\n        />\n      </ToolbarMenuGroup>\n      {color && (\n        <ToolbarMenuGroup>\n          <DropdownMenuItem className=\"p-2\" onClick={clearColor}>\n            <EraserIcon />\n            <span>Clear</span>\n          </DropdownMenuItem>\n        </ToolbarMenuGroup>\n      )}\n    </div>\n  );\n}\n\nconst ColorPicker = React.memo(\n  PureColorPicker,\n  (prev, next) =>\n    prev.color === next.color &&\n    prev.colors === next.colors &&\n    prev.colorsQueue === next.colorsQueue &&\n    prev.customColors === next.customColors &&\n    prev.updatedColor === next.updatedColor\n);\n\nfunction ColorCustom({\n  className,\n  color,\n  colors,\n  colorsQueue,\n  customColors,\n  recordColorUsage,\n  updateColor,\n  updateCustomColor,\n  updatedColor,\n  ...props\n}: {\n  colors: TColor[];\n  colorsQueue: string[];\n  customColors: TColor[];\n  recordColorUsage: (color: string) => void;\n  updateColor: (color: string) => void;\n  updateCustomColor: (color: string) => void;\n  color?: string;\n  updatedColor?: string;\n} & React.ComponentPropsWithoutRef<'div'>) {\n  const [value, setValue] = React.useState<string>(color || '#000000');\n\n  const fullCustomColors = React.useMemo(\n    () =>\n      colorsQueue\n        .filter((c) => normalizeColor(c) !== normalizeColor(updatedColor || ''))\n        .filter(\n          (c) =>\n            !DEFAULT_COLORS.some(\n              (dc) => normalizeColor(dc.value) === normalizeColor(c)\n            )\n        )\n        .filter(\n          (c) =>\n            !DEFAULT_CUSTOM_COLORS.some(\n              (dc) => normalizeColor(dc.value) === normalizeColor(c)\n            )\n        )\n        .map((c) => ({\n          isBrightColor: computeIsBrightColor(c),\n          name: c,\n          value: c,\n        }))\n        .slice(\n          0,\n          MAX_CUSTOM_COLORS - customColors.length - (updatedColor ? 1 : 0)\n        ),\n    [colorsQueue, customColors, updatedColor]\n  );\n\n  const isColorInCollections = React.useCallback(\n    (targetColor: string) =>\n      colors.some(\n        (c) => normalizeColor(c.value) === normalizeColor(targetColor)\n      ) ||\n      customColors.some(\n        (c) => normalizeColor(c.value) === normalizeColor(targetColor)\n      ) ||\n      fullCustomColors.some(\n        (c) => normalizeColor(c.value) === normalizeColor(targetColor)\n      ),\n    [colors, customColors, fullCustomColors]\n  );\n\n  const customColor = React.useMemo(() => {\n    if (!updatedColor || isColorInCollections(updatedColor)) {\n      return null;\n    }\n\n    return updatedColor;\n  }, [isColorInCollections, updatedColor]);\n\n  const computedColors = React.useMemo(\n    () =>\n      customColor\n        ? [\n            ...customColors,\n            {\n              isBrightColor: computeIsBrightColor(customColor),\n              name: customColor,\n              value: customColor,\n            },\n            ...fullCustomColors,\n          ]\n        : [...customColors, ...fullCustomColors],\n    [customColor, fullCustomColors, customColors]\n  );\n\n  const updateCustomColorDebounced = React.useMemo(\n    () => debounce((value: string) => updateCustomColor(value), 100),\n    [updateCustomColor]\n  );\n\n  React.useEffect(\n    () => () => {\n      updateCustomColorDebounced.cancel();\n    },\n    [updateCustomColorDebounced]\n  );\n\n  return (\n    <div className={cn('flex flex-col gap-4', className)} {...props}>\n      <ColorDropdownMenuItems\n        color={color}\n        colors={computedColors}\n        updateColor={(c) => {\n          updateColor(c);\n          recordColorUsage(normalizeColor(c));\n        }}\n      >\n        <ColorInput\n          className=\"col-start-10\"\n          onChange={(e) => {\n            setValue(e.target.value);\n            updateCustomColorDebounced(e.target.value);\n          }}\n          value={value}\n        >\n          <DropdownMenuItem\n            className={cn(\n              buttonVariants({\n                size: 'icon',\n                variant: 'outline',\n              }),\n              'flex size-8 items-center justify-center rounded-full'\n            )}\n            onSelect={(e) => {\n              e.preventDefault();\n            }}\n          >\n            <span className=\"sr-only\">Custom</span>\n            <PlusIcon />\n          </DropdownMenuItem>\n        </ColorInput>\n      </ColorDropdownMenuItems>\n    </div>\n  );\n}\n\nfunction ColorInput({\n  children,\n  className,\n  value = '#000000',\n  ...props\n}: React.ComponentProps<'input'> & { className?: string }) {\n  const inputRef = React.useRef<HTMLInputElement | null>(null);\n\n  return (\n    <div className={cn('flex flex-col items-center', className)}>\n      {React.Children.map(children, (child) => {\n        if (!child) return child;\n\n        return React.cloneElement(\n          child as React.ReactElement<{\n            onClick: () => void;\n          }>,\n          {\n            onClick: () => inputRef.current?.click(),\n          }\n        );\n      })}\n      <input\n        {...props}\n        className=\"size-0 overflow-hidden border-0 p-0\"\n        ref={useComposedRef(props.ref, inputRef)}\n        type=\"color\"\n        value={value}\n      />\n    </div>\n  );\n}\n\ntype TColor = {\n  isBrightColor: boolean;\n  name: string;\n  value: string;\n};\n\nfunction ColorDropdownMenuItem({\n  className,\n  isBrightColor,\n  isSelected,\n  name,\n  updateColor,\n  value,\n  ...props\n}: {\n  isBrightColor: boolean;\n  isSelected: boolean;\n  value: string;\n  updateColor: (color: string) => void;\n  name?: string;\n} & DropdownMenuItemProps) {\n  const content = (\n    <DropdownMenuItem\n      className={cn(\n        buttonVariants({\n          size: 'icon',\n          variant: 'outline',\n        }),\n        'my-1 flex size-6 items-center justify-center rounded-full border border-muted border-solid p-0 transition-all hover:scale-125',\n        !isBrightColor && 'border-transparent text-white',\n        className\n      )}\n      style={{ backgroundColor: value }}\n      onSelect={(e) => {\n        e.preventDefault();\n        updateColor(value);\n      }}\n      {...props}\n    >\n      {isSelected ? <CheckIcon className=\"!size-3\" strokeWidth={3} /> : null}\n    </DropdownMenuItem>\n  );\n\n  return name ? (\n    <Tooltip>\n      <TooltipTrigger>{content}</TooltipTrigger>\n      <TooltipContent className=\"mb-1 capitalize\">{name}</TooltipContent>\n    </Tooltip>\n  ) : (\n    content\n  );\n}\n\nexport function ColorDropdownMenuItems({\n  className,\n  color,\n  colors,\n  updateColor,\n  ...props\n}: {\n  colors: TColor[];\n  updateColor: (color: string) => void;\n  color?: string;\n} & React.ComponentProps<'div'>) {\n  return (\n    <div\n      className={cn(\n        'grid grid-cols-[repeat(10,1fr)] place-items-center gap-x-1',\n        className\n      )}\n      {...props}\n    >\n      <TooltipProvider>\n        {colors.map(({ isBrightColor, name, value }) => (\n          <ColorDropdownMenuItem\n            name={name}\n            key={name ?? value}\n            value={value}\n            isBrightColor={isBrightColor}\n            isSelected={\n              !!color && normalizeColor(color) === normalizeColor(value)\n            }\n            updateColor={updateColor}\n          />\n        ))}\n        {props.children}\n      </TooltipProvider>\n    </div>\n  );\n}\n\nexport const DEFAULT_COLORS = [\n  {\n    isBrightColor: false,\n    name: 'black',\n    value: '#000000',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark grey 4',\n    value: '#434343',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark grey 3',\n    value: '#666666',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark grey 2',\n    value: '#999999',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark grey 1',\n    value: '#B7B7B7',\n  },\n  {\n    isBrightColor: false,\n    name: 'grey',\n    value: '#CCCCCC',\n  },\n  {\n    isBrightColor: false,\n    name: 'light grey 1',\n    value: '#D9D9D9',\n  },\n  {\n    isBrightColor: true,\n    name: 'light grey 2',\n    value: '#EFEFEF',\n  },\n  {\n    isBrightColor: true,\n    name: 'light grey 3',\n    value: '#F3F3F3',\n  },\n  {\n    isBrightColor: true,\n    name: 'white',\n    value: '#FFFFFF',\n  },\n  {\n    isBrightColor: false,\n    name: 'red berry',\n    value: '#980100',\n  },\n  {\n    isBrightColor: false,\n    name: 'red',\n    value: '#FE0000',\n  },\n  {\n    isBrightColor: false,\n    name: 'orange',\n    value: '#FE9900',\n  },\n  {\n    isBrightColor: true,\n    name: 'yellow',\n    value: '#FEFF00',\n  },\n  {\n    isBrightColor: false,\n    name: 'green',\n    value: '#00FF00',\n  },\n  {\n    isBrightColor: false,\n    name: 'cyan',\n    value: '#00FFFF',\n  },\n  {\n    isBrightColor: false,\n    name: 'cornflower blue',\n    value: '#4B85E8',\n  },\n  {\n    isBrightColor: false,\n    name: 'blue',\n    value: '#1300FF',\n  },\n  {\n    isBrightColor: false,\n    name: 'purple',\n    value: '#9900FF',\n  },\n  {\n    isBrightColor: false,\n    name: 'magenta',\n    value: '#FF00FF',\n  },\n\n  {\n    isBrightColor: false,\n    name: 'light red berry 3',\n    value: '#E6B8AF',\n  },\n  {\n    isBrightColor: false,\n    name: 'light red 3',\n    value: '#F4CCCC',\n  },\n  {\n    isBrightColor: true,\n    name: 'light orange 3',\n    value: '#FCE4CD',\n  },\n  {\n    isBrightColor: true,\n    name: 'light yellow 3',\n    value: '#FFF2CC',\n  },\n  {\n    isBrightColor: true,\n    name: 'light green 3',\n    value: '#D9EAD3',\n  },\n  {\n    isBrightColor: false,\n    name: 'light cyan 3',\n    value: '#D0DFE3',\n  },\n  {\n    isBrightColor: false,\n    name: 'light cornflower blue 3',\n    value: '#C9DAF8',\n  },\n  {\n    isBrightColor: true,\n    name: 'light blue 3',\n    value: '#CFE1F3',\n  },\n  {\n    isBrightColor: true,\n    name: 'light purple 3',\n    value: '#D9D2E9',\n  },\n  {\n    isBrightColor: true,\n    name: 'light magenta 3',\n    value: '#EAD1DB',\n  },\n\n  {\n    isBrightColor: false,\n    name: 'light red berry 2',\n    value: '#DC7E6B',\n  },\n  {\n    isBrightColor: false,\n    name: 'light red 2',\n    value: '#EA9999',\n  },\n  {\n    isBrightColor: false,\n    name: 'light orange 2',\n    value: '#F9CB9C',\n  },\n  {\n    isBrightColor: true,\n    name: 'light yellow 2',\n    value: '#FFE598',\n  },\n  {\n    isBrightColor: false,\n    name: 'light green 2',\n    value: '#B7D6A8',\n  },\n  {\n    isBrightColor: false,\n    name: 'light cyan 2',\n    value: '#A1C4C9',\n  },\n  {\n    isBrightColor: false,\n    name: 'light cornflower blue 2',\n    value: '#A4C2F4',\n  },\n  {\n    isBrightColor: false,\n    name: 'light blue 2',\n    value: '#9FC5E8',\n  },\n  {\n    isBrightColor: false,\n    name: 'light purple 2',\n    value: '#B5A7D5',\n  },\n  {\n    isBrightColor: false,\n    name: 'light magenta 2',\n    value: '#D5A6BD',\n  },\n\n  {\n    isBrightColor: false,\n    name: 'light red berry 1',\n    value: '#CC4125',\n  },\n  {\n    isBrightColor: false,\n    name: 'light red 1',\n    value: '#E06666',\n  },\n  {\n    isBrightColor: false,\n    name: 'light orange 1',\n    value: '#F6B26B',\n  },\n  {\n    isBrightColor: false,\n    name: 'light yellow 1',\n    value: '#FFD966',\n  },\n  {\n    isBrightColor: false,\n    name: 'light green 1',\n    value: '#93C47D',\n  },\n  {\n    isBrightColor: false,\n    name: 'light cyan 1',\n    value: '#76A5AE',\n  },\n  {\n    isBrightColor: false,\n    name: 'light cornflower blue 1',\n    value: '#6C9EEB',\n  },\n  {\n    isBrightColor: false,\n    name: 'light blue 1',\n    value: '#6FA8DC',\n  },\n  {\n    isBrightColor: false,\n    name: 'light purple 1',\n    value: '#8D7CC3',\n  },\n  {\n    isBrightColor: false,\n    name: 'light magenta 1',\n    value: '#C27BA0',\n  },\n\n  {\n    isBrightColor: false,\n    name: 'dark red berry 1',\n    value: '#A61B00',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark red 1',\n    value: '#CC0000',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark orange 1',\n    value: '#E59138',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark yellow 1',\n    value: '#F1C231',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark green 1',\n    value: '#6AA74F',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark cyan 1',\n    value: '#45818E',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark cornflower blue 1',\n    value: '#3B78D8',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark blue 1',\n    value: '#3E84C6',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark purple 1',\n    value: '#664EA6',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark magenta 1',\n    value: '#A64D78',\n  },\n\n  {\n    isBrightColor: false,\n    name: 'dark red berry 2',\n    value: '#84200D',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark red 2',\n    value: '#990001',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark orange 2',\n    value: '#B45F05',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark yellow 2',\n    value: '#BF9002',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark green 2',\n    value: '#38761D',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark cyan 2',\n    value: '#124F5C',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark cornflower blue 2',\n    value: '#1155CB',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark blue 2',\n    value: '#0C5394',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark purple 2',\n    value: '#351C75',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark magenta 2',\n    value: '#741B47',\n  },\n\n  {\n    isBrightColor: false,\n    name: 'dark red berry 3',\n    value: '#5B0F00',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark red 3',\n    value: '#660000',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark orange 3',\n    value: '#783F04',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark yellow 3',\n    value: '#7E6000',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark green 3',\n    value: '#274E12',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark cyan 3',\n    value: '#0D343D',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark cornflower blue 3',\n    value: '#1B4487',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark blue 3',\n    value: '#083763',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark purple 3',\n    value: '#1F124D',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark magenta 3',\n    value: '#4C1130',\n  },\n];\n\nconst DEFAULT_CUSTOM_COLORS = [\n  {\n    isBrightColor: false,\n    name: 'dark orange 3',\n    value: '#783F04',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark grey 3',\n    value: '#666666',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark grey 2',\n    value: '#999999',\n  },\n  {\n    isBrightColor: false,\n    name: 'light cornflower blue 1',\n    value: '#6C9EEB',\n  },\n  {\n    isBrightColor: false,\n    name: 'dark magenta 3',\n    value: '#4C1130',\n  },\n];\n",
      "type": "registry:ui"
    }
  ],
  "meta": {
    "docs": [
      {
        "route": "/docs/font"
      },
      {
        "route": "https://pro.platejs.org/docs/components/font-color-toolbar-button"
      }
    ],
    "examples": [
      "font-demo"
    ]
  },
  "type": "registry:ui"
}