@@ -230,7 +230,7 @@ function CustomizerCode() {
);
}
-function getThemeCode(theme: Theme, radius: number) {
+function getThemeCode(theme: BaseColor, radius: number) {
if (!theme) {
return '';
}
diff --git a/apps/www/src/components/style-switcher.tsx b/apps/www/src/components/style-switcher.tsx
index e47134f708..defef7be8e 100644
--- a/apps/www/src/components/style-switcher.tsx
+++ b/apps/www/src/components/style-switcher.tsx
@@ -7,7 +7,7 @@ import type { SelectTriggerProps } from '@radix-ui/react-select';
import { cn } from '@udecode/cn';
import { useConfig } from '@/hooks/use-config';
-import { type Style, styles } from '@/registry/styles';
+import { type Style, styles } from '@/registry/registry-styles';
import {
Select,
diff --git a/apps/www/src/components/style-wrapper.tsx b/apps/www/src/components/style-wrapper.tsx
index 44b210d9ed..02c30e6b3b 100644
--- a/apps/www/src/components/style-wrapper.tsx
+++ b/apps/www/src/components/style-wrapper.tsx
@@ -2,7 +2,7 @@
import * as React from 'react';
-import type { Style } from '@/registry/styles';
+import type { Style } from '@/registry/registry-styles';
import { useConfig } from '@/hooks/use-config';
diff --git a/apps/www/src/components/theme-customizer.tsx b/apps/www/src/components/theme-customizer.tsx
index 228a203ba3..4fc3521e8e 100644
--- a/apps/www/src/components/theme-customizer.tsx
+++ b/apps/www/src/components/theme-customizer.tsx
@@ -34,6 +34,7 @@ import {
TooltipContent,
TooltipTrigger,
} from '@/registry/default/plate-ui/tooltip';
+import { type BaseColor, baseColors } from '@/registry/registry-base-colors';
import { copyToClipboardWithMeta } from './copy-button';
import { ThemeWrapper } from './theme-wrapper';
diff --git a/apps/www/src/components/themes-button.tsx b/apps/www/src/components/themes-button.tsx
index c3bdd801ab..159368371a 100644
--- a/apps/www/src/components/themes-button.tsx
+++ b/apps/www/src/components/themes-button.tsx
@@ -14,7 +14,7 @@ import {
TooltipContent,
TooltipTrigger,
} from '@/registry/default/plate-ui/tooltip';
-import { themes } from '@/registry/themes';
+import { baseColors } from '@/registry/registry-base-colors';
import { settingsStore } from './context/settings-store';
import { Skeleton } from './ui/skeleton';
@@ -34,7 +34,7 @@ export function ThemesButton() {
{mounted ? (
<>
{['slate', 'rose', 'blue', 'green', 'orange'].map((color) => {
- const theme = themes.find((th) => th.name === color);
+ const theme = baseColors.find((th) => th.name === color);
const isActive = config.theme === color;
if (!theme) {
diff --git a/apps/www/src/components/themes-styles.tsx b/apps/www/src/components/themes-styles.tsx
index 1d829ff5bd..62ebee4fb6 100644
--- a/apps/www/src/components/themes-styles.tsx
+++ b/apps/www/src/components/themes-styles.tsx
@@ -1,5 +1,7 @@
'use client';
+import { useThemesConfig } from '@/hooks/use-themes-config';
+
export function ThemesStyle() {
const { themesConfig } = useThemesConfig();
diff --git a/apps/www/src/components/themes-tab-content.tsx b/apps/www/src/components/themes-tab-content.tsx
index 6686e4424c..bb5bc18437 100644
--- a/apps/www/src/components/themes-tab-content.tsx
+++ b/apps/www/src/components/themes-tab-content.tsx
@@ -19,7 +19,7 @@ import {
PopoverContent,
PopoverTrigger,
} from '@/registry/default/plate-ui/popover';
-import { themes } from '@/registry/themes';
+import { baseColors } from '@/registry/registry-base-colors';
import { CopyCodeButton } from './copy-code-button';
import { Label } from './ui/label';
@@ -109,7 +109,7 @@ export function ThemesTabContent() {
Color
- {themes.map((theme) => {
+ {baseColors.map((theme) => {
const isActive = config.theme === theme.name;
return mounted ? (
diff --git a/apps/www/src/components/typography.tsx b/apps/www/src/components/typography.tsx
index 7fe7e21614..d8f83a5cf1 100644
--- a/apps/www/src/components/typography.tsx
+++ b/apps/www/src/components/typography.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import type { Event } from '@/lib/events';
-import type { Style } from '@/registry/styles';
+import type { Style } from '@/registry/registry-styles';
import type { NpmCommands } from '@/types/unist';
import { cn } from '@udecode/cn';
diff --git a/apps/www/src/hooks/use-config.ts b/apps/www/src/hooks/use-config.ts
index d90326ea87..84430d8c82 100644
--- a/apps/www/src/hooks/use-config.ts
+++ b/apps/www/src/hooks/use-config.ts
@@ -1,4 +1,5 @@
-import type { Style } from '@/registry/styles';
+import type { BaseColor } from '@/registry/registry-base-colors';
+import type { Style } from '@/registry/registry-styles';
import { useAtom } from 'jotai';
import { atomWithStorage } from 'jotai/utils';
diff --git a/apps/www/src/lib/_blocks.ts b/apps/www/src/lib/_blocks.ts
index 5078061de4..b6a0cc008f 100644
--- a/apps/www/src/lib/_blocks.ts
+++ b/apps/www/src/lib/_blocks.ts
@@ -1,7 +1,7 @@
/* eslint-disable @typescript-eslint/require-await */
'use server';
-import type { Style } from '@/registry/styles';
+import type { Style } from '@/registry/registry-styles';
import { promises as fs } from 'node:fs';
import { tmpdir } from 'node:os';
diff --git a/apps/www/src/registry/registry-base-colors.ts b/apps/www/src/registry/registry-base-colors.ts
index 7cdccbc8bb..10ec7a1a6f 100644
--- a/apps/www/src/registry/registry-base-colors.ts
+++ b/apps/www/src/registry/registry-base-colors.ts
@@ -633,4 +633,4 @@ export const baseColors = [
},
] as const;
-export type BaseTheme = (typeof baseColors)[number];
+export type BaseColor = (typeof baseColors)[number];
diff --git a/apps/www/src/registry/registry-examples.ts b/apps/www/src/registry/registry-examples.ts
index 1f5fa5a3d1..88ce47ad1e 100644
--- a/apps/www/src/registry/registry-examples.ts
+++ b/apps/www/src/registry/registry-examples.ts
@@ -154,12 +154,12 @@ export const examples: Registry = [
external: true,
files: ['styles/globals.css'],
name: 'globals',
- type: 'components:component',
+ type: 'registry:style',
},
{
external: true,
files: ['types/plate-types.ts'],
name: 'plate-types',
- type: 'components:component',
+ type: 'registry:lib',
},
];
From 37d5697c61c5f5da9194b3f9ccee7d156eb7cf08 Mon Sep 17 00:00:00 2001
From: zbeyens
Date: Sat, 21 Sep 2024 23:58:45 +0200
Subject: [PATCH 3/8] fix: theme
---
apps/www/src/app/_components/home-tabs.tsx | 5 +-
apps/www/src/app/layout.tsx | 6 +-
apps/www/src/components/body.tsx | 43 --
apps/www/src/components/customizer-tabs.tsx | 4 +-
apps/www/src/components/theme-customizer.tsx | 505 +-----------------
apps/www/src/components/themes-selector.tsx | 122 -----
apps/www/src/components/themes-styles.tsx | 30 --
.../www/src/components/themes-tab-content.tsx | 214 --------
8 files changed, 34 insertions(+), 895 deletions(-)
delete mode 100644 apps/www/src/components/body.tsx
delete mode 100644 apps/www/src/components/themes-selector.tsx
delete mode 100644 apps/www/src/components/themes-styles.tsx
delete mode 100644 apps/www/src/components/themes-tab-content.tsx
diff --git a/apps/www/src/app/_components/home-tabs.tsx b/apps/www/src/app/_components/home-tabs.tsx
index fa604c3be5..48b2d640db 100644
--- a/apps/www/src/app/_components/home-tabs.tsx
+++ b/apps/www/src/app/_components/home-tabs.tsx
@@ -9,6 +9,7 @@ import { parseAsBoolean, useQueryState } from 'nuqs';
import { BlockPreview } from '@/components/block-preview';
import { settingsStore } from '@/components/context/settings-store';
+import { ThemeWrapper } from '@/components/theme-wrapper';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Button } from '@/registry/default/plate-ui/button';
@@ -68,7 +69,9 @@ export default function HomeTabs() {
-
+
diff --git a/apps/www/src/app/layout.tsx b/apps/www/src/app/layout.tsx
index 7c9c196590..c42665784a 100644
--- a/apps/www/src/app/layout.tsx
+++ b/apps/www/src/app/layout.tsx
@@ -4,7 +4,6 @@ import type { Metadata, Viewport } from 'next';
import { cn } from '@udecode/cn';
-import { Body } from '@/components/body';
import { Providers } from '@/components/context/providers';
import { SiteFooter } from '@/components/site-footer';
import { SiteHeader } from '@/components/site-header';
@@ -86,12 +85,11 @@ export default function RootLayout({ children }: RootLayoutProps) {
return (
-
@@ -106,7 +104,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
diff --git a/apps/www/src/components/theme-customizer.tsx b/apps/www/src/components/theme-customizer.tsx
index 4fc3521e8e..7c7b07c40d 100644
--- a/apps/www/src/components/theme-customizer.tsx
+++ b/apps/www/src/components/theme-customizer.tsx
@@ -4,172 +4,39 @@ import * as React from 'react';
import {
CheckIcon,
- CopyIcon,
InfoCircledIcon,
MoonIcon,
ResetIcon,
SunIcon,
} from '@radix-ui/react-icons';
import { cn } from '@udecode/cn';
-import template from 'lodash.template';
import { useTheme } from 'next-themes';
import { useConfig } from '@/hooks/use-config';
import { Button } from '@/registry/default/plate-ui/button';
-import {
- Dialog,
- DialogContent,
- DialogDescription,
- DialogHeader,
- DialogTitle,
- DialogTrigger,
-} from '@/registry/default/plate-ui/dialog';
import {
Popover,
PopoverContent,
PopoverTrigger,
} from '@/registry/default/plate-ui/popover';
-import {
- Tooltip,
- TooltipContent,
- TooltipTrigger,
-} from '@/registry/default/plate-ui/tooltip';
-import { type BaseColor, baseColors } from '@/registry/registry-base-colors';
+import { baseColors } from '@/registry/registry-base-colors';
-import { copyToClipboardWithMeta } from './copy-button';
-import { ThemeWrapper } from './theme-wrapper';
-import { Drawer, DrawerContent, DrawerTrigger } from './ui/drawer';
+import { CopyCodeButton } from './copy-code-button';
import { Label } from './ui/label';
import { Skeleton } from './ui/skeleton';
-import '@/styles/mdx.css';
-
export function ThemeCustomizer() {
- const [config, setConfig] = useConfig();
- const { resolvedTheme: mode } = useTheme();
const [mounted, setMounted] = React.useState(false);
-
- React.useEffect(() => {
- setMounted(true);
- }, []);
-
- return (
-
-
-
-
- Customize
-
-
-
-
-
-
-
-
- Customize
-
-
-
-
-
- {mounted ? (
- <>
- {['zinc', 'rose', 'blue', 'green', 'orange'].map((color) => {
- const baseColor = baseColors.find(
- (baseColor) => baseColor.name === color
- );
- const isActive = config.theme === color;
-
- if (!baseColor) {
- return null;
- }
-
- return (
-
-
-
- setConfig({
- ...config,
- theme: baseColor.name,
- })
- }
- type="button"
- >
-
- {isActive && (
-
- {baseColor.label}
-
-
-
- {baseColor.label}
-
-
- );
- })}
-
- ) : (
-
-
- )}
-
-
-
-
- );
-}
-
-function Customizer() {
- const [mounted, setMounted] = React.useState(false);
- const { resolvedTheme: mode, setTheme: setMode } = useTheme();
const [config, setConfig] = useConfig();
+ const { resolvedTheme: mode, setTheme: setMode } = useTheme();
React.useEffect(() => {
setMounted(true);
}, []);
return (
-
-
+ <>
+
Customize
@@ -178,21 +45,8 @@ function Customizer() {
Pick a style and color for your components.
-
{
- setConfig({
- ...config,
- radius: 0.5,
- theme: 'zinc',
- });
- }}
- >
- Reset
-
+
+
@@ -209,27 +63,21 @@ function Customizer() {
alignOffset={-20}
side="right"
>
-
- What is the difference between the New York and Default style?
-
+
What is a style?
A style comes with its own set of components, animations,
icons and more.
The Default style has
- larger inputs, uses lucide-react for icons and
+ large inputs, uses lucide-react for icons and
tailwindcss-animate for animations.
-
- The New York style ships
- with smaller buttons and cards with shadows. It uses icons
- from Radix Icons.
-
+
Other styles will be added in the future.
-
+
Default
- {/* setConfig({ ...config, style: 'new-york' })}
+
+ {
+ setConfig({
+ ...config,
+ radius: 0.5,
+ theme: 'slate',
+ });
+ }}
>
- New York
- */}
+ Reset
+
@@ -355,313 +209,6 @@ function Customizer() {
- );
-}
-
-function CopyCodeButton({
- className,
- ...props
-}: React.ComponentProps
) {
- const [config] = useConfig();
- const activeTheme = baseColors.find((theme) => theme.name === config.theme);
- const [hasCopied, setHasCopied] = React.useState(false);
-
- React.useEffect(() => {
- setTimeout(() => {
- setHasCopied(false);
- }, 2000);
- }, [hasCopied]);
-
- return (
- <>
- {activeTheme && (
- {
- copyToClipboardWithMeta(getThemeCode(activeTheme, config.radius), {
- name: 'copy_theme_code',
- properties: {
- radius: config.radius,
- theme: activeTheme.name,
- },
- });
- setHasCopied(true);
- }}
- {...props}
- >
- {hasCopied ? (
-
- )}
-
-
-
- Copy code
-
-
-
-
- Theme
-
- Copy and paste the following code into your CSS file.
-
-
-
- {
- copyToClipboardWithMeta(
- getThemeCode(activeTheme, config.radius),
- {
- name: 'copy_theme_code',
- properties: {
- radius: config.radius,
- theme: activeTheme.name,
- },
- }
- );
- setHasCopied(true);
- }}
- >
- {hasCopied ? (
-
- )}
-
-
-
);
}
-
-function CustomizerCode() {
- const [config] = useConfig();
- const activeTheme = baseColors.find((theme) => theme.name === config.theme);
-
- return (
-
-
-
-
- @layer base {
- :root {
-
- --background:{' '}
- {activeTheme?.cssVars.light.background};
-
-
- --foreground:{' '}
- {activeTheme?.cssVars.light.foreground};
-
- {[
- 'card',
- 'popover',
- 'primary',
- 'secondary',
- 'muted',
- 'accent',
- 'destructive',
- ].map((prefix) => (
- <>
-
- --{prefix}:{' '}
- {
- activeTheme?.cssVars.light[
- prefix as keyof typeof activeTheme.cssVars.light
- ]
- }
- ;
-
-
- --{prefix}-foreground:{' '}
- {
- activeTheme?.cssVars.light[
- `${prefix}-foreground` as keyof typeof activeTheme.cssVars.light
- ]
- }
- ;
-
-
- ))}
-
- --border:{' '}
- {activeTheme?.cssVars.light.border};
-
-
- --input:{' '}
- {activeTheme?.cssVars.light.input};
-
-
- --ring: {activeTheme?.cssVars.light.ring};
-
-
- --radius: {config.radius}rem;
-
- {['chart-1', 'chart-2', 'chart-3', 'chart-4', 'chart-5'].map(
- (prefix) => (
-
- --{prefix}:{' '}
- {
- activeTheme?.cssVars.light[
- prefix as keyof typeof activeTheme.cssVars.light
- ]
- }
- ;
-
- )
- )}
- }
-
- .dark {
-
- --background:{' '}
- {activeTheme?.cssVars.dark.background};
-
-
- --foreground:{' '}
- {activeTheme?.cssVars.dark.foreground};
-
- {[
- 'card',
- 'popover',
- 'primary',
- 'secondary',
- 'muted',
- 'accent',
- 'destructive',
- ].map((prefix) => (
- <>
-
- --{prefix}:{' '}
- {
- activeTheme?.cssVars.dark[
- prefix as keyof typeof activeTheme.cssVars.dark
- ]
- }
- ;
-
-
- --{prefix}-foreground:{' '}
- {
- activeTheme?.cssVars.dark[
- `${prefix}-foreground` as keyof typeof activeTheme.cssVars.dark
- ]
- }
- ;
-
-
- ))}
-
- --border:{' '}
- {activeTheme?.cssVars.dark.border};
-
-
- --input: {activeTheme?.cssVars.dark.input}
- ;
-
-
- --ring: {activeTheme?.cssVars.dark.ring};
-
- {['chart-1', 'chart-2', 'chart-3', 'chart-4', 'chart-5'].map(
- (prefix) => (
-
- --{prefix}:{' '}
- {
- activeTheme?.cssVars.dark[
- prefix as keyof typeof activeTheme.cssVars.dark
- ]
- }
- ;
-
- )
- )}
- }
- }
-
-
-
- );
-}
-
-function getThemeCode(theme: BaseColor, radius: number) {
- if (!theme) {
- return '';
- }
-
- return template(BASE_STYLES_WITH_VARIABLES)({
- colors: theme.cssVars,
- radius,
- });
-}
-
-const BASE_STYLES_WITH_VARIABLES = `
-@layer base {
- :root {
- --background: <%- colors.light["background"] %>;
- --foreground: <%- colors.light["foreground"] %>;
- --card: <%- colors.light["card"] %>;
- --card-foreground: <%- colors.light["card-foreground"] %>;
- --popover: <%- colors.light["popover"] %>;
- --popover-foreground: <%- colors.light["popover-foreground"] %>;
- --primary: <%- colors.light["primary"] %>;
- --primary-foreground: <%- colors.light["primary-foreground"] %>;
- --secondary: <%- colors.light["secondary"] %>;
- --secondary-foreground: <%- colors.light["secondary-foreground"] %>;
- --muted: <%- colors.light["muted"] %>;
- --muted-foreground: <%- colors.light["muted-foreground"] %>;
- --accent: <%- colors.light["accent"] %>;
- --accent-foreground: <%- colors.light["accent-foreground"] %>;
- --destructive: <%- colors.light["destructive"] %>;
- --destructive-foreground: <%- colors.light["destructive-foreground"] %>;
- --border: <%- colors.light["border"] %>;
- --input: <%- colors.light["input"] %>;
- --ring: <%- colors.light["ring"] %>;
- --radius: <%- radius %>rem;
- --chart-1: <%- colors.light["chart-1"] %>;
- --chart-2: <%- colors.light["chart-2"] %>;
- --chart-3: <%- colors.light["chart-3"] %>;
- --chart-4: <%- colors.light["chart-4"] %>;
- --chart-5: <%- colors.light["chart-5"] %>;
- }
-
- .dark {
- --background: <%- colors.dark["background"] %>;
- --foreground: <%- colors.dark["foreground"] %>;
- --card: <%- colors.dark["card"] %>;
- --card-foreground: <%- colors.dark["card-foreground"] %>;
- --popover: <%- colors.dark["popover"] %>;
- --popover-foreground: <%- colors.dark["popover-foreground"] %>;
- --primary: <%- colors.dark["primary"] %>;
- --primary-foreground: <%- colors.dark["primary-foreground"] %>;
- --secondary: <%- colors.dark["secondary"] %>;
- --secondary-foreground: <%- colors.dark["secondary-foreground"] %>;
- --muted: <%- colors.dark["muted"] %>;
- --muted-foreground: <%- colors.dark["muted-foreground"] %>;
- --accent: <%- colors.dark["accent"] %>;
- --accent-foreground: <%- colors.dark["accent-foreground"] %>;
- --destructive: <%- colors.dark["destructive"] %>;
- --destructive-foreground: <%- colors.dark["destructive-foreground"] %>;
- --border: <%- colors.dark["border"] %>;
- --input: <%- colors.dark["input"] %>;
- --ring: <%- colors.dark["ring"] %>;
- --chart-1: <%- colors.dark["chart-1"] %>;
- --chart-2: <%- colors.dark["chart-2"] %>;
- --chart-3: <%- colors.dark["chart-3"] %>;
- --chart-4: <%- colors.dark["chart-4"] %>;
- --chart-5: <%- colors.dark["chart-5"] %>;
- }
-}
-`;
diff --git a/apps/www/src/components/themes-selector.tsx b/apps/www/src/components/themes-selector.tsx
deleted file mode 100644
index 5af81e8fdd..0000000000
--- a/apps/www/src/components/themes-selector.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-'use client';
-import * as React from 'react';
-
-import { cn } from '@udecode/cn';
-import { useTheme } from 'next-themes';
-
-import { useMediaQuery } from '@/hooks/use-media-query';
-import { useThemesConfig } from '@/hooks/use-themes-config';
-import { type Theme, THEMES } from '@/lib/themes';
-import {
- Tooltip,
- TooltipContent,
- TooltipTrigger,
-} from '@/registry/default/plate-ui/tooltip';
-
-import { Skeleton } from './ui/skeleton';
-import { ToggleGroup, ToggleGroupItem } from './ui/toggle-group';
-
-export function ThemesSwitcher({
- className,
- themes = THEMES,
-}: React.ComponentProps<'div'> & { themes?: Theme[] }) {
- const { theme: mode } = useTheme();
- const [mounted, setMounted] = React.useState(false);
- const { setThemesConfig, themesConfig } = useThemesConfig();
- const activeTheme = themesConfig.activeTheme;
- const isDesktop = useMediaQuery('(min-width: 1024px)');
- React.useEffect(() => {
- setMounted(true);
- }, []);
-
- if (!mounted) {
- return (
-
- {themes.map((theme) => (
-
-
- ))}
-
{
- const theme = themes.find((theme) => theme.name === value);
-
- if (!theme) {
- return;
- }
-
- setThemesConfig({ ...themesConfig, activeTheme: theme });
- }}
- type="single"
- >
- {themes.map((theme) => {
- const isActive = theme.name === activeTheme.name;
- const isDarkTheme = ['Midnight'].includes(theme.name);
- const cssVars =
- mounted && mode === 'dark' ? theme.cssVars.dark : theme.cssVars.light;
-
- return (
-
-
-
-
-
- {theme.name}
-
-
-
-
- {theme.name}
-
-
- );
- })}
-
- );
-}
diff --git a/apps/www/src/components/themes-styles.tsx b/apps/www/src/components/themes-styles.tsx
deleted file mode 100644
index 62ebee4fb6..0000000000
--- a/apps/www/src/components/themes-styles.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-'use client';
-
-import { useThemesConfig } from '@/hooks/use-themes-config';
-
-export function ThemesStyle() {
- const { themesConfig } = useThemesConfig();
-
- if (!themesConfig.activeTheme) {
- return null;
- }
-
- return (
-
- );
-}
diff --git a/apps/www/src/components/themes-tab-content.tsx b/apps/www/src/components/themes-tab-content.tsx
deleted file mode 100644
index bb5bc18437..0000000000
--- a/apps/www/src/components/themes-tab-content.tsx
+++ /dev/null
@@ -1,214 +0,0 @@
-'use client';
-
-import * as React from 'react';
-
-import {
- CheckIcon,
- InfoCircledIcon,
- MoonIcon,
- ResetIcon,
- SunIcon,
-} from '@radix-ui/react-icons';
-import { cn } from '@udecode/cn';
-import { useTheme } from 'next-themes';
-
-import { useConfig } from '@/hooks/use-config';
-import { Button } from '@/registry/default/plate-ui/button';
-import {
- Popover,
- PopoverContent,
- PopoverTrigger,
-} from '@/registry/default/plate-ui/popover';
-import { baseColors } from '@/registry/registry-base-colors';
-
-import { CopyCodeButton } from './copy-code-button';
-import { Label } from './ui/label';
-import { Skeleton } from './ui/skeleton';
-
-export function ThemesTabContent() {
- const [mounted, setMounted] = React.useState(false);
- const [config, setConfig] = useConfig();
- const { resolvedTheme: mode, setTheme: setMode } = useTheme();
-
- React.useEffect(() => {
- setMounted(true);
- }, []);
-
- return (
- <>
-
-
-
- Customize
-
-
- Pick a style and color for your components.
-
-
-
-
-
-
-
-
Style
-
-
- About styles
-
-
- What is a style?
-
- A style comes with its own set of components, animations,
- icons and more.
-
-
- The Default style has
- large inputs, uses lucide-react for icons and
- tailwindcss-animate for animations.
-
- Other styles will be added in the future.
-
-
-
-
- setConfig({ ...config, style: 'default' })}
- >
- Default
-
-
- {
- setConfig({
- ...config,
- radius: 0.5,
- theme: 'slate',
- });
- }}
- >
- Reset
-
-
-
-
-
Color
-
- {baseColors.map((theme) => {
- const isActive = config.theme === theme.name;
-
- return mounted ? (
- {
- setConfig({
- ...config,
- theme: theme.name,
- });
- }}
- >
-
- {isActive &&
- {theme.label}
-
- ) : (
-
-
-
-
Radius
-
- {['0', '0.3', '0.5', '0.75', '1.0'].map((value) => {
- return (
- {
- setConfig({
- ...config,
- radius: Number.parseFloat(value),
- });
- }}
- >
- {value}
-
- );
- })}
-
-
-
-
Mode
-
- {mounted ? (
- <>
- setMode('light')}
- >
-
- setMode('dark')}
- >
-
-
- ) : (
- <>
-
-
-
Date: Sun, 22 Sep 2024 20:48:36 +0200
Subject: [PATCH 4/8] =?UTF-8?q?=F0=9F=8E=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
apps/www/public/r/colors/gray.json | 92 +
apps/www/public/r/colors/index.json | 1999 +++++++++++++++++
apps/www/public/r/colors/neutral.json | 92 +
apps/www/public/r/colors/slate.json | 92 +
apps/www/public/r/colors/stone.json | 92 +
apps/www/public/r/colors/zinc.json | 92 +
apps/www/public/r/index.json | 1242 ++++++++++
.../r/styles/default/align-dropdown-menu.json | 19 +
apps/www/public/r/styles/default/avatar.json | 16 +
.../r/styles/default/blockquote-element.json | 16 +
apps/www/public/r/styles/default/button.json | 16 +
.../www/public/r/styles/default/calendar.json | 19 +
apps/www/public/r/styles/default/caption.json | 16 +
.../www/public/r/styles/default/checkbox.json | 16 +
apps/www/public/r/styles/default/cloud.json | 46 +
.../r/styles/default/code-block-element.json | 30 +
.../public/r/styles/default/code-leaf.json | 16 +
.../r/styles/default/code-line-element.json | 16 +
.../r/styles/default/code-syntax-leaf.json | 16 +
.../r/styles/default/color-dropdown-menu.json | 50 +
.../r/styles/default/column-element.json | 25 +
apps/www/public/r/styles/default/command.json | 18 +
.../public/r/styles/default/comment-leaf.json | 16 +
.../default/comment-toolbar-button.json | 14 +
.../r/styles/default/comments-popover.json | 61 +
.../r/styles/default/cursor-overlay.json | 14 +
.../public/r/styles/default/date-element.json | 18 +
apps/www/public/r/styles/default/dialog.json | 16 +
.../public/r/styles/default/draggable.json | 26 +
.../r/styles/default/dropdown-menu.json | 16 +
apps/www/public/r/styles/default/editor.json | 14 +
.../r/styles/default/emoji-dropdown-menu.json | 66 +
.../r/styles/default/emoji-input-element.json | 18 +
.../r/styles/default/excalidraw-element.json | 16 +
.../styles/default/fixed-toolbar-buttons.json | 22 +
.../r/styles/default/fixed-toolbar.json | 16 +
.../default/floating-toolbar-buttons.json | 20 +
.../r/styles/default/floating-toolbar.json | 18 +
.../r/styles/default/heading-element.json | 16 +
.../r/styles/default/highlight-leaf.json | 16 +
.../public/r/styles/default/hr-element.json | 16 +
.../r/styles/default/image-element.json | 20 +
.../default/indent-list-toolbar-button.json | 18 +
.../styles/default/indent-toolbar-button.json | 18 +
apps/www/public/r/styles/default/index.json | 21 +
.../r/styles/default/inline-combobox.json | 17 +
apps/www/public/r/styles/default/input.json | 14 +
.../styles/default/insert-dropdown-menu.json | 20 +
.../www/public/r/styles/default/kbd-leaf.json | 16 +
.../default/line-height-dropdown-menu.json | 19 +
.../public/r/styles/default/link-element.json | 16 +
.../styles/default/link-floating-toolbar.json | 21 +
.../r/styles/default/link-toolbar-button.json | 18 +
.../public/r/styles/default/list-element.json | 16 +
.../r/styles/default/list-toolbar-button.json | 18 +
.../r/styles/default/mark-toolbar-button.json | 18 +
.../r/styles/default/media-embed-element.json | 22 +
.../r/styles/default/media-popover.json | 21 +
.../styles/default/media-toolbar-button.json | 18 +
.../r/styles/default/mention-element.json | 16 +
.../styles/default/mention-input-element.json | 18 +
.../r/styles/default/mode-dropdown-menu.json | 17 +
.../r/styles/default/more-dropdown-menu.json | 19 +
.../default/outdent-toolbar-button.json | 18 +
.../r/styles/default/paragraph-element.json | 13 +
.../public/r/styles/default/placeholder.json | 18 +
.../public/r/styles/default/plate-types.json | 13 +
apps/www/public/r/styles/default/popover.json | 16 +
.../public/r/styles/default/resizable.json | 16 +
.../styles/default/search-highlight-leaf.json | 16 +
.../public/r/styles/default/separator.json | 16 +
.../r/styles/default/slash-input-element.json | 19 +
.../r/styles/default/table-cell-element.json | 18 +
.../r/styles/default/table-dropdown-menu.json | 19 +
.../r/styles/default/table-element.json | 18 +
.../r/styles/default/table-row-element.json | 16 +
.../r/styles/default/theme-daylight.json | 58 +
.../r/styles/default/theme-emerald.json | 58 +
.../r/styles/default/theme-midnight.json | 58 +
.../r/styles/default/todo-list-element.json | 18 +
.../r/styles/default/toggle-element.json | 16 +
.../styles/default/toggle-toolbar-button.json | 18 +
apps/www/public/r/styles/default/toolbar.json | 19 +
apps/www/public/r/styles/default/tooltip.json | 16 +
.../default/turn-into-dropdown-menu.json | 20 +
.../public/r/styles/default/use-debounce.json | 11 +
apps/www/public/r/styles/default/utils.json | 15 +
apps/www/public/r/styles/index.json | 6 +
apps/www/public/r/themes.css | 768 +++++++
apps/www/public/r/themes/gray.json | 48 +
apps/www/public/r/themes/neutral.json | 48 +
apps/www/public/r/themes/slate.json | 48 +
apps/www/public/r/themes/stone.json | 48 +
apps/www/public/r/themes/zinc.json | 48 +
apps/www/scripts/build-registry.mts | 16 +-
apps/www/src/__registry__/.autogenerated | 1 -
apps/www/src/__registry__/.gitkeep | 0
apps/www/src/__registry__/README.md | 1 -
apps/www/src/__registry__/index.tsx | 1418 ++++++------
apps/www/src/app/_components/home-tabs.tsx | 5 +-
.../src/app/_components/installation-tab.tsx | 6 -
apps/www/src/app/announcement-button.tsx | 12 +-
apps/www/src/app/page.tsx | 8 +-
apps/www/src/components/block-copy-button.tsx | 53 +-
apps/www/src/components/block-preview.tsx | 18 +-
apps/www/src/components/context/providers.tsx | 10 +-
apps/www/src/components/copy-code-button.tsx | 318 +--
apps/www/src/components/customizer-drawer.tsx | 4 +-
apps/www/src/components/customizer-tabs.tsx | 13 +-
.../playground-insert-dropdown-menu.tsx | 2 +-
.../playground-turn-into-dropdown-menu.tsx | 2 +-
.../src/components/plugins-tab-content.tsx | 2 +-
apps/www/src/components/setting-checkbox.tsx | 41 +-
apps/www/src/components/settings-toggle.tsx | 33 +-
apps/www/src/components/theme-customizer.tsx | 109 +-
apps/www/src/components/theme-switcher.tsx | 28 +
apps/www/src/components/theme-wrapper.tsx | 7 +-
apps/www/src/components/themes-button.tsx | 94 +-
.../src/components/themes-selector-mini.tsx | 136 ++
apps/www/src/components/themes-selector.tsx | 128 ++
apps/www/src/components/themes-styles.tsx | 35 +
apps/www/src/components/ui/toggle.tsx | 1 +
apps/www/src/config/docs.ts | 1 -
apps/www/src/hooks/use-themes-config.ts | 3 +-
.../plate/demo/values/usePlaygroundValue.ts | 2 +-
apps/www/src/lib/themes.ts | 725 +++---
.../registry/default/example/mode-toggle.tsx | 44 +-
.../default/example/playground-demo.tsx | 131 +-
.../default}/hooks/use-debounce.ts | 0
.../default/lib}/plate-types.ts | 0
.../src/{ => registry/default}/lib/utils.ts | 0
.../plate-ui/color-dropdown-menu-items.tsx | 29 +-
.../default/plate-ui/comments-popover.tsx | 2 +-
.../registry/default/plate-ui/draggable.tsx | 51 +-
.../src/registry/default/plate-ui/editor.tsx | 2 +-
.../default/plate-ui/emoji-input-element.tsx | 19 +-
.../default/plate-ui/floating-toolbar.tsx | 2 +-
.../default/plate-ui/inline-combobox.tsx | 2 +-
.../src/registry/default/plate-ui/toolbar.tsx | 2 +-
.../src/registry/default/plate-ui/tooltip.tsx | 41 +-
apps/www/src/registry/registry-examples.ts | 8 +-
apps/www/src/registry/registry-hooks.ts | 14 +-
142 files changed, 8287 insertions(+), 1685 deletions(-)
create mode 100644 apps/www/public/r/colors/gray.json
create mode 100644 apps/www/public/r/colors/index.json
create mode 100644 apps/www/public/r/colors/neutral.json
create mode 100644 apps/www/public/r/colors/slate.json
create mode 100644 apps/www/public/r/colors/stone.json
create mode 100644 apps/www/public/r/colors/zinc.json
create mode 100644 apps/www/public/r/index.json
create mode 100644 apps/www/public/r/styles/default/align-dropdown-menu.json
create mode 100644 apps/www/public/r/styles/default/avatar.json
create mode 100644 apps/www/public/r/styles/default/blockquote-element.json
create mode 100644 apps/www/public/r/styles/default/button.json
create mode 100644 apps/www/public/r/styles/default/calendar.json
create mode 100644 apps/www/public/r/styles/default/caption.json
create mode 100644 apps/www/public/r/styles/default/checkbox.json
create mode 100644 apps/www/public/r/styles/default/cloud.json
create mode 100644 apps/www/public/r/styles/default/code-block-element.json
create mode 100644 apps/www/public/r/styles/default/code-leaf.json
create mode 100644 apps/www/public/r/styles/default/code-line-element.json
create mode 100644 apps/www/public/r/styles/default/code-syntax-leaf.json
create mode 100644 apps/www/public/r/styles/default/color-dropdown-menu.json
create mode 100644 apps/www/public/r/styles/default/column-element.json
create mode 100644 apps/www/public/r/styles/default/command.json
create mode 100644 apps/www/public/r/styles/default/comment-leaf.json
create mode 100644 apps/www/public/r/styles/default/comment-toolbar-button.json
create mode 100644 apps/www/public/r/styles/default/comments-popover.json
create mode 100644 apps/www/public/r/styles/default/cursor-overlay.json
create mode 100644 apps/www/public/r/styles/default/date-element.json
create mode 100644 apps/www/public/r/styles/default/dialog.json
create mode 100644 apps/www/public/r/styles/default/draggable.json
create mode 100644 apps/www/public/r/styles/default/dropdown-menu.json
create mode 100644 apps/www/public/r/styles/default/editor.json
create mode 100644 apps/www/public/r/styles/default/emoji-dropdown-menu.json
create mode 100644 apps/www/public/r/styles/default/emoji-input-element.json
create mode 100644 apps/www/public/r/styles/default/excalidraw-element.json
create mode 100644 apps/www/public/r/styles/default/fixed-toolbar-buttons.json
create mode 100644 apps/www/public/r/styles/default/fixed-toolbar.json
create mode 100644 apps/www/public/r/styles/default/floating-toolbar-buttons.json
create mode 100644 apps/www/public/r/styles/default/floating-toolbar.json
create mode 100644 apps/www/public/r/styles/default/heading-element.json
create mode 100644 apps/www/public/r/styles/default/highlight-leaf.json
create mode 100644 apps/www/public/r/styles/default/hr-element.json
create mode 100644 apps/www/public/r/styles/default/image-element.json
create mode 100644 apps/www/public/r/styles/default/indent-list-toolbar-button.json
create mode 100644 apps/www/public/r/styles/default/indent-toolbar-button.json
create mode 100644 apps/www/public/r/styles/default/index.json
create mode 100644 apps/www/public/r/styles/default/inline-combobox.json
create mode 100644 apps/www/public/r/styles/default/input.json
create mode 100644 apps/www/public/r/styles/default/insert-dropdown-menu.json
create mode 100644 apps/www/public/r/styles/default/kbd-leaf.json
create mode 100644 apps/www/public/r/styles/default/line-height-dropdown-menu.json
create mode 100644 apps/www/public/r/styles/default/link-element.json
create mode 100644 apps/www/public/r/styles/default/link-floating-toolbar.json
create mode 100644 apps/www/public/r/styles/default/link-toolbar-button.json
create mode 100644 apps/www/public/r/styles/default/list-element.json
create mode 100644 apps/www/public/r/styles/default/list-toolbar-button.json
create mode 100644 apps/www/public/r/styles/default/mark-toolbar-button.json
create mode 100644 apps/www/public/r/styles/default/media-embed-element.json
create mode 100644 apps/www/public/r/styles/default/media-popover.json
create mode 100644 apps/www/public/r/styles/default/media-toolbar-button.json
create mode 100644 apps/www/public/r/styles/default/mention-element.json
create mode 100644 apps/www/public/r/styles/default/mention-input-element.json
create mode 100644 apps/www/public/r/styles/default/mode-dropdown-menu.json
create mode 100644 apps/www/public/r/styles/default/more-dropdown-menu.json
create mode 100644 apps/www/public/r/styles/default/outdent-toolbar-button.json
create mode 100644 apps/www/public/r/styles/default/paragraph-element.json
create mode 100644 apps/www/public/r/styles/default/placeholder.json
create mode 100644 apps/www/public/r/styles/default/plate-types.json
create mode 100644 apps/www/public/r/styles/default/popover.json
create mode 100644 apps/www/public/r/styles/default/resizable.json
create mode 100644 apps/www/public/r/styles/default/search-highlight-leaf.json
create mode 100644 apps/www/public/r/styles/default/separator.json
create mode 100644 apps/www/public/r/styles/default/slash-input-element.json
create mode 100644 apps/www/public/r/styles/default/table-cell-element.json
create mode 100644 apps/www/public/r/styles/default/table-dropdown-menu.json
create mode 100644 apps/www/public/r/styles/default/table-element.json
create mode 100644 apps/www/public/r/styles/default/table-row-element.json
create mode 100644 apps/www/public/r/styles/default/theme-daylight.json
create mode 100644 apps/www/public/r/styles/default/theme-emerald.json
create mode 100644 apps/www/public/r/styles/default/theme-midnight.json
create mode 100644 apps/www/public/r/styles/default/todo-list-element.json
create mode 100644 apps/www/public/r/styles/default/toggle-element.json
create mode 100644 apps/www/public/r/styles/default/toggle-toolbar-button.json
create mode 100644 apps/www/public/r/styles/default/toolbar.json
create mode 100644 apps/www/public/r/styles/default/tooltip.json
create mode 100644 apps/www/public/r/styles/default/turn-into-dropdown-menu.json
create mode 100644 apps/www/public/r/styles/default/use-debounce.json
create mode 100644 apps/www/public/r/styles/default/utils.json
create mode 100644 apps/www/public/r/styles/index.json
create mode 100644 apps/www/public/r/themes.css
create mode 100644 apps/www/public/r/themes/gray.json
create mode 100644 apps/www/public/r/themes/neutral.json
create mode 100644 apps/www/public/r/themes/slate.json
create mode 100644 apps/www/public/r/themes/stone.json
create mode 100644 apps/www/public/r/themes/zinc.json
delete mode 100644 apps/www/src/__registry__/.autogenerated
delete mode 100644 apps/www/src/__registry__/.gitkeep
delete mode 100644 apps/www/src/__registry__/README.md
create mode 100644 apps/www/src/components/theme-switcher.tsx
create mode 100644 apps/www/src/components/themes-selector-mini.tsx
create mode 100644 apps/www/src/components/themes-selector.tsx
create mode 100644 apps/www/src/components/themes-styles.tsx
rename apps/www/src/{ => registry/default}/hooks/use-debounce.ts (100%)
rename apps/www/src/{types => registry/default/lib}/plate-types.ts (100%)
rename apps/www/src/{ => registry/default}/lib/utils.ts (100%)
diff --git a/apps/www/public/r/colors/gray.json b/apps/www/public/r/colors/gray.json
new file mode 100644
index 0000000000..852a65cb79
--- /dev/null
+++ b/apps/www/public/r/colors/gray.json
@@ -0,0 +1,92 @@
+{
+ "inlineColors": {
+ "dark": {
+ "accent": "gray-800",
+ "accent-foreground": "gray-50",
+ "background": "gray-950",
+ "border": "gray-800",
+ "card": "gray-950",
+ "card-foreground": "gray-50",
+ "destructive": "red-900",
+ "destructive-foreground": "gray-50",
+ "foreground": "gray-50",
+ "input": "gray-800",
+ "muted": "gray-800",
+ "muted-foreground": "gray-400",
+ "popover": "gray-950",
+ "popover-foreground": "gray-50",
+ "primary": "gray-50",
+ "primary-foreground": "gray-900",
+ "ring": "gray-300",
+ "secondary": "gray-800",
+ "secondary-foreground": "gray-50"
+ },
+ "light": {
+ "accent": "gray-100",
+ "accent-foreground": "gray-900",
+ "background": "white",
+ "border": "gray-200",
+ "card": "white",
+ "card-foreground": "gray-950",
+ "destructive": "red-500",
+ "destructive-foreground": "gray-50",
+ "foreground": "gray-950",
+ "input": "gray-200",
+ "muted": "gray-100",
+ "muted-foreground": "gray-500",
+ "popover": "white",
+ "popover-foreground": "gray-950",
+ "primary": "gray-900",
+ "primary-foreground": "gray-50",
+ "ring": "gray-950",
+ "secondary": "gray-100",
+ "secondary-foreground": "gray-900"
+ }
+ },
+ "cssVars": {
+ "dark": {
+ "accent": "215 27.9% 16.9%",
+ "accent-foreground": "210 20% 98%",
+ "background": "224 71.4% 4.1%",
+ "border": "215 27.9% 16.9%",
+ "card": "224 71.4% 4.1%",
+ "card-foreground": "210 20% 98%",
+ "destructive": "0 62.8% 30.6%",
+ "destructive-foreground": "210 20% 98%",
+ "foreground": "210 20% 98%",
+ "input": "215 27.9% 16.9%",
+ "muted": "215 27.9% 16.9%",
+ "muted-foreground": "217.9 10.6% 64.9%",
+ "popover": "224 71.4% 4.1%",
+ "popover-foreground": "210 20% 98%",
+ "primary": "210 20% 98%",
+ "primary-foreground": "220.9 39.3% 11%",
+ "ring": "216 12.2% 83.9%",
+ "secondary": "215 27.9% 16.9%",
+ "secondary-foreground": "210 20% 98%"
+ },
+ "light": {
+ "accent": "220 14.3% 95.9%",
+ "accent-foreground": "220.9 39.3% 11%",
+ "background": "0 0% 100%",
+ "border": "220 13% 91%",
+ "card": "0 0% 100%",
+ "card-foreground": "224 71.4% 4.1%",
+ "destructive": "0 84.2% 60.2%",
+ "destructive-foreground": "210 20% 98%",
+ "foreground": "224 71.4% 4.1%",
+ "input": "220 13% 91%",
+ "muted": "220 14.3% 95.9%",
+ "muted-foreground": "220 8.9% 46.1%",
+ "popover": "0 0% 100%",
+ "popover-foreground": "224 71.4% 4.1%",
+ "primary": "220.9 39.3% 11%",
+ "primary-foreground": "210 20% 98%",
+ "ring": "224 71.4% 4.1%",
+ "secondary": "220 14.3% 95.9%",
+ "secondary-foreground": "220.9 39.3% 11%"
+ }
+ },
+ "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n ",
+ "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 224 71.4% 4.1%;\n --card: 0 0% 100%;\n --card-foreground: 224 71.4% 4.1%;\n --popover: 0 0% 100%;\n --popover-foreground: 224 71.4% 4.1%;\n --primary: 220.9 39.3% 11%;\n --primary-foreground: 210 20% 98%;\n --secondary: 220 14.3% 95.9%;\n --secondary-foreground: 220.9 39.3% 11%;\n --muted: 220 14.3% 95.9%;\n --muted-foreground: 220 8.9% 46.1%;\n --accent: 220 14.3% 95.9%;\n --accent-foreground: 220.9 39.3% 11%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 210 20% 98%;\n --border: 220 13% 91%;\n --input: 220 13% 91%;\n --ring: 224 71.4% 4.1%;\n --radius: 0.5rem;\n --chart-1: ;\n --chart-2: ;\n --chart-3: ;\n --chart-4: ;\n --chart-5: ;\n }\n\n .dark {\n --background: 224 71.4% 4.1%;\n --foreground: 210 20% 98%;\n --card: 224 71.4% 4.1%;\n --card-foreground: 210 20% 98%;\n --popover: 224 71.4% 4.1%;\n --popover-foreground: 210 20% 98%;\n --primary: 210 20% 98%;\n --primary-foreground: 220.9 39.3% 11%;\n --secondary: 215 27.9% 16.9%;\n --secondary-foreground: 210 20% 98%;\n --muted: 215 27.9% 16.9%;\n --muted-foreground: 217.9 10.6% 64.9%;\n --accent: 215 27.9% 16.9%;\n --accent-foreground: 210 20% 98%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 210 20% 98%;\n --border: 215 27.9% 16.9%;\n --input: 215 27.9% 16.9%;\n --ring: 216 12.2% 83.9%;\n --chart-1: ;\n --chart-2: ;\n --chart-3: ;\n --chart-4: ;\n --chart-5: ;\n }\n}\n\n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}"
+}
\ No newline at end of file
diff --git a/apps/www/public/r/colors/index.json b/apps/www/public/r/colors/index.json
new file mode 100644
index 0000000000..4c71741904
--- /dev/null
+++ b/apps/www/public/r/colors/index.json
@@ -0,0 +1,1999 @@
+{
+ "amber": [
+ {
+ "hex": "#fffbeb",
+ "hsl": "hsl(48,100%,96.1%)",
+ "rgb": "rgb(255,251,235)",
+ "scale": 50,
+ "rgbChannel": "255 251 235",
+ "hslChannel": "48 100% 96.1%"
+ },
+ {
+ "hex": "#fef3c7",
+ "hsl": "hsl(48,96.5%,88.8%)",
+ "rgb": "rgb(254,243,199)",
+ "scale": 100,
+ "rgbChannel": "254 243 199",
+ "hslChannel": "48 96.5% 88.8%"
+ },
+ {
+ "hex": "#fde68a",
+ "hsl": "hsl(48,96.6%,76.7%)",
+ "rgb": "rgb(253,230,138)",
+ "scale": 200,
+ "rgbChannel": "253 230 138",
+ "hslChannel": "48 96.6% 76.7%"
+ },
+ {
+ "hex": "#fcd34d",
+ "hsl": "hsl(45.9,96.7%,64.5%)",
+ "rgb": "rgb(252,211,77)",
+ "scale": 300,
+ "rgbChannel": "252 211 77",
+ "hslChannel": "45.9 96.7% 64.5%"
+ },
+ {
+ "hex": "#fbbf24",
+ "hsl": "hsl(43.3,96.4%,56.3%)",
+ "rgb": "rgb(251,191,36)",
+ "scale": 400,
+ "rgbChannel": "251 191 36",
+ "hslChannel": "43.3 96.4% 56.3%"
+ },
+ {
+ "hex": "#f59e0b",
+ "hsl": "hsl(37.7,92.1%,50.2%)",
+ "rgb": "rgb(245,158,11)",
+ "scale": 500,
+ "rgbChannel": "245 158 11",
+ "hslChannel": "37.7 92.1% 50.2%"
+ },
+ {
+ "hex": "#d97706",
+ "hsl": "hsl(32.1,94.6%,43.7%)",
+ "rgb": "rgb(217,119,6)",
+ "scale": 600,
+ "rgbChannel": "217 119 6",
+ "hslChannel": "32.1 94.6% 43.7%"
+ },
+ {
+ "hex": "#b45309",
+ "hsl": "hsl(26,90.5%,37.1%)",
+ "rgb": "rgb(180,83,9)",
+ "scale": 700,
+ "rgbChannel": "180 83 9",
+ "hslChannel": "26 90.5% 37.1%"
+ },
+ {
+ "hex": "#92400e",
+ "hsl": "hsl(22.7,82.5%,31.4%)",
+ "rgb": "rgb(146,64,14)",
+ "scale": 800,
+ "rgbChannel": "146 64 14",
+ "hslChannel": "22.7 82.5% 31.4%"
+ },
+ {
+ "hex": "#78350f",
+ "hsl": "hsl(21.7,77.8%,26.5%)",
+ "rgb": "rgb(120,53,15)",
+ "scale": 900,
+ "rgbChannel": "120 53 15",
+ "hslChannel": "21.7 77.8% 26.5%"
+ },
+ {
+ "hex": "#451a03",
+ "hsl": "hsl(20.9,91.7%,14.1%)",
+ "rgb": "rgb(69,26,3)",
+ "scale": 950,
+ "rgbChannel": "69 26 3",
+ "hslChannel": "20.9 91.7% 14.1%"
+ }
+ ],
+ "black": {
+ "hex": "#000000",
+ "hsl": "hsl(0,0%,0%)",
+ "rgb": "rgb(0,0,0)",
+ "rgbChannel": "0 0 0",
+ "hslChannel": "0 0% 0%"
+ },
+ "blue": [
+ {
+ "hex": "#eff6ff",
+ "hsl": "hsl(213.8,100%,96.9%)",
+ "rgb": "rgb(239,246,255)",
+ "scale": 50,
+ "rgbChannel": "239 246 255",
+ "hslChannel": "213.8 100% 96.9%"
+ },
+ {
+ "hex": "#dbeafe",
+ "hsl": "hsl(214.3,94.6%,92.7%)",
+ "rgb": "rgb(219,234,254)",
+ "scale": 100,
+ "rgbChannel": "219 234 254",
+ "hslChannel": "214.3 94.6% 92.7%"
+ },
+ {
+ "hex": "#bfdbfe",
+ "hsl": "hsl(213.3,96.9%,87.3%)",
+ "rgb": "rgb(191,219,254)",
+ "scale": 200,
+ "rgbChannel": "191 219 254",
+ "hslChannel": "213.3 96.9% 87.3%"
+ },
+ {
+ "hex": "#93c5fd",
+ "hsl": "hsl(211.7,96.4%,78.4%)",
+ "rgb": "rgb(147,197,253)",
+ "scale": 300,
+ "rgbChannel": "147 197 253",
+ "hslChannel": "211.7 96.4% 78.4%"
+ },
+ {
+ "hex": "#60a5fa",
+ "hsl": "hsl(213.1,93.9%,67.8%)",
+ "rgb": "rgb(96,165,250)",
+ "scale": 400,
+ "rgbChannel": "96 165 250",
+ "hslChannel": "213.1 93.9% 67.8%"
+ },
+ {
+ "hex": "#3b82f6",
+ "hsl": "hsl(217.2,91.2%,59.8%)",
+ "rgb": "rgb(59,130,246)",
+ "scale": 500,
+ "rgbChannel": "59 130 246",
+ "hslChannel": "217.2 91.2% 59.8%"
+ },
+ {
+ "hex": "#2563eb",
+ "hsl": "hsl(221.2,83.2%,53.3%)",
+ "rgb": "rgb(37,99,235)",
+ "scale": 600,
+ "rgbChannel": "37 99 235",
+ "hslChannel": "221.2 83.2% 53.3%"
+ },
+ {
+ "hex": "#1d4ed8",
+ "hsl": "hsl(224.3,76.3%,48%)",
+ "rgb": "rgb(29,78,216)",
+ "scale": 700,
+ "rgbChannel": "29 78 216",
+ "hslChannel": "224.3 76.3% 48%"
+ },
+ {
+ "hex": "#1e40af",
+ "hsl": "hsl(225.9,70.7%,40.2%)",
+ "rgb": "rgb(30,64,175)",
+ "scale": 800,
+ "rgbChannel": "30 64 175",
+ "hslChannel": "225.9 70.7% 40.2%"
+ },
+ {
+ "hex": "#1e3a8a",
+ "hsl": "hsl(224.4,64.3%,32.9%)",
+ "rgb": "rgb(30,58,138)",
+ "scale": 900,
+ "rgbChannel": "30 58 138",
+ "hslChannel": "224.4 64.3% 32.9%"
+ },
+ {
+ "hex": "#172554",
+ "hsl": "hsl(226.2,57%,21%)",
+ "rgb": "rgb(23,37,84)",
+ "scale": 950,
+ "rgbChannel": "23 37 84",
+ "hslChannel": "226.2 57% 21%"
+ }
+ ],
+ "current": "currentColor",
+ "cyan": [
+ {
+ "hex": "#ecfeff",
+ "hsl": "hsl(183.2,100%,96.3%)",
+ "rgb": "rgb(236,254,255)",
+ "scale": 50,
+ "rgbChannel": "236 254 255",
+ "hslChannel": "183.2 100% 96.3%"
+ },
+ {
+ "hex": "#cffafe",
+ "hsl": "hsl(185.1,95.9%,90.4%)",
+ "rgb": "rgb(207,250,254)",
+ "scale": 100,
+ "rgbChannel": "207 250 254",
+ "hslChannel": "185.1 95.9% 90.4%"
+ },
+ {
+ "hex": "#a5f3fc",
+ "hsl": "hsl(186.2,93.5%,81.8%)",
+ "rgb": "rgb(165,243,252)",
+ "scale": 200,
+ "rgbChannel": "165 243 252",
+ "hslChannel": "186.2 93.5% 81.8%"
+ },
+ {
+ "hex": "#67e8f9",
+ "hsl": "hsl(187,92.4%,69%)",
+ "rgb": "rgb(103,232,249)",
+ "scale": 300,
+ "rgbChannel": "103 232 249",
+ "hslChannel": "187 92.4% 69%"
+ },
+ {
+ "hex": "#22d3ee",
+ "hsl": "hsl(187.9,85.7%,53.3%)",
+ "rgb": "rgb(34,211,238)",
+ "scale": 400,
+ "rgbChannel": "34 211 238",
+ "hslChannel": "187.9 85.7% 53.3%"
+ },
+ {
+ "hex": "#06b6d4",
+ "hsl": "hsl(188.7,94.5%,42.7%)",
+ "rgb": "rgb(6,182,212)",
+ "scale": 500,
+ "rgbChannel": "6 182 212",
+ "hslChannel": "188.7 94.5% 42.7%"
+ },
+ {
+ "hex": "#0891b2",
+ "hsl": "hsl(191.6,91.4%,36.5%)",
+ "rgb": "rgb(8,145,178)",
+ "scale": 600,
+ "rgbChannel": "8 145 178",
+ "hslChannel": "191.6 91.4% 36.5%"
+ },
+ {
+ "hex": "#0e7490",
+ "hsl": "hsl(192.9,82.3%,31%)",
+ "rgb": "rgb(14,116,144)",
+ "scale": 700,
+ "rgbChannel": "14 116 144",
+ "hslChannel": "192.9 82.3% 31%"
+ },
+ {
+ "hex": "#155e75",
+ "hsl": "hsl(194.4,69.6%,27.1%)",
+ "rgb": "rgb(21,94,117)",
+ "scale": 800,
+ "rgbChannel": "21 94 117",
+ "hslChannel": "194.4 69.6% 27.1%"
+ },
+ {
+ "hex": "#164e63",
+ "hsl": "hsl(196.4,63.6%,23.7%)",
+ "rgb": "rgb(22,78,99)",
+ "scale": 900,
+ "rgbChannel": "22 78 99",
+ "hslChannel": "196.4 63.6% 23.7%"
+ },
+ {
+ "hex": "#083344",
+ "hsl": "hsl(197,78.9%,14.9%)",
+ "rgb": "rgb(8,51,68)",
+ "scale": 950,
+ "rgbChannel": "8 51 68",
+ "hslChannel": "197 78.9% 14.9%"
+ }
+ ],
+ "emerald": [
+ {
+ "hex": "#ecfdf5",
+ "hsl": "hsl(151.8,81%,95.9%)",
+ "rgb": "rgb(236,253,245)",
+ "scale": 50,
+ "rgbChannel": "236 253 245",
+ "hslChannel": "151.8 81% 95.9%"
+ },
+ {
+ "hex": "#d1fae5",
+ "hsl": "hsl(149.3,80.4%,90%)",
+ "rgb": "rgb(209,250,229)",
+ "scale": 100,
+ "rgbChannel": "209 250 229",
+ "hslChannel": "149.3 80.4% 90%"
+ },
+ {
+ "hex": "#a7f3d0",
+ "hsl": "hsl(152.4,76%,80.4%)",
+ "rgb": "rgb(167,243,208)",
+ "scale": 200,
+ "rgbChannel": "167 243 208",
+ "hslChannel": "152.4 76% 80.4%"
+ },
+ {
+ "hex": "#6ee7b7",
+ "hsl": "hsl(156.2,71.6%,66.9%)",
+ "rgb": "rgb(110,231,183)",
+ "scale": 300,
+ "rgbChannel": "110 231 183",
+ "hslChannel": "156.2 71.6% 66.9%"
+ },
+ {
+ "hex": "#34d399",
+ "hsl": "hsl(158.1,64.4%,51.6%)",
+ "rgb": "rgb(52,211,153)",
+ "scale": 400,
+ "rgbChannel": "52 211 153",
+ "hslChannel": "158.1 64.4% 51.6%"
+ },
+ {
+ "hex": "#10b981",
+ "hsl": "hsl(160.1,84.1%,39.4%)",
+ "rgb": "rgb(16,185,129)",
+ "scale": 500,
+ "rgbChannel": "16 185 129",
+ "hslChannel": "160.1 84.1% 39.4%"
+ },
+ {
+ "hex": "#059669",
+ "hsl": "hsl(161.4,93.5%,30.4%)",
+ "rgb": "rgb(5,150,105)",
+ "scale": 600,
+ "rgbChannel": "5 150 105",
+ "hslChannel": "161.4 93.5% 30.4%"
+ },
+ {
+ "hex": "#047857",
+ "hsl": "hsl(162.9,93.5%,24.3%)",
+ "rgb": "rgb(4,120,87)",
+ "scale": 700,
+ "rgbChannel": "4 120 87",
+ "hslChannel": "162.9 93.5% 24.3%"
+ },
+ {
+ "hex": "#065f46",
+ "hsl": "hsl(163.1,88.1%,19.8%)",
+ "rgb": "rgb(6,95,70)",
+ "scale": 800,
+ "rgbChannel": "6 95 70",
+ "hslChannel": "163.1 88.1% 19.8%"
+ },
+ {
+ "hex": "#064e3b",
+ "hsl": "hsl(164.2,85.7%,16.5%)",
+ "rgb": "rgb(6,78,59)",
+ "scale": 900,
+ "rgbChannel": "6 78 59",
+ "hslChannel": "164.2 85.7% 16.5%"
+ },
+ {
+ "hex": "#022c22",
+ "hsl": "hsl(165.7,91.3%,9%)",
+ "rgb": "rgb(2,44,34)",
+ "scale": 950,
+ "rgbChannel": "2 44 34",
+ "hslChannel": "165.7 91.3% 9%"
+ }
+ ],
+ "fuchsia": [
+ {
+ "hex": "#fdf4ff",
+ "hsl": "hsl(289.1,100%,97.8%)",
+ "rgb": "rgb(253,244,255)",
+ "scale": 50,
+ "rgbChannel": "253 244 255",
+ "hslChannel": "289.1 100% 97.8%"
+ },
+ {
+ "hex": "#fae8ff",
+ "hsl": "hsl(287,100%,95.5%)",
+ "rgb": "rgb(250,232,255)",
+ "scale": 100,
+ "rgbChannel": "250 232 255",
+ "hslChannel": "287 100% 95.5%"
+ },
+ {
+ "hex": "#f5d0fe",
+ "hsl": "hsl(288.3,95.8%,90.6%)",
+ "rgb": "rgb(245,208,254)",
+ "scale": 200,
+ "rgbChannel": "245 208 254",
+ "hslChannel": "288.3 95.8% 90.6%"
+ },
+ {
+ "hex": "#f0abfc",
+ "hsl": "hsl(291.1,93.1%,82.9%)",
+ "rgb": "rgb(240,171,252)",
+ "scale": 300,
+ "rgbChannel": "240 171 252",
+ "hslChannel": "291.1 93.1% 82.9%"
+ },
+ {
+ "hex": "#e879f9",
+ "hsl": "hsl(292,91.4%,72.5%)",
+ "rgb": "rgb(232,121,249)",
+ "scale": 400,
+ "rgbChannel": "232 121 249",
+ "hslChannel": "292 91.4% 72.5%"
+ },
+ {
+ "hex": "#d946ef",
+ "hsl": "hsl(292.2,84.1%,60.6%)",
+ "rgb": "rgb(217,70,239)",
+ "scale": 500,
+ "rgbChannel": "217 70 239",
+ "hslChannel": "292.2 84.1% 60.6%"
+ },
+ {
+ "hex": "#c026d3",
+ "hsl": "hsl(293.4,69.5%,48.8%)",
+ "rgb": "rgb(192,38,211)",
+ "scale": 600,
+ "rgbChannel": "192 38 211",
+ "hslChannel": "293.4 69.5% 48.8%"
+ },
+ {
+ "hex": "#a21caf",
+ "hsl": "hsl(294.7,72.4%,39.8%)",
+ "rgb": "rgb(162,28,175)",
+ "scale": 700,
+ "rgbChannel": "162 28 175",
+ "hslChannel": "294.7 72.4% 39.8%"
+ },
+ {
+ "hex": "#86198f",
+ "hsl": "hsl(295.4,70.2%,32.9%)",
+ "rgb": "rgb(134,25,143)",
+ "scale": 800,
+ "rgbChannel": "134 25 143",
+ "hslChannel": "295.4 70.2% 32.9%"
+ },
+ {
+ "hex": "#701a75",
+ "hsl": "hsl(296.7,63.6%,28%)",
+ "rgb": "rgb(112,26,117)",
+ "scale": 900,
+ "rgbChannel": "112 26 117",
+ "hslChannel": "296.7 63.6% 28%"
+ },
+ {
+ "hex": "#4a044e",
+ "hsl": "hsl(296.8,90.2%,16.1%)",
+ "rgb": "rgb(74,4,78)",
+ "scale": 950,
+ "rgbChannel": "74 4 78",
+ "hslChannel": "296.8 90.2% 16.1%"
+ }
+ ],
+ "gray": [
+ {
+ "hex": "#f9fafb",
+ "hsl": "hsl(210,20%,98%)",
+ "rgb": "rgb(249,250,251)",
+ "scale": 50,
+ "rgbChannel": "249 250 251",
+ "hslChannel": "210 20% 98%"
+ },
+ {
+ "hex": "#f3f4f6",
+ "hsl": "hsl(220,14.3%,95.9%)",
+ "rgb": "rgb(243,244,246)",
+ "scale": 100,
+ "rgbChannel": "243 244 246",
+ "hslChannel": "220 14.3% 95.9%"
+ },
+ {
+ "hex": "#e5e7eb",
+ "hsl": "hsl(220,13%,91%)",
+ "rgb": "rgb(229,231,235)",
+ "scale": 200,
+ "rgbChannel": "229 231 235",
+ "hslChannel": "220 13% 91%"
+ },
+ {
+ "hex": "#d1d5db",
+ "hsl": "hsl(216,12.2%,83.9%)",
+ "rgb": "rgb(209,213,219)",
+ "scale": 300,
+ "rgbChannel": "209 213 219",
+ "hslChannel": "216 12.2% 83.9%"
+ },
+ {
+ "hex": "#9ca3af",
+ "hsl": "hsl(217.9,10.6%,64.9%)",
+ "rgb": "rgb(156,163,175)",
+ "scale": 400,
+ "rgbChannel": "156 163 175",
+ "hslChannel": "217.9 10.6% 64.9%"
+ },
+ {
+ "hex": "#6b7280",
+ "hsl": "hsl(220,8.9%,46.1%)",
+ "rgb": "rgb(107,114,128)",
+ "scale": 500,
+ "rgbChannel": "107 114 128",
+ "hslChannel": "220 8.9% 46.1%"
+ },
+ {
+ "hex": "#4b5563",
+ "hsl": "hsl(215,13.8%,34.1%)",
+ "rgb": "rgb(75,85,99)",
+ "scale": 600,
+ "rgbChannel": "75 85 99",
+ "hslChannel": "215 13.8% 34.1%"
+ },
+ {
+ "hex": "#374151",
+ "hsl": "hsl(216.9,19.1%,26.7%)",
+ "rgb": "rgb(55,65,81)",
+ "scale": 700,
+ "rgbChannel": "55 65 81",
+ "hslChannel": "216.9 19.1% 26.7%"
+ },
+ {
+ "hex": "#1f2937",
+ "hsl": "hsl(215,27.9%,16.9%)",
+ "rgb": "rgb(31,41,55)",
+ "scale": 800,
+ "rgbChannel": "31 41 55",
+ "hslChannel": "215 27.9% 16.9%"
+ },
+ {
+ "hex": "#111827",
+ "hsl": "hsl(220.9,39.3%,11%)",
+ "rgb": "rgb(17,24,39)",
+ "scale": 900,
+ "rgbChannel": "17 24 39",
+ "hslChannel": "220.9 39.3% 11%"
+ },
+ {
+ "hex": "#030712",
+ "hsl": "hsl(224,71.4%,4.1%)",
+ "rgb": "rgb(3,7,18)",
+ "scale": 950,
+ "rgbChannel": "3 7 18",
+ "hslChannel": "224 71.4% 4.1%"
+ }
+ ],
+ "green": [
+ {
+ "hex": "#f0fdf4",
+ "hsl": "hsl(138.5,76.5%,96.7%)",
+ "rgb": "rgb(240,253,244)",
+ "scale": 50,
+ "rgbChannel": "240 253 244",
+ "hslChannel": "138.5 76.5% 96.7%"
+ },
+ {
+ "hex": "#dcfce7",
+ "hsl": "hsl(140.6,84.2%,92.5%)",
+ "rgb": "rgb(220,252,231)",
+ "scale": 100,
+ "rgbChannel": "220 252 231",
+ "hslChannel": "140.6 84.2% 92.5%"
+ },
+ {
+ "hex": "#bbf7d0",
+ "hsl": "hsl(141,78.9%,85.1%)",
+ "rgb": "rgb(187,247,208)",
+ "scale": 200,
+ "rgbChannel": "187 247 208",
+ "hslChannel": "141 78.9% 85.1%"
+ },
+ {
+ "hex": "#86efac",
+ "hsl": "hsl(141.7,76.6%,73.1%)",
+ "rgb": "rgb(134,239,172)",
+ "scale": 300,
+ "rgbChannel": "134 239 172",
+ "hslChannel": "141.7 76.6% 73.1%"
+ },
+ {
+ "hex": "#4ade80",
+ "hsl": "hsl(141.9,69.2%,58%)",
+ "rgb": "rgb(74,222,128)",
+ "scale": 400,
+ "rgbChannel": "74 222 128",
+ "hslChannel": "141.9 69.2% 58%"
+ },
+ {
+ "hex": "#22c55e",
+ "hsl": "hsl(142.1,70.6%,45.3%)",
+ "rgb": "rgb(34,197,94)",
+ "scale": 500,
+ "rgbChannel": "34 197 94",
+ "hslChannel": "142.1 70.6% 45.3%"
+ },
+ {
+ "hex": "#16a34a",
+ "hsl": "hsl(142.1,76.2%,36.3%)",
+ "rgb": "rgb(22,163,74)",
+ "scale": 600,
+ "rgbChannel": "22 163 74",
+ "hslChannel": "142.1 76.2% 36.3%"
+ },
+ {
+ "hex": "#15803d",
+ "hsl": "hsl(142.4,71.8%,29.2%)",
+ "rgb": "rgb(21,128,61)",
+ "scale": 700,
+ "rgbChannel": "21 128 61",
+ "hslChannel": "142.4 71.8% 29.2%"
+ },
+ {
+ "hex": "#166534",
+ "hsl": "hsl(142.8,64.2%,24.1%)",
+ "rgb": "rgb(22,101,52)",
+ "scale": 800,
+ "rgbChannel": "22 101 52",
+ "hslChannel": "142.8 64.2% 24.1%"
+ },
+ {
+ "hex": "#14532d",
+ "hsl": "hsl(143.8,61.2%,20.2%)",
+ "rgb": "rgb(20,83,45)",
+ "scale": 900,
+ "rgbChannel": "20 83 45",
+ "hslChannel": "143.8 61.2% 20.2%"
+ },
+ {
+ "hex": "#052e16",
+ "hsl": "hsl(144.9,80.4%,10%)",
+ "rgb": "rgb(5,46,22)",
+ "scale": 950,
+ "rgbChannel": "5 46 22",
+ "hslChannel": "144.9 80.4% 10%"
+ }
+ ],
+ "indigo": [
+ {
+ "hex": "#eef2ff",
+ "hsl": "hsl(225.9,100%,96.7%)",
+ "rgb": "rgb(238,242,255)",
+ "scale": 50,
+ "rgbChannel": "238 242 255",
+ "hslChannel": "225.9 100% 96.7%"
+ },
+ {
+ "hex": "#e0e7ff",
+ "hsl": "hsl(226.5,100%,93.9%)",
+ "rgb": "rgb(224,231,255)",
+ "scale": 100,
+ "rgbChannel": "224 231 255",
+ "hslChannel": "226.5 100% 93.9%"
+ },
+ {
+ "hex": "#c7d2fe",
+ "hsl": "hsl(228,96.5%,88.8%)",
+ "rgb": "rgb(199,210,254)",
+ "scale": 200,
+ "rgbChannel": "199 210 254",
+ "hslChannel": "228 96.5% 88.8%"
+ },
+ {
+ "hex": "#a5b4fc",
+ "hsl": "hsl(229.7,93.5%,81.8%)",
+ "rgb": "rgb(165,180,252)",
+ "scale": 300,
+ "rgbChannel": "165 180 252",
+ "hslChannel": "229.7 93.5% 81.8%"
+ },
+ {
+ "hex": "#818cf8",
+ "hsl": "hsl(234.5,89.5%,73.9%)",
+ "rgb": "rgb(129,140,248)",
+ "scale": 400,
+ "rgbChannel": "129 140 248",
+ "hslChannel": "234.5 89.5% 73.9%"
+ },
+ {
+ "hex": "#6366f1",
+ "hsl": "hsl(238.7,83.5%,66.7%)",
+ "rgb": "rgb(99,102,241)",
+ "scale": 500,
+ "rgbChannel": "99 102 241",
+ "hslChannel": "238.7 83.5% 66.7%"
+ },
+ {
+ "hex": "#4f46e5",
+ "hsl": "hsl(243.4,75.4%,58.6%)",
+ "rgb": "rgb(79,70,229)",
+ "scale": 600,
+ "rgbChannel": "79 70 229",
+ "hslChannel": "243.4 75.4% 58.6%"
+ },
+ {
+ "hex": "#4338ca",
+ "hsl": "hsl(244.5,57.9%,50.6%)",
+ "rgb": "rgb(67,56,202)",
+ "scale": 700,
+ "rgbChannel": "67 56 202",
+ "hslChannel": "244.5 57.9% 50.6%"
+ },
+ {
+ "hex": "#3730a3",
+ "hsl": "hsl(243.7,54.5%,41.4%)",
+ "rgb": "rgb(55,48,163)",
+ "scale": 800,
+ "rgbChannel": "55 48 163",
+ "hslChannel": "243.7 54.5% 41.4%"
+ },
+ {
+ "hex": "#312e81",
+ "hsl": "hsl(242.2,47.4%,34.3%)",
+ "rgb": "rgb(49,46,129)",
+ "scale": 900,
+ "rgbChannel": "49 46 129",
+ "hslChannel": "242.2 47.4% 34.3%"
+ },
+ {
+ "hex": "#1e1b4b",
+ "hsl": "hsl(243.8,47.1%,20%)",
+ "rgb": "rgb(30,27,75)",
+ "scale": 950,
+ "rgbChannel": "30 27 75",
+ "hslChannel": "243.8 47.1% 20%"
+ }
+ ],
+ "inherit": "inherit",
+ "lime": [
+ {
+ "hex": "#f7fee7",
+ "hsl": "hsl(78.3,92%,95.1%)",
+ "rgb": "rgb(247,254,231)",
+ "scale": 50,
+ "rgbChannel": "247 254 231",
+ "hslChannel": "78.3 92% 95.1%"
+ },
+ {
+ "hex": "#ecfccb",
+ "hsl": "hsl(79.6,89.1%,89.2%)",
+ "rgb": "rgb(236,252,203)",
+ "scale": 100,
+ "rgbChannel": "236 252 203",
+ "hslChannel": "79.6 89.1% 89.2%"
+ },
+ {
+ "hex": "#d9f99d",
+ "hsl": "hsl(80.9,88.5%,79.6%)",
+ "rgb": "rgb(217,249,157)",
+ "scale": 200,
+ "rgbChannel": "217 249 157",
+ "hslChannel": "80.9 88.5% 79.6%"
+ },
+ {
+ "hex": "#bef264",
+ "hsl": "hsl(82,84.5%,67.1%)",
+ "rgb": "rgb(190,242,100)",
+ "scale": 300,
+ "rgbChannel": "190 242 100",
+ "hslChannel": "82 84.5% 67.1%"
+ },
+ {
+ "hex": "#a3e635",
+ "hsl": "hsl(82.7,78%,55.5%)",
+ "rgb": "rgb(163,230,53)",
+ "scale": 400,
+ "rgbChannel": "163 230 53",
+ "hslChannel": "82.7 78% 55.5%"
+ },
+ {
+ "hex": "#84cc16",
+ "hsl": "hsl(83.7,80.5%,44.3%)",
+ "rgb": "rgb(132,204,22)",
+ "scale": 500,
+ "rgbChannel": "132 204 22",
+ "hslChannel": "83.7 80.5% 44.3%"
+ },
+ {
+ "hex": "#65a30d",
+ "hsl": "hsl(84.8,85.2%,34.5%)",
+ "rgb": "rgb(101,163,13)",
+ "scale": 600,
+ "rgbChannel": "101 163 13",
+ "hslChannel": "84.8 85.2% 34.5%"
+ },
+ {
+ "hex": "#4d7c0f",
+ "hsl": "hsl(85.9,78.4%,27.3%)",
+ "rgb": "rgb(77,124,15)",
+ "scale": 700,
+ "rgbChannel": "77 124 15",
+ "hslChannel": "85.9 78.4% 27.3%"
+ },
+ {
+ "hex": "#3f6212",
+ "hsl": "hsl(86.3,69%,22.7%)",
+ "rgb": "rgb(63,98,18)",
+ "scale": 800,
+ "rgbChannel": "63 98 18",
+ "hslChannel": "86.3 69% 22.7%"
+ },
+ {
+ "hex": "#365314",
+ "hsl": "hsl(87.6,61.2%,20.2%)",
+ "rgb": "rgb(54,83,20)",
+ "scale": 900,
+ "rgbChannel": "54 83 20",
+ "hslChannel": "87.6 61.2% 20.2%"
+ },
+ {
+ "hex": "#1a2e05",
+ "hsl": "hsl(89.3,80.4%,10%)",
+ "rgb": "rgb(26,46,5)",
+ "scale": 950,
+ "rgbChannel": "26 46 5",
+ "hslChannel": "89.3 80.4% 10%"
+ }
+ ],
+ "neutral": [
+ {
+ "hex": "#fafafa",
+ "hsl": "hsl(0,0%,98%)",
+ "rgb": "rgb(250,250,250)",
+ "scale": 50,
+ "rgbChannel": "250 250 250",
+ "hslChannel": "0 0% 98%"
+ },
+ {
+ "hex": "#f5f5f5",
+ "hsl": "hsl(0,0%,96.1%)",
+ "rgb": "rgb(245,245,245)",
+ "scale": 100,
+ "rgbChannel": "245 245 245",
+ "hslChannel": "0 0% 96.1%"
+ },
+ {
+ "hex": "#e5e5e5",
+ "hsl": "hsl(0,0%,89.8%)",
+ "rgb": "rgb(229,229,229)",
+ "scale": 200,
+ "rgbChannel": "229 229 229",
+ "hslChannel": "0 0% 89.8%"
+ },
+ {
+ "hex": "#d4d4d4",
+ "hsl": "hsl(0,0%,83.1%)",
+ "rgb": "rgb(212,212,212)",
+ "scale": 300,
+ "rgbChannel": "212 212 212",
+ "hslChannel": "0 0% 83.1%"
+ },
+ {
+ "hex": "#a3a3a3",
+ "hsl": "hsl(0,0%,63.9%)",
+ "rgb": "rgb(163,163,163)",
+ "scale": 400,
+ "rgbChannel": "163 163 163",
+ "hslChannel": "0 0% 63.9%"
+ },
+ {
+ "hex": "#737373",
+ "hsl": "hsl(0,0%,45.1%)",
+ "rgb": "rgb(115,115,115)",
+ "scale": 500,
+ "rgbChannel": "115 115 115",
+ "hslChannel": "0 0% 45.1%"
+ },
+ {
+ "hex": "#525252",
+ "hsl": "hsl(0,0%,32.2%)",
+ "rgb": "rgb(82,82,82)",
+ "scale": 600,
+ "rgbChannel": "82 82 82",
+ "hslChannel": "0 0% 32.2%"
+ },
+ {
+ "hex": "#404040",
+ "hsl": "hsl(0,0%,25.1%)",
+ "rgb": "rgb(64,64,64)",
+ "scale": 700,
+ "rgbChannel": "64 64 64",
+ "hslChannel": "0 0% 25.1%"
+ },
+ {
+ "hex": "#262626",
+ "hsl": "hsl(0,0%,14.9%)",
+ "rgb": "rgb(38,38,38)",
+ "scale": 800,
+ "rgbChannel": "38 38 38",
+ "hslChannel": "0 0% 14.9%"
+ },
+ {
+ "hex": "#171717",
+ "hsl": "hsl(0,0%,9%)",
+ "rgb": "rgb(23,23,23)",
+ "scale": 900,
+ "rgbChannel": "23 23 23",
+ "hslChannel": "0 0% 9%"
+ },
+ {
+ "hex": "#0a0a0a",
+ "hsl": "hsl(0,0%,3.9%)",
+ "rgb": "rgb(10,10,10)",
+ "scale": 950,
+ "rgbChannel": "10 10 10",
+ "hslChannel": "0 0% 3.9%"
+ }
+ ],
+ "orange": [
+ {
+ "hex": "#fff7ed",
+ "hsl": "hsl(33.3,100%,96.5%)",
+ "rgb": "rgb(255,247,237)",
+ "scale": 50,
+ "rgbChannel": "255 247 237",
+ "hslChannel": "33.3 100% 96.5%"
+ },
+ {
+ "hex": "#ffedd5",
+ "hsl": "hsl(34.3,100%,91.8%)",
+ "rgb": "rgb(255,237,213)",
+ "scale": 100,
+ "rgbChannel": "255 237 213",
+ "hslChannel": "34.3 100% 91.8%"
+ },
+ {
+ "hex": "#fed7aa",
+ "hsl": "hsl(32.1,97.7%,83.1%)",
+ "rgb": "rgb(254,215,170)",
+ "scale": 200,
+ "rgbChannel": "254 215 170",
+ "hslChannel": "32.1 97.7% 83.1%"
+ },
+ {
+ "hex": "#fdba74",
+ "hsl": "hsl(30.7,97.2%,72.4%)",
+ "rgb": "rgb(253,186,116)",
+ "scale": 300,
+ "rgbChannel": "253 186 116",
+ "hslChannel": "30.7 97.2% 72.4%"
+ },
+ {
+ "hex": "#fb923c",
+ "hsl": "hsl(27,96%,61%)",
+ "rgb": "rgb(251,146,60)",
+ "scale": 400,
+ "rgbChannel": "251 146 60",
+ "hslChannel": "27 96% 61%"
+ },
+ {
+ "hex": "#f97316",
+ "hsl": "hsl(24.6,95%,53.1%)",
+ "rgb": "rgb(249,115,22)",
+ "scale": 500,
+ "rgbChannel": "249 115 22",
+ "hslChannel": "24.6 95% 53.1%"
+ },
+ {
+ "hex": "#ea580c",
+ "hsl": "hsl(20.5,90.2%,48.2%)",
+ "rgb": "rgb(234,88,12)",
+ "scale": 600,
+ "rgbChannel": "234 88 12",
+ "hslChannel": "20.5 90.2% 48.2%"
+ },
+ {
+ "hex": "#c2410c",
+ "hsl": "hsl(17.5,88.3%,40.4%)",
+ "rgb": "rgb(194,65,12)",
+ "scale": 700,
+ "rgbChannel": "194 65 12",
+ "hslChannel": "17.5 88.3% 40.4%"
+ },
+ {
+ "hex": "#9a3412",
+ "hsl": "hsl(15,79.1%,33.7%)",
+ "rgb": "rgb(154,52,18)",
+ "scale": 800,
+ "rgbChannel": "154 52 18",
+ "hslChannel": "15 79.1% 33.7%"
+ },
+ {
+ "hex": "#7c2d12",
+ "hsl": "hsl(15.3,74.6%,27.8%)",
+ "rgb": "rgb(124,45,18)",
+ "scale": 900,
+ "rgbChannel": "124 45 18",
+ "hslChannel": "15.3 74.6% 27.8%"
+ },
+ {
+ "hex": "#431407",
+ "hsl": "hsl(13,81.1%,14.5%)",
+ "rgb": "rgb(67,20,7)",
+ "scale": 950,
+ "rgbChannel": "67 20 7",
+ "hslChannel": "13 81.1% 14.5%"
+ }
+ ],
+ "pink": [
+ {
+ "hex": "#fdf2f8",
+ "hsl": "hsl(327.3,73.3%,97.1%)",
+ "rgb": "rgb(253,242,248)",
+ "scale": 50,
+ "rgbChannel": "253 242 248",
+ "hslChannel": "327.3 73.3% 97.1%"
+ },
+ {
+ "hex": "#fce7f3",
+ "hsl": "hsl(325.7,77.8%,94.7%)",
+ "rgb": "rgb(252,231,243)",
+ "scale": 100,
+ "rgbChannel": "252 231 243",
+ "hslChannel": "325.7 77.8% 94.7%"
+ },
+ {
+ "hex": "#fbcfe8",
+ "hsl": "hsl(325.9,84.6%,89.8%)",
+ "rgb": "rgb(251,207,232)",
+ "scale": 200,
+ "rgbChannel": "251 207 232",
+ "hslChannel": "325.9 84.6% 89.8%"
+ },
+ {
+ "hex": "#f9a8d4",
+ "hsl": "hsl(327.4,87.1%,81.8%)",
+ "rgb": "rgb(249,168,212)",
+ "scale": 300,
+ "rgbChannel": "249 168 212",
+ "hslChannel": "327.4 87.1% 81.8%"
+ },
+ {
+ "hex": "#f472b6",
+ "hsl": "hsl(328.6,85.5%,70.2%)",
+ "rgb": "rgb(244,114,182)",
+ "scale": 400,
+ "rgbChannel": "244 114 182",
+ "hslChannel": "328.6 85.5% 70.2%"
+ },
+ {
+ "hex": "#ec4899",
+ "hsl": "hsl(330.4,81.2%,60.4%)",
+ "rgb": "rgb(236,72,153)",
+ "scale": 500,
+ "rgbChannel": "236 72 153",
+ "hslChannel": "330.4 81.2% 60.4%"
+ },
+ {
+ "hex": "#db2777",
+ "hsl": "hsl(333.3,71.4%,50.6%)",
+ "rgb": "rgb(219,39,119)",
+ "scale": 600,
+ "rgbChannel": "219 39 119",
+ "hslChannel": "333.3 71.4% 50.6%"
+ },
+ {
+ "hex": "#be185d",
+ "hsl": "hsl(335.1,77.6%,42%)",
+ "rgb": "rgb(190,24,93)",
+ "scale": 700,
+ "rgbChannel": "190 24 93",
+ "hslChannel": "335.1 77.6% 42%"
+ },
+ {
+ "hex": "#9d174d",
+ "hsl": "hsl(335.8,74.4%,35.3%)",
+ "rgb": "rgb(157,23,77)",
+ "scale": 800,
+ "rgbChannel": "157 23 77",
+ "hslChannel": "335.8 74.4% 35.3%"
+ },
+ {
+ "hex": "#831843",
+ "hsl": "hsl(335.9,69%,30.4%)",
+ "rgb": "rgb(131,24,67)",
+ "scale": 900,
+ "rgbChannel": "131 24 67",
+ "hslChannel": "335.9 69% 30.4%"
+ },
+ {
+ "hex": "#500724",
+ "hsl": "hsl(336.2,83.9%,17.1%)",
+ "rgb": "rgb(80,7,36)",
+ "scale": 950,
+ "rgbChannel": "80 7 36",
+ "hslChannel": "336.2 83.9% 17.1%"
+ }
+ ],
+ "purple": [
+ {
+ "hex": "#faf5ff",
+ "hsl": "hsl(270,100%,98%)",
+ "rgb": "rgb(250,245,255)",
+ "scale": 50,
+ "rgbChannel": "250 245 255",
+ "hslChannel": "270 100% 98%"
+ },
+ {
+ "hex": "#f3e8ff",
+ "hsl": "hsl(268.7,100%,95.5%)",
+ "rgb": "rgb(243,232,255)",
+ "scale": 100,
+ "rgbChannel": "243 232 255",
+ "hslChannel": "268.7 100% 95.5%"
+ },
+ {
+ "hex": "#e9d5ff",
+ "hsl": "hsl(268.6,100%,91.8%)",
+ "rgb": "rgb(233,213,255)",
+ "scale": 200,
+ "rgbChannel": "233 213 255",
+ "hslChannel": "268.6 100% 91.8%"
+ },
+ {
+ "hex": "#d8b4fe",
+ "hsl": "hsl(269.2,97.4%,85.1%)",
+ "rgb": "rgb(216,180,254)",
+ "scale": 300,
+ "rgbChannel": "216 180 254",
+ "hslChannel": "269.2 97.4% 85.1%"
+ },
+ {
+ "hex": "#c084fc",
+ "hsl": "hsl(270,95.2%,75.3%)",
+ "rgb": "rgb(192,132,252)",
+ "scale": 400,
+ "rgbChannel": "192 132 252",
+ "hslChannel": "270 95.2% 75.3%"
+ },
+ {
+ "hex": "#a855f7",
+ "hsl": "hsl(270.7,91%,65.1%)",
+ "rgb": "rgb(168,85,247)",
+ "scale": 500,
+ "rgbChannel": "168 85 247",
+ "hslChannel": "270.7 91% 65.1%"
+ },
+ {
+ "hex": "#9333ea",
+ "hsl": "hsl(271.5,81.3%,55.9%)",
+ "rgb": "rgb(147,51,234)",
+ "scale": 600,
+ "rgbChannel": "147 51 234",
+ "hslChannel": "271.5 81.3% 55.9%"
+ },
+ {
+ "hex": "#7e22ce",
+ "hsl": "hsl(272.1,71.7%,47.1%)",
+ "rgb": "rgb(126,34,206)",
+ "scale": 700,
+ "rgbChannel": "126 34 206",
+ "hslChannel": "272.1 71.7% 47.1%"
+ },
+ {
+ "hex": "#6b21a8",
+ "hsl": "hsl(272.9,67.2%,39.4%)",
+ "rgb": "rgb(107,33,168)",
+ "scale": 800,
+ "rgbChannel": "107 33 168",
+ "hslChannel": "272.9 67.2% 39.4%"
+ },
+ {
+ "hex": "#581c87",
+ "hsl": "hsl(273.6,65.6%,32%)",
+ "rgb": "rgb(88,28,135)",
+ "scale": 900,
+ "rgbChannel": "88 28 135",
+ "hslChannel": "273.6 65.6% 32%"
+ },
+ {
+ "hex": "#3b0764",
+ "hsl": "hsl(273.5,86.9%,21%)",
+ "rgb": "rgb(59,7,100)",
+ "scale": 950,
+ "rgbChannel": "59 7 100",
+ "hslChannel": "273.5 86.9% 21%"
+ }
+ ],
+ "red": [
+ {
+ "hex": "#fef2f2",
+ "hsl": "hsl(0,85.7%,97.3%)",
+ "rgb": "rgb(254,242,242)",
+ "scale": 50,
+ "rgbChannel": "254 242 242",
+ "hslChannel": "0 85.7% 97.3%"
+ },
+ {
+ "hex": "#fee2e2",
+ "hsl": "hsl(0,93.3%,94.1%)",
+ "rgb": "rgb(254,226,226)",
+ "scale": 100,
+ "rgbChannel": "254 226 226",
+ "hslChannel": "0 93.3% 94.1%"
+ },
+ {
+ "hex": "#fecaca",
+ "hsl": "hsl(0,96.3%,89.4%)",
+ "rgb": "rgb(254,202,202)",
+ "scale": 200,
+ "rgbChannel": "254 202 202",
+ "hslChannel": "0 96.3% 89.4%"
+ },
+ {
+ "hex": "#fca5a5",
+ "hsl": "hsl(0,93.5%,81.8%)",
+ "rgb": "rgb(252,165,165)",
+ "scale": 300,
+ "rgbChannel": "252 165 165",
+ "hslChannel": "0 93.5% 81.8%"
+ },
+ {
+ "hex": "#f87171",
+ "hsl": "hsl(0,90.6%,70.8%)",
+ "rgb": "rgb(248,113,113)",
+ "scale": 400,
+ "rgbChannel": "248 113 113",
+ "hslChannel": "0 90.6% 70.8%"
+ },
+ {
+ "hex": "#ef4444",
+ "hsl": "hsl(0,84.2%,60.2%)",
+ "rgb": "rgb(239,68,68)",
+ "scale": 500,
+ "rgbChannel": "239 68 68",
+ "hslChannel": "0 84.2% 60.2%"
+ },
+ {
+ "hex": "#dc2626",
+ "hsl": "hsl(0,72.2%,50.6%)",
+ "rgb": "rgb(220,38,38)",
+ "scale": 600,
+ "rgbChannel": "220 38 38",
+ "hslChannel": "0 72.2% 50.6%"
+ },
+ {
+ "hex": "#b91c1c",
+ "hsl": "hsl(0,73.7%,41.8%)",
+ "rgb": "rgb(185,28,28)",
+ "scale": 700,
+ "rgbChannel": "185 28 28",
+ "hslChannel": "0 73.7% 41.8%"
+ },
+ {
+ "hex": "#991b1b",
+ "hsl": "hsl(0,70%,35.3%)",
+ "rgb": "rgb(153,27,27)",
+ "scale": 800,
+ "rgbChannel": "153 27 27",
+ "hslChannel": "0 70% 35.3%"
+ },
+ {
+ "hex": "#7f1d1d",
+ "hsl": "hsl(0,62.8%,30.6%)",
+ "rgb": "rgb(127,29,29)",
+ "scale": 900,
+ "rgbChannel": "127 29 29",
+ "hslChannel": "0 62.8% 30.6%"
+ },
+ {
+ "hex": "#450a0a",
+ "hsl": "hsl(0,74.7%,15.5%)",
+ "rgb": "rgb(69,10,10)",
+ "scale": 950,
+ "rgbChannel": "69 10 10",
+ "hslChannel": "0 74.7% 15.5%"
+ }
+ ],
+ "rose": [
+ {
+ "hex": "#fff1f2",
+ "hsl": "hsl(355.7,100%,97.3%)",
+ "rgb": "rgb(255,241,242)",
+ "scale": 50,
+ "rgbChannel": "255 241 242",
+ "hslChannel": "355.7 100% 97.3%"
+ },
+ {
+ "hex": "#ffe4e6",
+ "hsl": "hsl(355.6,100%,94.7%)",
+ "rgb": "rgb(255,228,230)",
+ "scale": 100,
+ "rgbChannel": "255 228 230",
+ "hslChannel": "355.6 100% 94.7%"
+ },
+ {
+ "hex": "#fecdd3",
+ "hsl": "hsl(352.7,96.1%,90%)",
+ "rgb": "rgb(254,205,211)",
+ "scale": 200,
+ "rgbChannel": "254 205 211",
+ "hslChannel": "352.7 96.1% 90%"
+ },
+ {
+ "hex": "#fda4af",
+ "hsl": "hsl(352.6,95.7%,81.8%)",
+ "rgb": "rgb(253,164,175)",
+ "scale": 300,
+ "rgbChannel": "253 164 175",
+ "hslChannel": "352.6 95.7% 81.8%"
+ },
+ {
+ "hex": "#fb7185",
+ "hsl": "hsl(351.3,94.5%,71.4%)",
+ "rgb": "rgb(251,113,133)",
+ "scale": 400,
+ "rgbChannel": "251 113 133",
+ "hslChannel": "351.3 94.5% 71.4%"
+ },
+ {
+ "hex": "#f43f5e",
+ "hsl": "hsl(349.7,89.2%,60.2%)",
+ "rgb": "rgb(244,63,94)",
+ "scale": 500,
+ "rgbChannel": "244 63 94",
+ "hslChannel": "349.7 89.2% 60.2%"
+ },
+ {
+ "hex": "#e11d48",
+ "hsl": "hsl(346.8,77.2%,49.8%)",
+ "rgb": "rgb(225,29,72)",
+ "scale": 600,
+ "rgbChannel": "225 29 72",
+ "hslChannel": "346.8 77.2% 49.8%"
+ },
+ {
+ "hex": "#be123c",
+ "hsl": "hsl(345.3,82.7%,40.8%)",
+ "rgb": "rgb(190,18,60)",
+ "scale": 700,
+ "rgbChannel": "190 18 60",
+ "hslChannel": "345.3 82.7% 40.8%"
+ },
+ {
+ "hex": "#9f1239",
+ "hsl": "hsl(343.4,79.7%,34.7%)",
+ "rgb": "rgb(159,18,57)",
+ "scale": 800,
+ "rgbChannel": "159 18 57",
+ "hslChannel": "343.4 79.7% 34.7%"
+ },
+ {
+ "hex": "#881337",
+ "hsl": "hsl(341.5,75.5%,30.4%)",
+ "rgb": "rgb(136,19,55)",
+ "scale": 900,
+ "rgbChannel": "136 19 55",
+ "hslChannel": "341.5 75.5% 30.4%"
+ },
+ {
+ "hex": "#4c0519",
+ "hsl": "hsl(343.1,87.7%,15.9%)",
+ "rgb": "rgb(76,5,25)",
+ "scale": 950,
+ "rgbChannel": "76 5 25",
+ "hslChannel": "343.1 87.7% 15.9%"
+ }
+ ],
+ "sky": [
+ {
+ "hex": "#f0f9ff",
+ "hsl": "hsl(204,100%,97.1%)",
+ "rgb": "rgb(240,249,255)",
+ "scale": 50,
+ "rgbChannel": "240 249 255",
+ "hslChannel": "204 100% 97.1%"
+ },
+ {
+ "hex": "#e0f2fe",
+ "hsl": "hsl(204,93.8%,93.7%)",
+ "rgb": "rgb(224,242,254)",
+ "scale": 100,
+ "rgbChannel": "224 242 254",
+ "hslChannel": "204 93.8% 93.7%"
+ },
+ {
+ "hex": "#bae6fd",
+ "hsl": "hsl(200.6,94.4%,86.1%)",
+ "rgb": "rgb(186,230,253)",
+ "scale": 200,
+ "rgbChannel": "186 230 253",
+ "hslChannel": "200.6 94.4% 86.1%"
+ },
+ {
+ "hex": "#7dd3fc",
+ "hsl": "hsl(199.4,95.5%,73.9%)",
+ "rgb": "rgb(125,211,252)",
+ "scale": 300,
+ "rgbChannel": "125 211 252",
+ "hslChannel": "199.4 95.5% 73.9%"
+ },
+ {
+ "hex": "#38bdf8",
+ "hsl": "hsl(198.4,93.2%,59.6%)",
+ "rgb": "rgb(56,189,248)",
+ "scale": 400,
+ "rgbChannel": "56 189 248",
+ "hslChannel": "198.4 93.2% 59.6%"
+ },
+ {
+ "hex": "#0ea5e9",
+ "hsl": "hsl(198.6,88.7%,48.4%)",
+ "rgb": "rgb(14,165,233)",
+ "scale": 500,
+ "rgbChannel": "14 165 233",
+ "hslChannel": "198.6 88.7% 48.4%"
+ },
+ {
+ "hex": "#0284c7",
+ "hsl": "hsl(200.4,98%,39.4%)",
+ "rgb": "rgb(2,132,199)",
+ "scale": 600,
+ "rgbChannel": "2 132 199",
+ "hslChannel": "200.4 98% 39.4%"
+ },
+ {
+ "hex": "#0369a1",
+ "hsl": "hsl(201.3,96.3%,32.2%)",
+ "rgb": "rgb(3,105,161)",
+ "scale": 700,
+ "rgbChannel": "3 105 161",
+ "hslChannel": "201.3 96.3% 32.2%"
+ },
+ {
+ "hex": "#075985",
+ "hsl": "hsl(201,90%,27.5%)",
+ "rgb": "rgb(7,89,133)",
+ "scale": 800,
+ "rgbChannel": "7 89 133",
+ "hslChannel": "201 90% 27.5%"
+ },
+ {
+ "hex": "#0c4a6e",
+ "hsl": "hsl(202,80.3%,23.9%)",
+ "rgb": "rgb(12,74,110)",
+ "scale": 900,
+ "rgbChannel": "12 74 110",
+ "hslChannel": "202 80.3% 23.9%"
+ },
+ {
+ "hex": "#082f49",
+ "hsl": "hsl(204,80.2%,15.9%)",
+ "rgb": "rgb(8,47,73)",
+ "scale": 950,
+ "rgbChannel": "8 47 73",
+ "hslChannel": "204 80.2% 15.9%"
+ }
+ ],
+ "slate": [
+ {
+ "hex": "#f8fafc",
+ "hsl": "hsl(210,40%,98%)",
+ "rgb": "rgb(248,250,252)",
+ "scale": 50,
+ "rgbChannel": "248 250 252",
+ "hslChannel": "210 40% 98%"
+ },
+ {
+ "hex": "#f1f5f9",
+ "hsl": "hsl(210,40%,96.1%)",
+ "rgb": "rgb(241,245,249)",
+ "scale": 100,
+ "rgbChannel": "241 245 249",
+ "hslChannel": "210 40% 96.1%"
+ },
+ {
+ "hex": "#e2e8f0",
+ "hsl": "hsl(214.3,31.8%,91.4%)",
+ "rgb": "rgb(226,232,240)",
+ "scale": 200,
+ "rgbChannel": "226 232 240",
+ "hslChannel": "214.3 31.8% 91.4%"
+ },
+ {
+ "hex": "#cbd5e1",
+ "hsl": "hsl(212.7,26.8%,83.9%)",
+ "rgb": "rgb(203,213,225)",
+ "scale": 300,
+ "rgbChannel": "203 213 225",
+ "hslChannel": "212.7 26.8% 83.9%"
+ },
+ {
+ "hex": "#94a3b8",
+ "hsl": "hsl(215,20.2%,65.1%)",
+ "rgb": "rgb(148,163,184)",
+ "scale": 400,
+ "rgbChannel": "148 163 184",
+ "hslChannel": "215 20.2% 65.1%"
+ },
+ {
+ "hex": "#64748b",
+ "hsl": "hsl(215.4,16.3%,46.9%)",
+ "rgb": "rgb(100,116,139)",
+ "scale": 500,
+ "rgbChannel": "100 116 139",
+ "hslChannel": "215.4 16.3% 46.9%"
+ },
+ {
+ "hex": "#475569",
+ "hsl": "hsl(215.3,19.3%,34.5%)",
+ "rgb": "rgb(71,85,105)",
+ "scale": 600,
+ "rgbChannel": "71 85 105",
+ "hslChannel": "215.3 19.3% 34.5%"
+ },
+ {
+ "hex": "#334155",
+ "hsl": "hsl(215.3,25%,26.7%)",
+ "rgb": "rgb(51,65,85)",
+ "scale": 700,
+ "rgbChannel": "51 65 85",
+ "hslChannel": "215.3 25% 26.7%"
+ },
+ {
+ "hex": "#1e293b",
+ "hsl": "hsl(217.2,32.6%,17.5%)",
+ "rgb": "rgb(30,41,59)",
+ "scale": 800,
+ "rgbChannel": "30 41 59",
+ "hslChannel": "217.2 32.6% 17.5%"
+ },
+ {
+ "hex": "#0f172a",
+ "hsl": "hsl(222.2,47.4%,11.2%)",
+ "rgb": "rgb(15,23,42)",
+ "scale": 900,
+ "rgbChannel": "15 23 42",
+ "hslChannel": "222.2 47.4% 11.2%"
+ },
+ {
+ "hex": "#020617",
+ "hsl": "hsl(222.2,84%,4.9%)",
+ "rgb": "rgb(2,6,23)",
+ "scale": 950,
+ "rgbChannel": "2 6 23",
+ "hslChannel": "222.2 84% 4.9%"
+ }
+ ],
+ "stone": [
+ {
+ "hex": "#fafaf9",
+ "hsl": "hsl(60,9.1%,97.8%)",
+ "rgb": "rgb(250,250,249)",
+ "scale": 50,
+ "rgbChannel": "250 250 249",
+ "hslChannel": "60 9.1% 97.8%"
+ },
+ {
+ "hex": "#f5f5f4",
+ "hsl": "hsl(60,4.8%,95.9%)",
+ "rgb": "rgb(245,245,244)",
+ "scale": 100,
+ "rgbChannel": "245 245 244",
+ "hslChannel": "60 4.8% 95.9%"
+ },
+ {
+ "hex": "#e7e5e4",
+ "hsl": "hsl(20,5.9%,90%)",
+ "rgb": "rgb(231,229,228)",
+ "scale": 200,
+ "rgbChannel": "231 229 228",
+ "hslChannel": "20 5.9% 90%"
+ },
+ {
+ "hex": "#d6d3d1",
+ "hsl": "hsl(24,5.7%,82.9%)",
+ "rgb": "rgb(214,211,209)",
+ "scale": 300,
+ "rgbChannel": "214 211 209",
+ "hslChannel": "24 5.7% 82.9%"
+ },
+ {
+ "hex": "#a8a29e",
+ "hsl": "hsl(24,5.4%,63.9%)",
+ "rgb": "rgb(168,162,158)",
+ "scale": 400,
+ "rgbChannel": "168 162 158",
+ "hslChannel": "24 5.4% 63.9%"
+ },
+ {
+ "hex": "#78716c",
+ "hsl": "hsl(25,5.3%,44.7%)",
+ "rgb": "rgb(120,113,108)",
+ "scale": 500,
+ "rgbChannel": "120 113 108",
+ "hslChannel": "25 5.3% 44.7%"
+ },
+ {
+ "hex": "#57534e",
+ "hsl": "hsl(33.3,5.5%,32.4%)",
+ "rgb": "rgb(87,83,78)",
+ "scale": 600,
+ "rgbChannel": "87 83 78",
+ "hslChannel": "33.3 5.5% 32.4%"
+ },
+ {
+ "hex": "#44403c",
+ "hsl": "hsl(30,6.3%,25.1%)",
+ "rgb": "rgb(68,64,60)",
+ "scale": 700,
+ "rgbChannel": "68 64 60",
+ "hslChannel": "30 6.3% 25.1%"
+ },
+ {
+ "hex": "#292524",
+ "hsl": "hsl(12,6.5%,15.1%)",
+ "rgb": "rgb(41,37,36)",
+ "scale": 800,
+ "rgbChannel": "41 37 36",
+ "hslChannel": "12 6.5% 15.1%"
+ },
+ {
+ "hex": "#1c1917",
+ "hsl": "hsl(24,9.8%,10%)",
+ "rgb": "rgb(28,25,23)",
+ "scale": 900,
+ "rgbChannel": "28 25 23",
+ "hslChannel": "24 9.8% 10%"
+ },
+ {
+ "hex": "#0c0a09",
+ "hsl": "hsl(20,14.3%,4.1%)",
+ "rgb": "rgb(12,10,9)",
+ "scale": 950,
+ "rgbChannel": "12 10 9",
+ "hslChannel": "20 14.3% 4.1%"
+ }
+ ],
+ "teal": [
+ {
+ "hex": "#f0fdfa",
+ "hsl": "hsl(166.2,76.5%,96.7%)",
+ "rgb": "rgb(240,253,250)",
+ "scale": 50,
+ "rgbChannel": "240 253 250",
+ "hslChannel": "166.2 76.5% 96.7%"
+ },
+ {
+ "hex": "#ccfbf1",
+ "hsl": "hsl(167.2,85.5%,89.2%)",
+ "rgb": "rgb(204,251,241)",
+ "scale": 100,
+ "rgbChannel": "204 251 241",
+ "hslChannel": "167.2 85.5% 89.2%"
+ },
+ {
+ "hex": "#99f6e4",
+ "hsl": "hsl(168.4,83.8%,78.2%)",
+ "rgb": "rgb(153,246,228)",
+ "scale": 200,
+ "rgbChannel": "153 246 228",
+ "hslChannel": "168.4 83.8% 78.2%"
+ },
+ {
+ "hex": "#5eead4",
+ "hsl": "hsl(170.6,76.9%,64.3%)",
+ "rgb": "rgb(94,234,212)",
+ "scale": 300,
+ "rgbChannel": "94 234 212",
+ "hslChannel": "170.6 76.9% 64.3%"
+ },
+ {
+ "hex": "#2dd4bf",
+ "hsl": "hsl(172.5,66%,50.4%)",
+ "rgb": "rgb(45,212,191)",
+ "scale": 400,
+ "rgbChannel": "45 212 191",
+ "hslChannel": "172.5 66% 50.4%"
+ },
+ {
+ "hex": "#14b8a6",
+ "hsl": "hsl(173.4,80.4%,40%)",
+ "rgb": "rgb(20,184,166)",
+ "scale": 500,
+ "rgbChannel": "20 184 166",
+ "hslChannel": "173.4 80.4% 40%"
+ },
+ {
+ "hex": "#0d9488",
+ "hsl": "hsl(174.7,83.9%,31.6%)",
+ "rgb": "rgb(13,148,136)",
+ "scale": 600,
+ "rgbChannel": "13 148 136",
+ "hslChannel": "174.7 83.9% 31.6%"
+ },
+ {
+ "hex": "#0f766e",
+ "hsl": "hsl(175.3,77.4%,26.1%)",
+ "rgb": "rgb(15,118,110)",
+ "scale": 700,
+ "rgbChannel": "15 118 110",
+ "hslChannel": "175.3 77.4% 26.1%"
+ },
+ {
+ "hex": "#115e59",
+ "hsl": "hsl(176.1,69.4%,21.8%)",
+ "rgb": "rgb(17,94,89)",
+ "scale": 800,
+ "rgbChannel": "17 94 89",
+ "hslChannel": "176.1 69.4% 21.8%"
+ },
+ {
+ "hex": "#134e4a",
+ "hsl": "hsl(175.9,60.8%,19%)",
+ "rgb": "rgb(19,78,74)",
+ "scale": 900,
+ "rgbChannel": "19 78 74",
+ "hslChannel": "175.9 60.8% 19%"
+ },
+ {
+ "hex": "#042f2e",
+ "hsl": "hsl(178.6,84.3%,10%)",
+ "rgb": "rgb(4,47,46)",
+ "scale": 950,
+ "rgbChannel": "4 47 46",
+ "hslChannel": "178.6 84.3% 10%"
+ }
+ ],
+ "transparent": "transparent",
+ "violet": [
+ {
+ "hex": "#f5f3ff",
+ "hsl": "hsl(250,100%,97.6%)",
+ "rgb": "rgb(245,243,255)",
+ "scale": 50,
+ "rgbChannel": "245 243 255",
+ "hslChannel": "250 100% 97.6%"
+ },
+ {
+ "hex": "#ede9fe",
+ "hsl": "hsl(251.4,91.3%,95.5%)",
+ "rgb": "rgb(237,233,254)",
+ "scale": 100,
+ "rgbChannel": "237 233 254",
+ "hslChannel": "251.4 91.3% 95.5%"
+ },
+ {
+ "hex": "#ddd6fe",
+ "hsl": "hsl(250.5,95.2%,91.8%)",
+ "rgb": "rgb(221,214,254)",
+ "scale": 200,
+ "rgbChannel": "221 214 254",
+ "hslChannel": "250.5 95.2% 91.8%"
+ },
+ {
+ "hex": "#c4b5fd",
+ "hsl": "hsl(252.5,94.7%,85.1%)",
+ "rgb": "rgb(196,181,253)",
+ "scale": 300,
+ "rgbChannel": "196 181 253",
+ "hslChannel": "252.5 94.7% 85.1%"
+ },
+ {
+ "hex": "#a78bfa",
+ "hsl": "hsl(255.1,91.7%,76.3%)",
+ "rgb": "rgb(167,139,250)",
+ "scale": 400,
+ "rgbChannel": "167 139 250",
+ "hslChannel": "255.1 91.7% 76.3%"
+ },
+ {
+ "hex": "#8b5cf6",
+ "hsl": "hsl(258.3,89.5%,66.3%)",
+ "rgb": "rgb(139,92,246)",
+ "scale": 500,
+ "rgbChannel": "139 92 246",
+ "hslChannel": "258.3 89.5% 66.3%"
+ },
+ {
+ "hex": "#7c3aed",
+ "hsl": "hsl(262.1,83.3%,57.8%)",
+ "rgb": "rgb(124,58,237)",
+ "scale": 600,
+ "rgbChannel": "124 58 237",
+ "hslChannel": "262.1 83.3% 57.8%"
+ },
+ {
+ "hex": "#6d28d9",
+ "hsl": "hsl(263.4,70%,50.4%)",
+ "rgb": "rgb(109,40,217)",
+ "scale": 700,
+ "rgbChannel": "109 40 217",
+ "hslChannel": "263.4 70% 50.4%"
+ },
+ {
+ "hex": "#5b21b6",
+ "hsl": "hsl(263.4,69.3%,42.2%)",
+ "rgb": "rgb(91,33,182)",
+ "scale": 800,
+ "rgbChannel": "91 33 182",
+ "hslChannel": "263.4 69.3% 42.2%"
+ },
+ {
+ "hex": "#4c1d95",
+ "hsl": "hsl(263.5,67.4%,34.9%)",
+ "rgb": "rgb(76,29,149)",
+ "scale": 900,
+ "rgbChannel": "76 29 149",
+ "hslChannel": "263.5 67.4% 34.9%"
+ },
+ {
+ "hex": "#1e1b4b",
+ "hsl": "hsl(261.2,72.6%,22.9%)",
+ "rgb": "rgb(46,16,101)",
+ "scale": 950,
+ "rgbChannel": "46 16 101",
+ "hslChannel": "261.2 72.6% 22.9%"
+ }
+ ],
+ "white": {
+ "hex": "#ffffff",
+ "hsl": "hsl(0,0%,100%)",
+ "rgb": "rgb(255,255,255)",
+ "rgbChannel": "255 255 255",
+ "hslChannel": "0 0% 100%"
+ },
+ "yellow": [
+ {
+ "hex": "#fefce8",
+ "hsl": "hsl(54.5,91.7%,95.3%)",
+ "rgb": "rgb(254,252,232)",
+ "scale": 50,
+ "rgbChannel": "254 252 232",
+ "hslChannel": "54.5 91.7% 95.3%"
+ },
+ {
+ "hex": "#fef9c3",
+ "hsl": "hsl(54.9,96.7%,88%)",
+ "rgb": "rgb(254,249,195)",
+ "scale": 100,
+ "rgbChannel": "254 249 195",
+ "hslChannel": "54.9 96.7% 88%"
+ },
+ {
+ "hex": "#fef08a",
+ "hsl": "hsl(52.8,98.3%,76.9%)",
+ "rgb": "rgb(254,240,138)",
+ "scale": 200,
+ "rgbChannel": "254 240 138",
+ "hslChannel": "52.8 98.3% 76.9%"
+ },
+ {
+ "hex": "#fde047",
+ "hsl": "hsl(50.4,97.8%,63.5%)",
+ "rgb": "rgb(253,224,71)",
+ "scale": 300,
+ "rgbChannel": "253 224 71",
+ "hslChannel": "50.4 97.8% 63.5%"
+ },
+ {
+ "hex": "#facc15",
+ "hsl": "hsl(47.9,95.8%,53.1%)",
+ "rgb": "rgb(250,204,21)",
+ "scale": 400,
+ "rgbChannel": "250 204 21",
+ "hslChannel": "47.9 95.8% 53.1%"
+ },
+ {
+ "hex": "#eab308",
+ "hsl": "hsl(45.4,93.4%,47.5%)",
+ "rgb": "rgb(234,179,8)",
+ "scale": 500,
+ "rgbChannel": "234 179 8",
+ "hslChannel": "45.4 93.4% 47.5%"
+ },
+ {
+ "hex": "#ca8a04",
+ "hsl": "hsl(40.6,96.1%,40.4%)",
+ "rgb": "rgb(202,138,4)",
+ "scale": 600,
+ "rgbChannel": "202 138 4",
+ "hslChannel": "40.6 96.1% 40.4%"
+ },
+ {
+ "hex": "#a16207",
+ "hsl": "hsl(35.5,91.7%,32.9%)",
+ "rgb": "rgb(161,98,7)",
+ "scale": 700,
+ "rgbChannel": "161 98 7",
+ "hslChannel": "35.5 91.7% 32.9%"
+ },
+ {
+ "hex": "#854d0e",
+ "hsl": "hsl(31.8,81%,28.8%)",
+ "rgb": "rgb(133,77,14)",
+ "scale": 800,
+ "rgbChannel": "133 77 14",
+ "hslChannel": "31.8 81% 28.8%"
+ },
+ {
+ "hex": "#713f12",
+ "hsl": "hsl(28.4,72.5%,25.7%)",
+ "rgb": "rgb(113,63,18)",
+ "scale": 900,
+ "rgbChannel": "113 63 18",
+ "hslChannel": "28.4 72.5% 25.7%"
+ },
+ {
+ "hex": "#422006",
+ "hsl": "hsl(26,83.3%,14.1%)",
+ "rgb": "rgb(66,32,6)",
+ "scale": 950,
+ "rgbChannel": "66 32 6",
+ "hslChannel": "26 83.3% 14.1%"
+ }
+ ],
+ "zinc": [
+ {
+ "hex": "#fafafa",
+ "hsl": "hsl(0,0%,98%)",
+ "rgb": "rgb(250,250,250)",
+ "scale": 50,
+ "rgbChannel": "250 250 250",
+ "hslChannel": "0 0% 98%"
+ },
+ {
+ "hex": "#f4f4f5",
+ "hsl": "hsl(240,4.8%,95.9%)",
+ "rgb": "rgb(244,244,245)",
+ "scale": 100,
+ "rgbChannel": "244 244 245",
+ "hslChannel": "240 4.8% 95.9%"
+ },
+ {
+ "hex": "#e4e4e7",
+ "hsl": "hsl(240,5.9%,90%)",
+ "rgb": "rgb(228,228,231)",
+ "scale": 200,
+ "rgbChannel": "228 228 231",
+ "hslChannel": "240 5.9% 90%"
+ },
+ {
+ "hex": "#d4d4d8",
+ "hsl": "hsl(240,4.9%,83.9%)",
+ "rgb": "rgb(212,212,216)",
+ "scale": 300,
+ "rgbChannel": "212 212 216",
+ "hslChannel": "240 4.9% 83.9%"
+ },
+ {
+ "hex": "#a1a1aa",
+ "hsl": "hsl(240,5%,64.9%)",
+ "rgb": "rgb(161,161,170)",
+ "scale": 400,
+ "rgbChannel": "161 161 170",
+ "hslChannel": "240 5% 64.9%"
+ },
+ {
+ "hex": "#71717a",
+ "hsl": "hsl(240,3.8%,46.1%)",
+ "rgb": "rgb(113,113,122)",
+ "scale": 500,
+ "rgbChannel": "113 113 122",
+ "hslChannel": "240 3.8% 46.1%"
+ },
+ {
+ "hex": "#52525b",
+ "hsl": "hsl(240,5.2%,33.9%)",
+ "rgb": "rgb(82,82,91)",
+ "scale": 600,
+ "rgbChannel": "82 82 91",
+ "hslChannel": "240 5.2% 33.9%"
+ },
+ {
+ "hex": "#3f3f46",
+ "hsl": "hsl(240,5.3%,26.1%)",
+ "rgb": "rgb(63,63,70)",
+ "scale": 700,
+ "rgbChannel": "63 63 70",
+ "hslChannel": "240 5.3% 26.1%"
+ },
+ {
+ "hex": "#27272a",
+ "hsl": "hsl(240,3.7%,15.9%)",
+ "rgb": "rgb(39,39,42)",
+ "scale": 800,
+ "rgbChannel": "39 39 42",
+ "hslChannel": "240 3.7% 15.9%"
+ },
+ {
+ "hex": "#18181b",
+ "hsl": "hsl(240,5.9%,10%)",
+ "rgb": "rgb(24,24,27)",
+ "scale": 900,
+ "rgbChannel": "24 24 27",
+ "hslChannel": "240 5.9% 10%"
+ },
+ {
+ "hex": "#09090b",
+ "hsl": "hsl(240,10%,3.9%)",
+ "rgb": "rgb(9,9,11)",
+ "scale": 950,
+ "rgbChannel": "9 9 11",
+ "hslChannel": "240 10% 3.9%"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/apps/www/public/r/colors/neutral.json b/apps/www/public/r/colors/neutral.json
new file mode 100644
index 0000000000..d5188ec25d
--- /dev/null
+++ b/apps/www/public/r/colors/neutral.json
@@ -0,0 +1,92 @@
+{
+ "inlineColors": {
+ "dark": {
+ "accent": "neutral-800",
+ "accent-foreground": "neutral-50",
+ "background": "neutral-950",
+ "border": "neutral-800",
+ "card": "neutral-950",
+ "card-foreground": "neutral-50",
+ "destructive": "red-900",
+ "destructive-foreground": "neutral-50",
+ "foreground": "neutral-50",
+ "input": "neutral-800",
+ "muted": "neutral-800",
+ "muted-foreground": "neutral-400",
+ "popover": "neutral-950",
+ "popover-foreground": "neutral-50",
+ "primary": "neutral-50",
+ "primary-foreground": "neutral-900",
+ "ring": "neutral-300",
+ "secondary": "neutral-800",
+ "secondary-foreground": "neutral-50"
+ },
+ "light": {
+ "accent": "neutral-100",
+ "accent-foreground": "neutral-900",
+ "background": "white",
+ "border": "neutral-200",
+ "card": "white",
+ "card-foreground": "neutral-950",
+ "destructive": "red-500",
+ "destructive-foreground": "neutral-50",
+ "foreground": "neutral-950",
+ "input": "neutral-200",
+ "muted": "neutral-100",
+ "muted-foreground": "neutral-500",
+ "popover": "white",
+ "popover-foreground": "neutral-950",
+ "primary": "neutral-900",
+ "primary-foreground": "neutral-50",
+ "ring": "neutral-950",
+ "secondary": "neutral-100",
+ "secondary-foreground": "neutral-900"
+ }
+ },
+ "cssVars": {
+ "dark": {
+ "accent": "0 0% 14.9%",
+ "accent-foreground": "0 0% 98%",
+ "background": "0 0% 3.9%",
+ "border": "0 0% 14.9%",
+ "card": "0 0% 3.9%",
+ "card-foreground": "0 0% 98%",
+ "destructive": "0 62.8% 30.6%",
+ "destructive-foreground": "0 0% 98%",
+ "foreground": "0 0% 98%",
+ "input": "0 0% 14.9%",
+ "muted": "0 0% 14.9%",
+ "muted-foreground": "0 0% 63.9%",
+ "popover": "0 0% 3.9%",
+ "popover-foreground": "0 0% 98%",
+ "primary": "0 0% 98%",
+ "primary-foreground": "0 0% 9%",
+ "ring": "0 0% 83.1%",
+ "secondary": "0 0% 14.9%",
+ "secondary-foreground": "0 0% 98%"
+ },
+ "light": {
+ "accent": "0 0% 96.1%",
+ "accent-foreground": "0 0% 9%",
+ "background": "0 0% 100%",
+ "border": "0 0% 89.8%",
+ "card": "0 0% 100%",
+ "card-foreground": "0 0% 3.9%",
+ "destructive": "0 84.2% 60.2%",
+ "destructive-foreground": "0 0% 98%",
+ "foreground": "0 0% 3.9%",
+ "input": "0 0% 89.8%",
+ "muted": "0 0% 96.1%",
+ "muted-foreground": "0 0% 45.1%",
+ "popover": "0 0% 100%",
+ "popover-foreground": "0 0% 3.9%",
+ "primary": "0 0% 9%",
+ "primary-foreground": "0 0% 98%",
+ "ring": "0 0% 3.9%",
+ "secondary": "0 0% 96.1%",
+ "secondary-foreground": "0 0% 9%"
+ }
+ },
+ "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n ",
+ "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 0 0% 3.9%;\n --card: 0 0% 100%;\n --card-foreground: 0 0% 3.9%;\n --popover: 0 0% 100%;\n --popover-foreground: 0 0% 3.9%;\n --primary: 0 0% 9%;\n --primary-foreground: 0 0% 98%;\n --secondary: 0 0% 96.1%;\n --secondary-foreground: 0 0% 9%;\n --muted: 0 0% 96.1%;\n --muted-foreground: 0 0% 45.1%;\n --accent: 0 0% 96.1%;\n --accent-foreground: 0 0% 9%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 0 0% 98%;\n --border: 0 0% 89.8%;\n --input: 0 0% 89.8%;\n --ring: 0 0% 3.9%;\n --radius: 0.5rem;\n --chart-1: ;\n --chart-2: ;\n --chart-3: ;\n --chart-4: ;\n --chart-5: ;\n }\n\n .dark {\n --background: 0 0% 3.9%;\n --foreground: 0 0% 98%;\n --card: 0 0% 3.9%;\n --card-foreground: 0 0% 98%;\n --popover: 0 0% 3.9%;\n --popover-foreground: 0 0% 98%;\n --primary: 0 0% 98%;\n --primary-foreground: 0 0% 9%;\n --secondary: 0 0% 14.9%;\n --secondary-foreground: 0 0% 98%;\n --muted: 0 0% 14.9%;\n --muted-foreground: 0 0% 63.9%;\n --accent: 0 0% 14.9%;\n --accent-foreground: 0 0% 98%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 0 0% 98%;\n --border: 0 0% 14.9%;\n --input: 0 0% 14.9%;\n --ring: 0 0% 83.1%;\n --chart-1: ;\n --chart-2: ;\n --chart-3: ;\n --chart-4: ;\n --chart-5: ;\n }\n}\n\n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}"
+}
\ No newline at end of file
diff --git a/apps/www/public/r/colors/slate.json b/apps/www/public/r/colors/slate.json
new file mode 100644
index 0000000000..56b7d98725
--- /dev/null
+++ b/apps/www/public/r/colors/slate.json
@@ -0,0 +1,92 @@
+{
+ "inlineColors": {
+ "dark": {
+ "accent": "slate-800",
+ "accent-foreground": "slate-50",
+ "background": "slate-950",
+ "border": "slate-800",
+ "card": "slate-950",
+ "card-foreground": "slate-50",
+ "destructive": "red-900",
+ "destructive-foreground": "slate-50",
+ "foreground": "slate-50",
+ "input": "slate-800",
+ "muted": "slate-800",
+ "muted-foreground": "slate-400",
+ "popover": "slate-950",
+ "popover-foreground": "slate-50",
+ "primary": "slate-50",
+ "primary-foreground": "slate-900",
+ "ring": "slate-300",
+ "secondary": "slate-800",
+ "secondary-foreground": "slate-50"
+ },
+ "light": {
+ "accent": "slate-100",
+ "accent-foreground": "slate-900",
+ "background": "white",
+ "border": "slate-200",
+ "card": "white",
+ "card-foreground": "slate-950",
+ "destructive": "red-500",
+ "destructive-foreground": "slate-50",
+ "foreground": "slate-950",
+ "input": "slate-200",
+ "muted": "slate-100",
+ "muted-foreground": "slate-500",
+ "popover": "white",
+ "popover-foreground": "slate-950",
+ "primary": "slate-900",
+ "primary-foreground": "slate-50",
+ "ring": "slate-950",
+ "secondary": "slate-100",
+ "secondary-foreground": "slate-900"
+ }
+ },
+ "cssVars": {
+ "dark": {
+ "accent": "217.2 32.6% 17.5%",
+ "accent-foreground": "210 40% 98%",
+ "background": "222.2 84% 4.9%",
+ "border": "217.2 32.6% 17.5%",
+ "card": "222.2 84% 4.9%",
+ "card-foreground": "210 40% 98%",
+ "destructive": "0 62.8% 30.6%",
+ "destructive-foreground": "210 40% 98%",
+ "foreground": "210 40% 98%",
+ "input": "217.2 32.6% 17.5%",
+ "muted": "217.2 32.6% 17.5%",
+ "muted-foreground": "215 20.2% 65.1%",
+ "popover": "222.2 84% 4.9%",
+ "popover-foreground": "210 40% 98%",
+ "primary": "210 40% 98%",
+ "primary-foreground": "222.2 47.4% 11.2%",
+ "ring": "212.7 26.8% 83.9%",
+ "secondary": "217.2 32.6% 17.5%",
+ "secondary-foreground": "210 40% 98%"
+ },
+ "light": {
+ "accent": "210 40% 96.1%",
+ "accent-foreground": "222.2 47.4% 11.2%",
+ "background": "0 0% 100%",
+ "border": "214.3 31.8% 91.4%",
+ "card": "0 0% 100%",
+ "card-foreground": "222.2 84% 4.9%",
+ "destructive": "0 84.2% 60.2%",
+ "destructive-foreground": "210 40% 98%",
+ "foreground": "222.2 84% 4.9%",
+ "input": "214.3 31.8% 91.4%",
+ "muted": "210 40% 96.1%",
+ "muted-foreground": "215.4 16.3% 46.9%",
+ "popover": "0 0% 100%",
+ "popover-foreground": "222.2 84% 4.9%",
+ "primary": "222.2 47.4% 11.2%",
+ "primary-foreground": "210 40% 98%",
+ "ring": "222.2 84% 4.9%",
+ "secondary": "210 40% 96.1%",
+ "secondary-foreground": "222.2 47.4% 11.2%"
+ }
+ },
+ "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n ",
+ "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 222.2 84% 4.9%;\n --card: 0 0% 100%;\n --card-foreground: 222.2 84% 4.9%;\n --popover: 0 0% 100%;\n --popover-foreground: 222.2 84% 4.9%;\n --primary: 222.2 47.4% 11.2%;\n --primary-foreground: 210 40% 98%;\n --secondary: 210 40% 96.1%;\n --secondary-foreground: 222.2 47.4% 11.2%;\n --muted: 210 40% 96.1%;\n --muted-foreground: 215.4 16.3% 46.9%;\n --accent: 210 40% 96.1%;\n --accent-foreground: 222.2 47.4% 11.2%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 210 40% 98%;\n --border: 214.3 31.8% 91.4%;\n --input: 214.3 31.8% 91.4%;\n --ring: 222.2 84% 4.9%;\n --radius: 0.5rem;\n --chart-1: ;\n --chart-2: ;\n --chart-3: ;\n --chart-4: ;\n --chart-5: ;\n }\n\n .dark {\n --background: 222.2 84% 4.9%;\n --foreground: 210 40% 98%;\n --card: 222.2 84% 4.9%;\n --card-foreground: 210 40% 98%;\n --popover: 222.2 84% 4.9%;\n --popover-foreground: 210 40% 98%;\n --primary: 210 40% 98%;\n --primary-foreground: 222.2 47.4% 11.2%;\n --secondary: 217.2 32.6% 17.5%;\n --secondary-foreground: 210 40% 98%;\n --muted: 217.2 32.6% 17.5%;\n --muted-foreground: 215 20.2% 65.1%;\n --accent: 217.2 32.6% 17.5%;\n --accent-foreground: 210 40% 98%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 210 40% 98%;\n --border: 217.2 32.6% 17.5%;\n --input: 217.2 32.6% 17.5%;\n --ring: 212.7 26.8% 83.9%;\n --chart-1: ;\n --chart-2: ;\n --chart-3: ;\n --chart-4: ;\n --chart-5: ;\n }\n}\n\n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}"
+}
\ No newline at end of file
diff --git a/apps/www/public/r/colors/stone.json b/apps/www/public/r/colors/stone.json
new file mode 100644
index 0000000000..89cd6dff50
--- /dev/null
+++ b/apps/www/public/r/colors/stone.json
@@ -0,0 +1,92 @@
+{
+ "inlineColors": {
+ "dark": {
+ "accent": "stone-800",
+ "accent-foreground": "stone-50",
+ "background": "stone-950",
+ "border": "stone-800",
+ "card": "stone-950",
+ "card-foreground": "stone-50",
+ "destructive": "red-900",
+ "destructive-foreground": "stone-50",
+ "foreground": "stone-50",
+ "input": "stone-800",
+ "muted": "stone-800",
+ "muted-foreground": "stone-400",
+ "popover": "stone-950",
+ "popover-foreground": "stone-50",
+ "primary": "stone-50",
+ "primary-foreground": "stone-900",
+ "ring": "stone-300",
+ "secondary": "stone-800",
+ "secondary-foreground": "stone-50"
+ },
+ "light": {
+ "accent": "stone-100",
+ "accent-foreground": "stone-900",
+ "background": "white",
+ "border": "stone-200",
+ "card": "white",
+ "card-foreground": "stone-950",
+ "destructive": "red-500",
+ "destructive-foreground": "stone-50",
+ "foreground": "stone-950",
+ "input": "stone-200",
+ "muted": "stone-100",
+ "muted-foreground": "stone-500",
+ "popover": "white",
+ "popover-foreground": "stone-950",
+ "primary": "stone-900",
+ "primary-foreground": "stone-50",
+ "ring": "stone-950",
+ "secondary": "stone-100",
+ "secondary-foreground": "stone-900"
+ }
+ },
+ "cssVars": {
+ "dark": {
+ "accent": "12 6.5% 15.1%",
+ "accent-foreground": "60 9.1% 97.8%",
+ "background": "20 14.3% 4.1%",
+ "border": "12 6.5% 15.1%",
+ "card": "20 14.3% 4.1%",
+ "card-foreground": "60 9.1% 97.8%",
+ "destructive": "0 62.8% 30.6%",
+ "destructive-foreground": "60 9.1% 97.8%",
+ "foreground": "60 9.1% 97.8%",
+ "input": "12 6.5% 15.1%",
+ "muted": "12 6.5% 15.1%",
+ "muted-foreground": "24 5.4% 63.9%",
+ "popover": "20 14.3% 4.1%",
+ "popover-foreground": "60 9.1% 97.8%",
+ "primary": "60 9.1% 97.8%",
+ "primary-foreground": "24 9.8% 10%",
+ "ring": "24 5.7% 82.9%",
+ "secondary": "12 6.5% 15.1%",
+ "secondary-foreground": "60 9.1% 97.8%"
+ },
+ "light": {
+ "accent": "60 4.8% 95.9%",
+ "accent-foreground": "24 9.8% 10%",
+ "background": "0 0% 100%",
+ "border": "20 5.9% 90%",
+ "card": "0 0% 100%",
+ "card-foreground": "20 14.3% 4.1%",
+ "destructive": "0 84.2% 60.2%",
+ "destructive-foreground": "60 9.1% 97.8%",
+ "foreground": "20 14.3% 4.1%",
+ "input": "20 5.9% 90%",
+ "muted": "60 4.8% 95.9%",
+ "muted-foreground": "25 5.3% 44.7%",
+ "popover": "0 0% 100%",
+ "popover-foreground": "20 14.3% 4.1%",
+ "primary": "24 9.8% 10%",
+ "primary-foreground": "60 9.1% 97.8%",
+ "ring": "20 14.3% 4.1%",
+ "secondary": "60 4.8% 95.9%",
+ "secondary-foreground": "24 9.8% 10%"
+ }
+ },
+ "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n ",
+ "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 20 14.3% 4.1%;\n --card: 0 0% 100%;\n --card-foreground: 20 14.3% 4.1%;\n --popover: 0 0% 100%;\n --popover-foreground: 20 14.3% 4.1%;\n --primary: 24 9.8% 10%;\n --primary-foreground: 60 9.1% 97.8%;\n --secondary: 60 4.8% 95.9%;\n --secondary-foreground: 24 9.8% 10%;\n --muted: 60 4.8% 95.9%;\n --muted-foreground: 25 5.3% 44.7%;\n --accent: 60 4.8% 95.9%;\n --accent-foreground: 24 9.8% 10%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 60 9.1% 97.8%;\n --border: 20 5.9% 90%;\n --input: 20 5.9% 90%;\n --ring: 20 14.3% 4.1%;\n --radius: 0.5rem;\n --chart-1: ;\n --chart-2: ;\n --chart-3: ;\n --chart-4: ;\n --chart-5: ;\n }\n\n .dark {\n --background: 20 14.3% 4.1%;\n --foreground: 60 9.1% 97.8%;\n --card: 20 14.3% 4.1%;\n --card-foreground: 60 9.1% 97.8%;\n --popover: 20 14.3% 4.1%;\n --popover-foreground: 60 9.1% 97.8%;\n --primary: 60 9.1% 97.8%;\n --primary-foreground: 24 9.8% 10%;\n --secondary: 12 6.5% 15.1%;\n --secondary-foreground: 60 9.1% 97.8%;\n --muted: 12 6.5% 15.1%;\n --muted-foreground: 24 5.4% 63.9%;\n --accent: 12 6.5% 15.1%;\n --accent-foreground: 60 9.1% 97.8%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 60 9.1% 97.8%;\n --border: 12 6.5% 15.1%;\n --input: 12 6.5% 15.1%;\n --ring: 24 5.7% 82.9%;\n --chart-1: ;\n --chart-2: ;\n --chart-3: ;\n --chart-4: ;\n --chart-5: ;\n }\n}\n\n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}"
+}
\ No newline at end of file
diff --git a/apps/www/public/r/colors/zinc.json b/apps/www/public/r/colors/zinc.json
new file mode 100644
index 0000000000..940841648e
--- /dev/null
+++ b/apps/www/public/r/colors/zinc.json
@@ -0,0 +1,92 @@
+{
+ "inlineColors": {
+ "dark": {
+ "accent": "zinc-800",
+ "accent-foreground": "zinc-50",
+ "background": "zinc-950",
+ "border": "zinc-800",
+ "card": "zinc-950",
+ "card-foreground": "zinc-50",
+ "destructive": "red-900",
+ "destructive-foreground": "zinc-50",
+ "foreground": "zinc-50",
+ "input": "zinc-800",
+ "muted": "zinc-800",
+ "muted-foreground": "zinc-400",
+ "popover": "zinc-950",
+ "popover-foreground": "zinc-50",
+ "primary": "zinc-50",
+ "primary-foreground": "zinc-900",
+ "ring": "zinc-300",
+ "secondary": "zinc-800",
+ "secondary-foreground": "zinc-50"
+ },
+ "light": {
+ "accent": "zinc-100",
+ "accent-foreground": "zinc-900",
+ "background": "white",
+ "border": "zinc-200",
+ "card": "white",
+ "card-foreground": "zinc-950",
+ "destructive": "red-500",
+ "destructive-foreground": "zinc-50",
+ "foreground": "zinc-950",
+ "input": "zinc-200",
+ "muted": "zinc-100",
+ "muted-foreground": "zinc-500",
+ "popover": "white",
+ "popover-foreground": "zinc-950",
+ "primary": "zinc-900",
+ "primary-foreground": "zinc-50",
+ "ring": "zinc-950",
+ "secondary": "zinc-100",
+ "secondary-foreground": "zinc-900"
+ }
+ },
+ "cssVars": {
+ "dark": {
+ "accent": "240 3.7% 15.9%",
+ "accent-foreground": "0 0% 98%",
+ "background": "240 10% 3.9%",
+ "border": "240 3.7% 15.9%",
+ "card": "240 10% 3.9%",
+ "card-foreground": "0 0% 98%",
+ "destructive": "0 62.8% 30.6%",
+ "destructive-foreground": "0 0% 98%",
+ "foreground": "0 0% 98%",
+ "input": "240 3.7% 15.9%",
+ "muted": "240 3.7% 15.9%",
+ "muted-foreground": "240 5% 64.9%",
+ "popover": "240 10% 3.9%",
+ "popover-foreground": "0 0% 98%",
+ "primary": "0 0% 98%",
+ "primary-foreground": "240 5.9% 10%",
+ "ring": "240 4.9% 83.9%",
+ "secondary": "240 3.7% 15.9%",
+ "secondary-foreground": "0 0% 98%"
+ },
+ "light": {
+ "accent": "240 4.8% 95.9%",
+ "accent-foreground": "240 5.9% 10%",
+ "background": "0 0% 100%",
+ "border": "240 5.9% 90%",
+ "card": "0 0% 100%",
+ "card-foreground": "240 10% 3.9%",
+ "destructive": "0 84.2% 60.2%",
+ "destructive-foreground": "0 0% 98%",
+ "foreground": "240 10% 3.9%",
+ "input": "240 5.9% 90%",
+ "muted": "240 4.8% 95.9%",
+ "muted-foreground": "240 3.8% 46.1%",
+ "popover": "0 0% 100%",
+ "popover-foreground": "240 10% 3.9%",
+ "primary": "240 5.9% 10%",
+ "primary-foreground": "0 0% 98%",
+ "ring": "240 10% 3.9%",
+ "secondary": "240 4.8% 95.9%",
+ "secondary-foreground": "240 5.9% 10%"
+ }
+ },
+ "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n ",
+ "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n :root {\n --background: 0 0% 100%;\n --foreground: 240 10% 3.9%;\n --card: 0 0% 100%;\n --card-foreground: 240 10% 3.9%;\n --popover: 0 0% 100%;\n --popover-foreground: 240 10% 3.9%;\n --primary: 240 5.9% 10%;\n --primary-foreground: 0 0% 98%;\n --secondary: 240 4.8% 95.9%;\n --secondary-foreground: 240 5.9% 10%;\n --muted: 240 4.8% 95.9%;\n --muted-foreground: 240 3.8% 46.1%;\n --accent: 240 4.8% 95.9%;\n --accent-foreground: 240 5.9% 10%;\n --destructive: 0 84.2% 60.2%;\n --destructive-foreground: 0 0% 98%;\n --border: 240 5.9% 90%;\n --input: 240 5.9% 90%;\n --ring: 240 10% 3.9%;\n --radius: 0.5rem;\n --chart-1: ;\n --chart-2: ;\n --chart-3: ;\n --chart-4: ;\n --chart-5: ;\n }\n\n .dark {\n --background: 240 10% 3.9%;\n --foreground: 0 0% 98%;\n --card: 240 10% 3.9%;\n --card-foreground: 0 0% 98%;\n --popover: 240 10% 3.9%;\n --popover-foreground: 0 0% 98%;\n --primary: 0 0% 98%;\n --primary-foreground: 240 5.9% 10%;\n --secondary: 240 3.7% 15.9%;\n --secondary-foreground: 0 0% 98%;\n --muted: 240 3.7% 15.9%;\n --muted-foreground: 240 5% 64.9%;\n --accent: 240 3.7% 15.9%;\n --accent-foreground: 0 0% 98%;\n --destructive: 0 62.8% 30.6%;\n --destructive-foreground: 0 0% 98%;\n --border: 240 3.7% 15.9%;\n --input: 240 3.7% 15.9%;\n --ring: 240 4.9% 83.9%;\n --chart-1: ;\n --chart-2: ;\n --chart-3: ;\n --chart-4: ;\n --chart-5: ;\n }\n}\n\n@layer base {\n * {\n @apply border-border;\n }\n body {\n @apply bg-background text-foreground;\n }\n}"
+}
\ No newline at end of file
diff --git a/apps/www/public/r/index.json b/apps/www/public/r/index.json
new file mode 100644
index 0000000000..05a1d3220d
--- /dev/null
+++ b/apps/www/public/r/index.json
@@ -0,0 +1,1242 @@
+[
+ {
+ "dependencies": [],
+ "files": [
+ {
+ "path": "plate-ui/editor.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "editor",
+ "registryDependencies": [],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-cloud"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/cloud.tsx",
+ "type": "registry:ui"
+ },
+ {
+ "path": "plate-ui/cloud-attachment-element.tsx",
+ "type": "registry:ui"
+ },
+ {
+ "path": "plate-ui/cloud-image-element.tsx",
+ "type": "registry:ui"
+ },
+ {
+ "path": "plate-ui/cloud-resize-controls.tsx",
+ "type": "registry:ui"
+ },
+ {
+ "path": "plate-ui/cloud-status-bar.tsx",
+ "type": "registry:ui"
+ },
+ {
+ "path": "plate-ui/cloud-toolbar-buttons.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "cloud",
+ "registryDependencies": [],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-code-block"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/code-block-element.tsx",
+ "type": "registry:ui"
+ },
+ {
+ "path": "plate-ui/code-block-element.css",
+ "type": "registry:ui"
+ },
+ {
+ "path": "plate-ui/code-block-combobox.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "code-block-element",
+ "registryDependencies": [
+ "command"
+ ],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-layout"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/column-element.tsx",
+ "type": "registry:ui"
+ },
+ {
+ "path": "plate-ui/column-group-element.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "column-element",
+ "registryDependencies": [
+ "command",
+ "resizable"
+ ],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [],
+ "files": [
+ {
+ "path": "plate-ui/color-dropdown-menu.tsx",
+ "type": "registry:ui"
+ },
+ {
+ "path": "plate-ui/color-constants.ts",
+ "type": "registry:ui"
+ },
+ {
+ "path": "plate-ui/color-dropdown-menu-items.tsx",
+ "type": "registry:ui"
+ },
+ {
+ "path": "plate-ui/color-input.tsx",
+ "type": "registry:ui"
+ },
+ {
+ "path": "plate-ui/color-picker.tsx",
+ "type": "registry:ui"
+ },
+ {
+ "path": "plate-ui/colors-custom.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "color-dropdown-menu",
+ "registryDependencies": [
+ "dropdown-menu",
+ "toolbar",
+ "separator",
+ "button",
+ "tooltip"
+ ],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-comments"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/comments-popover.tsx",
+ "type": "registry:ui"
+ },
+ {
+ "path": "plate-ui/comment-avatar.tsx",
+ "type": "registry:ui"
+ },
+ {
+ "path": "plate-ui/comment-create-form.tsx",
+ "type": "registry:ui"
+ },
+ {
+ "path": "plate-ui/comment-item.tsx",
+ "type": "registry:ui"
+ },
+ {
+ "path": "plate-ui/comment-more-dropdown.tsx",
+ "type": "registry:ui"
+ },
+ {
+ "path": "plate-ui/comment-reply-items.tsx",
+ "type": "registry:ui"
+ },
+ {
+ "path": "plate-ui/comment-resolve-button.tsx",
+ "type": "registry:ui"
+ },
+ {
+ "path": "plate-ui/comment-value.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "comments-popover",
+ "registryDependencies": [
+ "popover",
+ "avatar"
+ ],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-dnd",
+ "react-dnd",
+ "react-dnd-html5-backend"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/draggable.tsx",
+ "type": "registry:ui"
+ },
+ {
+ "path": "plate-ui/with-draggables.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "draggable",
+ "registryDependencies": [
+ "tooltip"
+ ],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@radix-ui/react-popover"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/emoji-dropdown-menu.tsx",
+ "type": "registry:ui"
+ },
+ {
+ "path": "plate-ui/emoji-toolbar-dropdown.tsx",
+ "type": "registry:ui"
+ },
+ {
+ "path": "plate-ui/emoji-icons.tsx",
+ "type": "registry:ui"
+ },
+ {
+ "path": "plate-ui/emoji-picker.tsx",
+ "type": "registry:ui"
+ },
+ {
+ "path": "plate-ui/emoji-picker-content.tsx",
+ "type": "registry:ui"
+ },
+ {
+ "path": "plate-ui/emoji-picker-navigation.tsx",
+ "type": "registry:ui"
+ },
+ {
+ "path": "plate-ui/emoji-picker-preview.tsx",
+ "type": "registry:ui"
+ },
+ {
+ "path": "plate-ui/emoji-picker-search-and-clear.tsx",
+ "type": "registry:ui"
+ },
+ {
+ "path": "plate-ui/emoji-picker-search-bar.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "emoji-dropdown-menu",
+ "registryDependencies": [
+ "toolbar"
+ ],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-emoji"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/emoji-input-element.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "emoji-input-element",
+ "registryDependencies": [
+ "inline-combobox"
+ ],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-alignment"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/align-dropdown-menu.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "align-dropdown-menu",
+ "registryDependencies": [
+ "dropdown-menu",
+ "toolbar"
+ ],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@radix-ui/react-avatar"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/avatar.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "avatar",
+ "registryDependencies": [],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-block-quote"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/blockquote-element.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "blockquote-element",
+ "registryDependencies": [],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-date"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/date-element.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "date-element",
+ "registryDependencies": [
+ "calendar"
+ ],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "react-day-picker@8.10.1",
+ "date-fns"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/calendar.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "calendar",
+ "registryDependencies": [
+ "button"
+ ],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@radix-ui/react-slot"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/button.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "button",
+ "registryDependencies": [],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-caption"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/caption.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "caption",
+ "registryDependencies": [],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@radix-ui/react-checkbox"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/checkbox.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "checkbox",
+ "registryDependencies": [],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-basic-marks"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/code-leaf.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "code-leaf",
+ "registryDependencies": [],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-code-block"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/code-line-element.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "code-line-element",
+ "registryDependencies": [],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-code-block"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/code-syntax-leaf.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "code-syntax-leaf",
+ "registryDependencies": [],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "cmdk"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/command.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "command",
+ "registryDependencies": [
+ "dialog"
+ ],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-comments"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/comment-leaf.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "comment-leaf",
+ "registryDependencies": [],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [],
+ "files": [
+ {
+ "path": "plate-ui/comment-toolbar-button.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "comment-toolbar-button",
+ "registryDependencies": [],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [],
+ "files": [
+ {
+ "path": "plate-ui/cursor-overlay.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "cursor-overlay",
+ "registryDependencies": [],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@radix-ui/react-dialog"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/dialog.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "dialog",
+ "registryDependencies": [],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@radix-ui/react-dropdown-menu"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/dropdown-menu.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "dropdown-menu",
+ "registryDependencies": [],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-excalidraw"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/excalidraw-element.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "excalidraw-element",
+ "registryDependencies": [],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [],
+ "files": [
+ {
+ "path": "plate-ui/fixed-toolbar.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "fixed-toolbar",
+ "registryDependencies": [
+ "toolbar"
+ ],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-basic-marks"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/fixed-toolbar-buttons.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "fixed-toolbar-buttons",
+ "registryDependencies": [
+ "toolbar",
+ "insert-dropdown-menu",
+ "mark-toolbar-button",
+ "mode-dropdown-menu",
+ "turn-into-dropdown-menu"
+ ],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-floating"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/floating-toolbar.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "floating-toolbar",
+ "registryDependencies": [
+ "toolbar"
+ ],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-basic-marks"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/floating-toolbar-buttons.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "floating-toolbar-buttons",
+ "registryDependencies": [
+ "mark-toolbar-button",
+ "more-dropdown-menu",
+ "turn-into-dropdown-menu"
+ ],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-heading"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/heading-element.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "heading-element",
+ "registryDependencies": [],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-highlight"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/highlight-leaf.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "highlight-leaf",
+ "registryDependencies": [],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-horizontal-rule"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/hr-element.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "hr-element",
+ "registryDependencies": [],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-media"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/image-element.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "image-element",
+ "registryDependencies": [
+ "media-popover",
+ "caption",
+ "resizable"
+ ],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-indent-list"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/indent-list-toolbar-button.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "indent-list-toolbar-button",
+ "registryDependencies": [
+ "toolbar"
+ ],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-indent"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/indent-toolbar-button.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "indent-toolbar-button",
+ "registryDependencies": [
+ "toolbar"
+ ],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@ariakit/react",
+ "@udecode/plate-combobox"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/inline-combobox.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "inline-combobox",
+ "registryDependencies": [],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [],
+ "files": [
+ {
+ "path": "plate-ui/input.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "input",
+ "registryDependencies": [],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-block-quote",
+ "@udecode/plate-heading"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/insert-dropdown-menu.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "insert-dropdown-menu",
+ "registryDependencies": [
+ "dropdown-menu",
+ "toolbar"
+ ],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-kbd"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/kbd-leaf.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "kbd-leaf",
+ "registryDependencies": [],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-line-height"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/line-height-dropdown-menu.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "line-height-dropdown-menu",
+ "registryDependencies": [
+ "toolbar",
+ "dropdown-menu"
+ ],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-link"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/link-element.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "link-element",
+ "registryDependencies": [],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-link"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/link-floating-toolbar.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "link-floating-toolbar",
+ "registryDependencies": [
+ "button",
+ "input",
+ "popover",
+ "separator"
+ ],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-link"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/link-toolbar-button.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "link-toolbar-button",
+ "registryDependencies": [
+ "toolbar"
+ ],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-list"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/list-element.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "list-element",
+ "registryDependencies": [],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-list"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/list-toolbar-button.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "list-toolbar-button",
+ "registryDependencies": [
+ "toolbar"
+ ],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-basic-marks"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/mark-toolbar-button.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "mark-toolbar-button",
+ "registryDependencies": [
+ "toolbar"
+ ],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-media",
+ "react-tweet",
+ "react-lite-youtube-embed"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/media-embed-element.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "media-embed-element",
+ "registryDependencies": [
+ "media-popover",
+ "caption",
+ "resizable"
+ ],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-media"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/media-popover.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "media-popover",
+ "registryDependencies": [
+ "button",
+ "input",
+ "popover",
+ "separator"
+ ],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-media"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/media-toolbar-button.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "media-toolbar-button",
+ "registryDependencies": [
+ "toolbar"
+ ],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-mention"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/mention-element.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "mention-element",
+ "registryDependencies": [],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-mention"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/mention-input-element.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "mention-input-element",
+ "registryDependencies": [
+ "inline-combobox"
+ ],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [],
+ "files": [
+ {
+ "path": "plate-ui/mode-dropdown-menu.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "mode-dropdown-menu",
+ "registryDependencies": [
+ "dropdown-menu",
+ "toolbar"
+ ],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-basic-marks"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/more-dropdown-menu.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "more-dropdown-menu",
+ "registryDependencies": [
+ "dropdown-menu",
+ "toolbar"
+ ],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-indent"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/outdent-toolbar-button.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "outdent-toolbar-button",
+ "registryDependencies": [
+ "toolbar"
+ ],
+ "type": "registry:ui"
+ },
+ {
+ "files": [
+ {
+ "path": "plate-ui/paragraph-element.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "paragraph-element",
+ "registryDependencies": [],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-heading"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/placeholder.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "placeholder",
+ "registryDependencies": [
+ "paragraph-element"
+ ],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@radix-ui/react-popover"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/popover.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "popover",
+ "registryDependencies": [],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-find-replace"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/search-highlight-leaf.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "search-highlight-leaf",
+ "registryDependencies": [],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@radix-ui/react-separator"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/separator.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "separator",
+ "registryDependencies": [],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-heading",
+ "@udecode/plate-indent-list"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/slash-input-element.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "slash-input-element",
+ "registryDependencies": [
+ "inline-combobox"
+ ],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-table"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/table-cell-element.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "table-cell-element",
+ "registryDependencies": [
+ "resizable"
+ ],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-table"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/table-dropdown-menu.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "table-dropdown-menu",
+ "registryDependencies": [
+ "dropdown-menu",
+ "toolbar"
+ ],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-table"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/table-element.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "table-element",
+ "registryDependencies": [
+ "dropdown-menu"
+ ],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-table"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/table-row-element.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "table-row-element",
+ "registryDependencies": [],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-list"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/todo-list-element.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "todo-list-element",
+ "registryDependencies": [
+ "checkbox"
+ ],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-toggle"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/toggle-element.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "toggle-element",
+ "registryDependencies": [],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-toggle"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/toggle-toolbar-button.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "toggle-toolbar-button",
+ "registryDependencies": [
+ "toolbar"
+ ],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@radix-ui/react-toolbar"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/toolbar.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "toolbar",
+ "registryDependencies": [
+ "tooltip",
+ "separator"
+ ],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@radix-ui/react-tooltip"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/tooltip.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "tooltip",
+ "registryDependencies": [],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-block-quote",
+ "@udecode/plate-heading"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/turn-into-dropdown-menu.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "turn-into-dropdown-menu",
+ "registryDependencies": [
+ "dropdown-menu",
+ "toolbar"
+ ],
+ "type": "registry:ui"
+ },
+ {
+ "dependencies": [
+ "@udecode/plate-resizable"
+ ],
+ "files": [
+ {
+ "path": "plate-ui/resizable.tsx",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "resizable",
+ "registryDependencies": [],
+ "type": "registry:ui"
+ }
+]
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/align-dropdown-menu.json b/apps/www/public/r/styles/default/align-dropdown-menu.json
new file mode 100644
index 0000000000..c7021beead
--- /dev/null
+++ b/apps/www/public/r/styles/default/align-dropdown-menu.json
@@ -0,0 +1,19 @@
+{
+ "dependencies": [
+ "@udecode/plate-alignment"
+ ],
+ "files": [
+ {
+ "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport {\n useAlignDropdownMenu,\n useAlignDropdownMenuState,\n} from '@udecode/plate-alignment/react';\n\nimport { Icons, iconVariants } from '@/components/icons';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nconst items = [\n {\n icon: Icons.alignLeft,\n value: 'left',\n },\n {\n icon: Icons.alignCenter,\n value: 'center',\n },\n {\n icon: Icons.alignRight,\n value: 'right',\n },\n {\n icon: Icons.alignJustify,\n value: 'justify',\n },\n];\n\nexport function AlignDropdownMenu({ children, ...props }: DropdownMenuProps) {\n const state = useAlignDropdownMenuState();\n const { radioGroupProps } = useAlignDropdownMenu(state);\n\n const openState = useOpenState();\n const IconValue =\n items.find((item) => item.value === radioGroupProps.value)?.icon ??\n Icons.alignLeft;\n\n return (\n \n \n \n \n \n\n \n \n {items.map(({ icon: Icon, value: itemValue }) => (\n \n \n ))}\n \n \n \n );\n}\n",
+ "path": "plate-ui/align-dropdown-menu.tsx",
+ "target": "",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "align-dropdown-menu",
+ "registryDependencies": [
+ "dropdown-menu",
+ "toolbar"
+ ],
+ "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/avatar.json b/apps/www/public/r/styles/default/avatar.json
new file mode 100644
index 0000000000..70bcfc351e
--- /dev/null
+++ b/apps/www/public/r/styles/default/avatar.json
@@ -0,0 +1,16 @@
+{
+ "dependencies": [
+ "@radix-ui/react-avatar"
+ ],
+ "files": [
+ {
+ "content": "'use client';\n\nimport * as AvatarPrimitive from '@radix-ui/react-avatar';\nimport { withCn } from '@udecode/cn';\n\nexport const Avatar = withCn(\n AvatarPrimitive.Root,\n 'relative flex size-10 shrink-0 overflow-hidden rounded-full'\n);\n\nexport const AvatarImage = withCn(\n AvatarPrimitive.Image,\n 'aspect-square size-full'\n);\n\nexport const AvatarFallback = withCn(\n AvatarPrimitive.Fallback,\n 'flex size-full items-center justify-center rounded-full bg-muted'\n);\n",
+ "path": "plate-ui/avatar.tsx",
+ "target": "",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "avatar",
+ "registryDependencies": [],
+ "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/blockquote-element.json b/apps/www/public/r/styles/default/blockquote-element.json
new file mode 100644
index 0000000000..5b55d29b44
--- /dev/null
+++ b/apps/www/public/r/styles/default/blockquote-element.json
@@ -0,0 +1,16 @@
+{
+ "dependencies": [
+ "@udecode/plate-block-quote"
+ ],
+ "files": [
+ {
+ "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateElement } from '@udecode/plate-common/react';\n\nexport const BlockquoteElement = withRef(\n ({ children, className, ...props }, ref) => {\n return (\n \n {children} \n \n );\n }\n);\n",
+ "path": "plate-ui/blockquote-element.tsx",
+ "target": "",
+ "type": "registry:ui"
+ }
+ ],
+ "name": "blockquote-element",
+ "registryDependencies": [],
+ "type": "registry:ui"
+}
\ No newline at end of file
diff --git a/apps/www/public/r/styles/default/button.json b/apps/www/public/r/styles/default/button.json
new file mode 100644
index 0000000000..7beeda0cdc
--- /dev/null
+++ b/apps/www/public/r/styles/default/button.json
@@ -0,0 +1,16 @@
+{
+ "dependencies": [
+ "@radix-ui/react-slot"
+ ],
+ "files": [
+ {
+ "content": "import * as React from 'react';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport { cn, withRef } from '@udecode/cn';\nimport { type VariantProps, cva } from 'class-variance-authority';\n\nexport const buttonVariants = cva(\n 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n {\n defaultVariants: {\n size: 'default',\n variant: 'default',\n },\n variants: {\n isMenu: {\n true: 'h-auto w-full cursor-pointer justify-start',\n },\n size: {\n default: 'h-10 px-4 py-2',\n icon: 'size-10',\n lg: 'h-11 rounded-md px-8',\n none: '',\n sm: 'h-9 rounded-md px-3',\n sms: 'size-9 rounded-md px-0',\n xs: 'h-8 rounded-md px-3',\n },\n variant: {\n default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n destructive:\n 'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n ghost: 'hover:bg-accent hover:text-accent-foreground',\n inlineLink: 'text-base text-primary underline underline-offset-4',\n link: 'text-primary underline-offset-4 hover:underline',\n outline:\n 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',\n secondary:\n 'bg-secondary text-secondary-foreground hover:bg-secondary/80',\n },\n },\n }\n);\n\nexport const Button = withRef<\n 'button',\n {\n asChild?: boolean;\n } & VariantProps\n>(({ asChild = false, className, isMenu, size, variant, ...props }, ref) => {\n const Comp = asChild ? Slot : 'button';\n\n return (\n ;\n\nfunction Calendar({\n className,\n classNames,\n showOutsideDays = true,\n ...props\n}: CalendarProps) {\n return (\n (\n ({ className, ...props }, ref) => (\n \n \n {}\n\nexport function CloudAttachmentElement({\n className,\n ...props\n}: CloudAttachmentElementProps) {\n const { children, element } = props;\n\n const { focused, selected, upload } = useCloudAttachmentElementState({\n element,\n });\n\n return (\n \n \n
\n \n
{element.filename}
\n
\n \n {element.bytes} bytes\n
\n \n
\n {upload.status === 'success' && (\n \n \n )}\n \n {children}\n \n );\n}\n",
+ "path": "plate-ui/cloud-attachment-element.tsx",
+ "target": "",
+ "type": "registry:ui"
+ },
+ {
+ "content": "'use client';\n\nimport React from 'react';\n\nimport { cn } from '@udecode/cn';\nimport {\n type TCloudImageElement,\n useCloudImageElementState,\n} from '@udecode/plate-cloud';\nimport {\n type PlateElementProps,\n PlateElement,\n} from '@udecode/plate-common/react';\n\nimport { ResizeControls } from './cloud-resize-controls';\nimport { StatusBar } from './cloud-status-bar';\n\nexport interface CloudImageElementProps\n extends PlateElementProps
{}\n\nexport function CloudImageElement({\n className,\n ...props\n}: CloudImageElementProps) {\n const { children, element } = props;\n\n const { focused, selected, setSize, size, src, srcSet, upload } =\n useCloudImageElementState({ element });\n\n return (\n \n on the inside is display: 'block'.\n */\n verticalAlign: 'top',\n }}\n contentEditable={false}\n >\n {src === '' ? (\n \n
\n {selected && focused && (\n >;\n\n/** The resize label that shows the width/height of the image */\nfunction ResizeLabel({ size }: { size: { height: number; width: number } }) {\n const isBelow = size.width < 100 || size.height < 100;\n const bottom = isBelow ? -24 : 4;\n\n return (\n \n {size.width} × {size.height}\n