diff --git a/CHANGELOG.md b/CHANGELOG.md index d055a2f..1efe00f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,2 +1,5 @@ # 0.0.1 - First publish + +# 1.0.5 +- Update theme diff --git a/README.md b/README.md index e09af38..532f888 100644 --- a/README.md +++ b/README.md @@ -34,6 +34,8 @@ theme via Tailwind. - Checkout the [docs and demos](https://reachat.dev) - Checkout the [storybook demos](https://storybook.reachat.dev) - Learn about updates from the [changelog](CHANGELOG.md) +- Download [Figma template](https://www.figma.com/community/file/1401162540082414292/reachat-landing-page-public) +- Try the [sample repo](https://github.com/reaviz/reachat-example) ## 💎 Other Projects @@ -85,5 +87,5 @@ If you want to run reachat locally, its super easy! Thanks to all our contributors! - + diff --git a/src/SessionMessages/SessionMessage/MessageSource.tsx b/src/SessionMessages/SessionMessage/MessageSource.tsx index 8c83734..c24bc86 100644 --- a/src/SessionMessages/SessionMessage/MessageSource.tsx +++ b/src/SessionMessages/SessionMessage/MessageSource.tsx @@ -11,11 +11,13 @@ export interface MessageSourceProps extends ConversationSource { } export const MessageSource: FC = ({ title, url, image, limit = 50 }) => { - const { theme } = useContext(ChatContext); + const { theme, isCompact } = useContext(ChatContext); return (
{ if (url) { window.open(url, '_blank'); diff --git a/src/SessionMessages/SessionMessage/SessionMessage.tsx b/src/SessionMessages/SessionMessage/SessionMessage.tsx index baa6626..cea1950 100644 --- a/src/SessionMessages/SessionMessage/SessionMessage.tsx +++ b/src/SessionMessages/SessionMessage/SessionMessage.tsx @@ -35,6 +35,7 @@ interface SessionMessageProps extends PropsWithChildren { /** * Whether the message is the last one in the list. + * This let's the chat know when to show the loading cursor. */ isLast?: boolean; } diff --git a/src/SessionMessages/SessionMessagePanel.tsx b/src/SessionMessages/SessionMessagePanel.tsx index 2bf848f..28c7f18 100644 --- a/src/SessionMessages/SessionMessagePanel.tsx +++ b/src/SessionMessages/SessionMessagePanel.tsx @@ -37,7 +37,7 @@ export const SessionMessagePanel: FC = ({ children }) => { className={cn(theme.messages.back)} > - Back + Back )} {children} diff --git a/src/assets/placeholder-dark.svg b/src/assets/placeholder-dark.svg new file mode 100644 index 0000000..01f3541 --- /dev/null +++ b/src/assets/placeholder-dark.svg @@ -0,0 +1,500 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/placeholder.svg b/src/assets/placeholder.svg new file mode 100644 index 0000000..726ec71 --- /dev/null +++ b/src/assets/placeholder.svg @@ -0,0 +1,258 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/trash.svg b/src/assets/trash.svg index 02f7c00..f2384e2 100644 --- a/src/assets/trash.svg +++ b/src/assets/trash.svg @@ -1 +1,7 @@ - \ No newline at end of file + + + + + diff --git a/src/theme.ts b/src/theme.ts index 02f6db8..938cecd 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -42,6 +42,7 @@ export interface ChatTheme { base: string; source: { base: string; + companion: string; image: string; title: string; url: string; @@ -82,73 +83,97 @@ export interface ChatTheme { } export const chatTheme: ChatTheme = { - base: 'text-white', - console: 'flex w-full gap-5 h-full', + base: 'dark:text-white text-gray-500', + console: 'flex w-full gap-10 h-full', companion: 'w-full h-full overflow-hidden', empty: 'text-center flex-1', sessions: { base: 'overflow-auto', - console: 'min-w-[150px] w-[30%] max-w-[300px] bg-[#11111F] p-5 rounded-3xl', + console: + 'min-w-[150px] w-[30%] max-w-[300px] dark:bg-[#11111F] bg-[#F2F3F7] p-5 rounded-3xl', companion: 'w-full h-full', - group: 'text-xs text-gray-400 mt-4 hover:bg-transparent mb-1', - create: - 'relative mb-4 rounded-[10px]', + group: + 'text-xs dart:text-gray-400 text-gray-700 mt-4 hover:bg-transparent mb-1', + create: 'relative mb-4 rounded-[10px] text-white', session: { - base: 'my-1 rounded-[10px] p-2 text-typography hover:bg-gray-800/50 border border-transparent hover:border-gray-700/50', - active: - 'bg-gray-800/70 border border-gray-700/70 hover:bg-gray-800/50 border-gray-700/50 text-white', - delete: '[&>svg]:w-4 [&>svg]:h-4 opacity-50' + base: [ + 'group my-1 rounded-[10px] p-2 text-gray-500 border border-transparent hover:bg-gray-300 hover:border-gray-400 [&_svg]:text-gray-500', + 'dark:text-typography dark:text-gray-400 dark:hover:bg-gray-800/50 dark:hover:border-gray-700/50 dark:[&_svg]:text-gray-200' + ].join(' '), + active: [ + 'border border-gray-300 hover:border-gray-400 text-gray-700 bg-gray-200 hover:bg-gray-300 ', + 'dark:text-gray-500 dark:bg-gray-800/70 dark:border-gray-700/50 dark:text-white dark:border-gray-700/70 dark:hover:bg-gray-800/50', + '[&_button]:!opacity-100' + ].join(' '), + delete: '[&>svg]:w-4 [&>svg]:h-4 opacity-0 group-hover:!opacity-50' } }, messages: { base: '', - console: 'flex flex-col flex-1 overflow-hidden', + console: 'flex flex-col mr-5 flex-1 overflow-hidden', companion: 'flex w-full h-full', back: 'self-start p-0 my-2', inner: 'flex-1 h-full flex flex-col', - title: 'text-2xl font-bold', - date: 'text-sm whitespace-nowrap pt-2', - content: 'mt-2 flex-1 overflow-y-auto overflow-x-hidden', + title: ['text-base font-bold text-gray-500', 'dark:text-gray-200'].join( + ' ' + ), + date: 'text-xs whitespace-nowrap pt-2 text-gray-400', + content: [ + 'mt-2 flex-1 overflow-auto [&_hr]:bg-gray-200', + 'dark:[&_hr]:bg-gray-800/60' + ].join(' '), header: 'flex justify-between items-start gap-2', showMore: 'mb-4', message: { - base: 'mt-4 mb-4 flex flex-col p-0 rounded border-none', - question: - 'font-semibold text-gray-400 mb-4 px-4 py-3 pb-1 rounded-3xl rounded-br-none text-typography bg-gray-900/60 border border-gray-700/50', - response: '', + base: 'mt-4 mb-4 flex flex-col p-0 rounded border-none bg-transparent', + question: [ + 'font-semibold mb-4 px-4 py-4 pb-2 rounded-3xl rounded-br-none text-typography border bg-gray-200 border-gray-300 text-gray-900', + 'dark:bg-gray-900/60 dark:border-gray-700/50 dark:text-gray-100' + ].join(' '), + response: ['text-gray-900', 'dark:text-gray-100'].join(' '), cursor: 'inline-block w-1 h-4 bg-current', files: { base: 'mb-2 flex flex-wrap gap-3 ', file: { - base: 'flex items-center gap-2 border border-gray-700 p-2 rounded cursor-pointer', - name: 'text-sm' + base: [ + 'flex items-center gap-2 border border-gray-300 px-3 py-2 rounded-lg cursor-pointer', + 'dark:border-gray-700' + ].join(' '), + name: ['text-sm text-gray-500', 'dark:text-gray-200'].join(' ') } }, sources: { base: 'my-4 flex flex-wrap gap-3', source: { - base: 'flex gap-2 border border-gray-700 p-2 rounded cursor-pointer', - image: 'w-6 h-6 rounded-md', + base: [ + 'flex gap-2 border border-gray-200 px-4 py-2 rounded-lg cursor-pointer', + 'dark:border-gray-700' + ].join(' '), + companion: 'flex-1 px-3 py-1.5', + image: 'max-w-10 max-h-10 rounded-md w-full h-fit self-center', title: 'text-md block', - url: 'text-sm text-blue-700 underline' + url: 'text-sm text-blue-400 underline' } }, markdown: { copy: 'sticky py-1 [&>svg]:w-4 [&>svg]:h-4 opacity-50', p: 'mb-2', - a: 'text-blue-700 underline', + a: 'text-blue-400 underline', table: 'table-auto w-full m-2', th: 'px-4 py-2 text-left font-bold border-b border-gray-500', td: 'px-4 py-2', code: 'm-2 rounded-b relative', - toolbar: 'text-xs bg-gray-700/50 flex items-center justify-between px-2 py-1 rounded-t sticky top-0 backdrop-blur-md', + toolbar: 'text-xs dark:bg-gray-700/50 flex items-center justify-between px-2 py-1 rounded-t sticky top-0 backdrop-blur-md bg-gray-200 ', li: 'mb-2 ml-6', ul: 'mb-4 list-disc', ol: 'mb-4 list-decimal' }, footer: { - base: 'mt-3 flex gap-1.5', - copy: 'p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:!opacity-100 hover:bg-gray-700/40 hover:text-white', + base: 'mt-3 flex gap-1.5 text-gray-400', + copy: [ + 'p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:!opacity-100 hover:bg-gray-200 hover:text-gray-500', + 'dark:hover:bg-gray-800 dark:hover:text-white' + ].join(' '), upvote: 'p-3 rounded-[10px] [&>svg]:w-4 [&>svg]:h-4 opacity-50 hover:!opacity-100 hover:bg-gray-700/40 hover:text-white', downvote: @@ -160,12 +185,17 @@ export const chatTheme: ChatTheme = { }, input: { base: 'flex mt-4 relative', - upload: 'px-5 py-2 text-white size-10', - input: - 'w-full text-typography border border-gray-700/70 rounded-3xl px-3 py-2 pr-16 after:!mx-10 [&>textarea]:w-full', + upload: ['px-5 py-2 text-gray-400 size-10', 'dark:gray-500'].join(' '), + input: [ + 'w-full border rounded-3xl px-3 py-2 pr-16 text-gray-500 border-gray-200 hover:bg-blue-100 hover:border-blue-500 after:hidden after:!mx-10 bg-white [&>textarea]:w-full [&>textarea]:flex-none', + 'dark:border-gray-700/50 dark:text-gray-200 dark:bg-gray-950 dark:hover:bg-blue-950/40' + ].join(' '), actions: { - base: 'absolute flex gap-2 items-center right-5 top-[50%] -translate-y-1/2 z-10', - send: 'px-3 py-3 text-white bg-gray-800 hover:bg-primary-hover rounded-full ', + base: 'absolute flex gap-2 items-center right-5 inset-y-1/2 -translate-y-1/2 z-10', + send: [ + 'px-3 py-3 hover:bg-primary-hover rounded-full bg-gray-200 hover:bg-gray-300 text-gray-500', + 'dark:text-white dark:bg-gray-800 hover:dark:bg-gray-700' + ].join(' '), stop: 'px-2 py-2 bg-red-500 text-white rounded-full hover:bg-red-700 ' } } diff --git a/stories/Companion.stories.tsx b/stories/Companion.stories.tsx index c229e65..8df57d1 100644 --- a/stories/Companion.stories.tsx +++ b/stories/Companion.stories.tsx @@ -20,6 +20,9 @@ import { } from './examples'; import { useState } from 'react'; +import Placeholder from '@/assets/placeholder.svg?react'; +import PlaceholderDark from '@/assets/placeholder-dark.svg?react'; + export default { title: 'Demos/Companion', component: Chat @@ -34,11 +37,11 @@ export const Basic = () => { ]); return (
@@ -81,10 +84,11 @@ export const Basic = () => { {conversations => - conversations.map(conversation => ( + conversations.map((conversation, index) => ( )) } @@ -99,11 +103,11 @@ export const Basic = () => { export const Empty = () => { return (
@@ -126,20 +130,21 @@ export const Empty = () => { } - - - - {conversations => - conversations.map(conversation => ( - - )) +
+ + + +

+ Welcome to Reachat, a UI library for effortlessly building and + customizing chat experiences with Tailwind. +

+
} - - - + /> +
+
); diff --git a/stories/Console.stories.tsx b/stories/Console.stories.tsx index 4c38b11..d127cca 100644 --- a/stories/Console.stories.tsx +++ b/stories/Console.stories.tsx @@ -1,4 +1,4 @@ -import { useState, useRef, FC, useContext, Fragment } from 'react'; +import { useState, useRef, FC, useContext } from 'react'; import { Meta } from '@storybook/react'; import { Chat, @@ -30,6 +30,8 @@ import { } from 'reablocks'; import { subDays, subMinutes, subHours } from 'date-fns'; import MenuIcon from '@/assets/menu.svg?react'; +import Placeholder from '@/assets/placeholder.svg?react'; +import PlaceholderDark from '@/assets/placeholder-dark.svg?react'; import { MessageActions } from '@/SessionMessages'; import { MessageFiles } from '@/SessionMessages'; import { MessageQuestion } from '@/SessionMessages'; @@ -51,6 +53,7 @@ export default { export const Basic = () => { return (
{ bottom: 0, padding: 20, margin: 20, - background: '#02020F', borderRadius: 5 }} > @@ -86,10 +88,11 @@ export const Basic = () => { {conversations => - conversations.map(conversation => ( + conversations.map((conversation, index) => ( )) } @@ -104,6 +107,7 @@ export const Basic = () => { export const Embeds = () => { return (
{ bottom: 0, padding: 20, margin: 20, - background: '#02020F', borderRadius: 5 }} > @@ -139,10 +142,11 @@ export const Embeds = () => { {conversations => - conversations.map(conversation => ( + conversations.map((conversation, index) => ( )) } @@ -157,6 +161,7 @@ export const Embeds = () => { export const DefaultSession = () => { return (
{ bottom: 0, padding: 20, margin: 20, - background: '#02020F', borderRadius: 5 }} > @@ -194,10 +198,11 @@ export const DefaultSession = () => { {conversations => - conversations.map(conversation => ( + conversations.map((conversation, index) => ( )) } @@ -212,6 +217,7 @@ export const DefaultSession = () => { export const Loading = () => { return (
{ bottom: 0, padding: 20, margin: 20, - background: '#02020F', borderRadius: 5 }} > @@ -269,6 +274,7 @@ export const Loading = () => { export const FileUploads = () => { return (
{ bottom: 0, padding: 20, margin: 20, - background: '#02020F', borderRadius: 5 }} > @@ -305,10 +310,11 @@ export const FileUploads = () => { {conversations => - conversations.map(conversation => ( + conversations.map((conversation, index) => ( )) } @@ -323,6 +329,7 @@ export const FileUploads = () => { export const DefaultInputValue = () => { return (
{ bottom: 0, padding: 20, margin: 20, - background: '#02020F', borderRadius: 5 }} > @@ -360,10 +366,11 @@ export const DefaultInputValue = () => { {conversations => - conversations.map(conversation => ( + conversations.map((conversation, index) => ( )) } @@ -378,6 +385,7 @@ export const DefaultInputValue = () => { export const UndeleteableSessions = () => { return (
{ bottom: 0, padding: 20, margin: 20, - background: '#02020F', borderRadius: 5 }} > @@ -410,10 +417,11 @@ export const UndeleteableSessions = () => { {conversations => - conversations.map(conversation => ( + conversations.map((conversation, index) => ( )) } @@ -461,6 +469,7 @@ export const SessionGrouping = () => { return (
{ bottom: 0, padding: 20, margin: 20, - background: '#02020F', borderRadius: 5 }} > @@ -498,10 +506,11 @@ export const SessionGrouping = () => { {conversations => - conversations.map(conversation => ( + conversations.map((conversation, index) => ( )) } @@ -536,6 +545,7 @@ export const HundredSessions = () => { return (
{ bottom: 0, padding: 20, margin: 20, - background: '#02020F', borderRadius: 5 }} > @@ -568,10 +577,11 @@ export const HundredSessions = () => { {conversations => - conversations.map(conversation => ( + conversations.map((conversation, index) => ( )) } @@ -606,6 +616,7 @@ export const HundredConversations = () => { return (
{ bottom: 0, padding: 20, margin: 20, - background: '#02020F', borderRadius: 5 }} > @@ -642,10 +652,11 @@ export const HundredConversations = () => { {conversations => - conversations.map(conversation => ( + conversations.map((conversation, index) => ( )) } @@ -672,6 +683,7 @@ export const LongSessionNames = () => { return (
{ bottom: 0, padding: 20, margin: 20, - background: '#02020F', borderRadius: 5 }} > @@ -708,10 +719,11 @@ export const LongSessionNames = () => { {conversations => - conversations.map(conversation => ( + conversations.map((conversation, index) => ( )) } @@ -804,6 +816,7 @@ export const MarkdownShowcase = () => { return (
{ bottom: 0, padding: 20, margin: 20, - background: '#02020F', borderRadius: 5 }} > @@ -840,10 +852,11 @@ export const MarkdownShowcase = () => { {conversations => - conversations.map(conversation => ( + conversations.map((conversation, index) => ( )) } @@ -893,6 +906,7 @@ export const CVEExample = () => { return (
{ bottom: 0, padding: 20, margin: 20, - background: '#02020F', borderRadius: 5 }} > @@ -930,10 +943,11 @@ export const CVEExample = () => { {conversations => - conversations.map(conversation => ( + conversations.map((conversation, index) => ( )) } @@ -948,6 +962,7 @@ export const CVEExample = () => { export const Empty = () => { return (
{ bottom: 0, padding: 20, margin: 20, - background: '#02020F', borderRadius: 5 }} > @@ -991,9 +1005,12 @@ export const Empty = () => {
-

- No messages yet. Start a new conversation! +

+ + +

+ Welcome to Reachat, a UI library for effortlessly building and + customizing chat experiences with Tailwind.

} @@ -1008,6 +1025,7 @@ export const Empty = () => { export const ConversationSources = () => { return (
{ bottom: 0, padding: 20, margin: 20, - background: '#02020F', borderRadius: 5 }} > @@ -1044,10 +1061,11 @@ export const ConversationSources = () => { {conversations => - conversations.map(conversation => ( + conversations.map((conversation, index) => ( )) } @@ -1159,6 +1177,7 @@ const CustomSessionListItem: FC = ({ export const CustomComponents = () => { return (
{ bottom: 0, padding: 20, margin: 20, - background: '#02020F', borderRadius: 5 }} > @@ -1294,6 +1312,7 @@ export const ImageFiles = () => { return (
{ bottom: 0, padding: 20, margin: 20, - background: '#02020F', borderRadius: 5 }} > @@ -1330,10 +1348,11 @@ export const ImageFiles = () => { {conversations => - conversations.map(conversation => ( + conversations.map((conversation, index) => ( )) } diff --git a/stories/Integration.stories.tsx b/stories/Integration.stories.tsx index a2bd553..10d0373 100644 --- a/stories/Integration.stories.tsx +++ b/stories/Integration.stories.tsx @@ -129,6 +129,7 @@ export const _OpenAI = () => { onChange={e => setApiKey(e.target.value)} />
{ bottom: 0, padding: 20, margin: 20, - background: '#02020F', borderRadius: 5 }} > @@ -169,10 +169,11 @@ export const _OpenAI = () => { {conversations => - conversations.map(conversation => ( + conversations.map((conversation, index) => ( )) } @@ -295,6 +296,7 @@ export const VercelAI = () => { onChange={e => setApiKey(e.target.value)} />
{ bottom: 0, padding: 20, margin: 20, - background: '#02020F', borderRadius: 5 }} > @@ -336,10 +337,11 @@ export const VercelAI = () => { {conversations => - conversations.map(conversation => ( + conversations.map((conversation, index) => ( )) } diff --git a/tailwind.config.ts b/tailwind.config.ts index 475ef92..2d09be9 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -5,75 +5,80 @@ import { colorPalette } from 'reablocks'; module.exports = { content: [ - "./index.html", - "./src/**/*.{js,ts,jsx,tsx}", - "./node_modules/reablocks/**/*.{js,jsx,ts,tsx}", + './index.html', + './src/**/*.{js,ts,jsx,tsx}', + './stories/**/*.{js,ts,jsx,tsx}', + './node_modules/reablocks/**/*.{js,jsx,ts,tsx}' ], + darkMode: 'selector', + lightMode: 'selector', theme: { - extend: { - borderRadius: { - '3xl': '20px', - }, - colors: { - primary: { - DEFAULT: colorPalette.blue[500], - active: colorPalette.blue[500], - hover: colorPalette.blue[600], - inactive: colorPalette.blue[200] - }, - secondary: { - DEFAULT: colorPalette.gray[700], - active: colorPalette.gray[700], - hover: colorPalette.gray[800], - inactive: colorPalette.gray[400] - }, - success: { - DEFAULT: colorPalette.green[500], - active: colorPalette.green[500], - hover: colorPalette.green[600] - }, - error: { - DEFAULT: colorPalette.red[500], - active: colorPalette.red[500], - hover: colorPalette.red[600] - }, - warning: { - DEFAULT: colorPalette.orange[500], - active: colorPalette.orange[500], - hover: colorPalette.orange[600] - }, - info: { - DEFAULT: colorPalette.blue[500], - active: colorPalette.blue[500], - hover: colorPalette.blue[600] - }, - background: { - level1: colorPalette.white, - level2: colorPalette.gray[950], - level3: colorPalette.gray[900], - level4: colorPalette.gray[800], - }, - panel: { - DEFAULT: colorPalette['black-pearl'], - accent: colorPalette['charade'] - }, - surface: { - DEFAULT: colorPalette['charade'], - - }, - typography: { - DEFAULT: colorPalette['athens-gray'], - }, - accent: { - DEFAULT: colorPalette['waterloo'], - active: colorPalette['anakiwa'] + extend: { + borderRadius: { + '3xl': '20px' }, + colors: { + primary: { + DEFAULT: colorPalette.blue[500], + active: colorPalette.blue[500], + hover: colorPalette.blue[600], + inactive: colorPalette.blue[200] + }, + secondary: { + DEFAULT: colorPalette.gray[700], + active: colorPalette.gray[700], + hover: colorPalette.gray[800], + inactive: colorPalette.gray[400] + }, + success: { + DEFAULT: colorPalette.green[500], + active: colorPalette.green[500], + hover: colorPalette.green[600] + }, + error: { + DEFAULT: colorPalette.red[500], + active: colorPalette.red[500], + hover: colorPalette.red[600] + }, + warning: { + DEFAULT: colorPalette.orange[500], + active: colorPalette.orange[500], + hover: colorPalette.orange[600] + }, + info: { + DEFAULT: colorPalette.blue[500], + active: colorPalette.blue[500], + hover: colorPalette.blue[600] + }, + background: { + level1: colorPalette.white, + level2: colorPalette.gray[950], + level3: colorPalette.gray[900], + level4: colorPalette.gray[800] + }, + panel: { + DEFAULT: colorPalette['black-pearl'], + accent: colorPalette['charade'] + }, + surface: { + DEFAULT: colorPalette['charade'] + }, + typography: { + DEFAULT: colorPalette['athens-gray'] + }, + accent: { + DEFAULT: colorPalette['waterloo'], + active: colorPalette['anakiwa'] + } + } } - } -}, + }, plugins: [ - plugin(({ addVariant }) => { - addVariant('disabled-within', '&:has(input:is(:disabled),button:is(:disabled))'); - }) -], + plugin(({ addVariant }) => { + addVariant( + 'disabled-within', + '&:has(input:is(:disabled),button:is(:disabled))' + ); + }) + ] }; diff --git a/vite.config.ts b/vite.config.ts index aeee388..3bef7f2 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -42,7 +42,7 @@ export default defineConfig(({ mode }) => copyPublicDir: false, lib: { entry: resolve('src', 'index.ts'), - name: 'reablocks', + name: 'reachat', fileName: 'index' }, rollupOptions: {