diff --git a/packages/ui-stencil/README.md b/packages/ui-stencil/README.md index 63747e1e..83e27707 100644 --- a/packages/ui-stencil/README.md +++ b/packages/ui-stencil/README.md @@ -32,17 +32,17 @@ Or import it directly in a browser module: ``` + +## Components API Documentation + +[Orama Search Box](src/components/orama-search-box/README.md) +[Orama Chat Box](src/components/orama-chat-box/README.md) +[Orama Search Button](src/components/orama-search-button/README.md) diff --git a/packages/ui-stencil/src/components.d.ts b/packages/ui-stencil/src/components.d.ts index 167da693..2e3f82fd 100644 --- a/packages/ui-stencil/src/components.d.ts +++ b/packages/ui-stencil/src/components.d.ts @@ -145,28 +145,94 @@ export namespace Components { "suggestions"?: string[]; } interface OramaSearchBox { + /** + * Callback function used on every AI Chat link + */ "chatMarkdownLinkHref"?: ChatMarkdownLinkHref; + /** + * Callback function used on every AI Chat link target + */ "chatMarkdownLinkTarget"?: ChatMarkdownLinkTarget; + /** + * Callback function used on every AI Chat link title + */ "chatMarkdownLinkTitle"?: ChatMarkdownLinkTitle; + /** + * Placeholder for chat input + */ "chatPlaceholder"?: string; + /** + * Orama Instance + */ "clientInstance"?: OramaClient | AnyOrama; + /** + * Component color schema + */ "colorScheme"?: ColorScheme; + /** + * Disables chat capabilities + */ "disableChat"?: boolean; + /** + * Index result property to + */ "facetProperty"?: string; + /** + * Options for highlights of Search Result descriptions + */ "highlightDescription"?: HighlightOptions | false; + /** + * Options for highlights of Search Result titles + */ "highlightTitle"?: HighlightOptions | false; + /** + * Orama Index configuration note: It will be overrided by clientInstance property + */ "index"?: CloudIndexConfig; + /** + * This component can behave either as Modal or a Embed component. For Modal, a new absolute panel will be displayed on top. For Embed, Orama Search Box will be displayed as a inline component. + */ "layout"?: 'modal' | 'embed'; + /** + * Used to provide linkRel to search result links + */ "linksRel"?: string; + /** + * Used to provide linkRel to search result links + */ "linksTarget"?: string; "open": boolean; + /** + * @deprecated it will be removed on next releases Placeholder for chat input + */ "placeholder"?: string; + /** + * Used to map dataset result properties to the expected SearchBox properties + */ "resultMap"?: Partial; + /** + * Parameters forwarded to Orama Client. + */ "searchParams"?: SearchParams>; + /** + * Placeholder for search input + */ "searchPlaceholder"?: string; + /** + * Used to provide source base URL for the Search Results + */ "sourceBaseUrl"?: string; + /** + * Used to map Chat result sources to expected Orama Chat properties + */ "sourcesMap"?: SourcesMap; + /** + * List of initial questions for Orama Chat + */ "suggestions"?: string[]; + /** + * Component theme customization + */ "themeConfig"?: Partial; } interface OramaSearchButton { @@ -721,19 +787,61 @@ declare namespace LocalJSX { "suggestions"?: string[]; } interface OramaSearchBox { + /** + * Callback function used on every AI Chat link + */ "chatMarkdownLinkHref"?: ChatMarkdownLinkHref; + /** + * Callback function used on every AI Chat link target + */ "chatMarkdownLinkTarget"?: ChatMarkdownLinkTarget; + /** + * Callback function used on every AI Chat link title + */ "chatMarkdownLinkTitle"?: ChatMarkdownLinkTitle; + /** + * Placeholder for chat input + */ "chatPlaceholder"?: string; + /** + * Orama Instance + */ "clientInstance"?: OramaClient | AnyOrama; + /** + * Component color schema + */ "colorScheme"?: ColorScheme; + /** + * Disables chat capabilities + */ "disableChat"?: boolean; + /** + * Index result property to + */ "facetProperty"?: string; + /** + * Options for highlights of Search Result descriptions + */ "highlightDescription"?: HighlightOptions | false; + /** + * Options for highlights of Search Result titles + */ "highlightTitle"?: HighlightOptions | false; + /** + * Orama Index configuration note: It will be overrided by clientInstance property + */ "index"?: CloudIndexConfig; + /** + * This component can behave either as Modal or a Embed component. For Modal, a new absolute panel will be displayed on top. For Embed, Orama Search Box will be displayed as a inline component. + */ "layout"?: 'modal' | 'embed'; + /** + * Used to provide linkRel to search result links + */ "linksRel"?: string; + /** + * Used to provide linkRel to search result links + */ "linksTarget"?: string; /** * Fired when answer generation is successfully completed @@ -756,13 +864,37 @@ declare namespace LocalJSX { */ "onSearchResultClick"?: (event: OramaSearchBoxCustomEvent) => void; "open"?: boolean; + /** + * @deprecated it will be removed on next releases Placeholder for chat input + */ "placeholder"?: string; + /** + * Used to map dataset result properties to the expected SearchBox properties + */ "resultMap"?: Partial; + /** + * Parameters forwarded to Orama Client. + */ "searchParams"?: SearchParams>; + /** + * Placeholder for search input + */ "searchPlaceholder"?: string; + /** + * Used to provide source base URL for the Search Results + */ "sourceBaseUrl"?: string; + /** + * Used to map Chat result sources to expected Orama Chat properties + */ "sourcesMap"?: SourcesMap; + /** + * List of initial questions for Orama Chat + */ "suggestions"?: string[]; + /** + * Component theme customization + */ "themeConfig"?: Partial; } interface OramaSearchButton { diff --git a/packages/ui-stencil/src/components/orama-search-box/orama-search-box.tsx b/packages/ui-stencil/src/components/orama-search-box/orama-search-box.tsx index 25693f80..da7cde68 100644 --- a/packages/ui-stencil/src/components/orama-search-box/orama-search-box.tsx +++ b/packages/ui-stencil/src/components/orama-search-box/orama-search-box.tsx @@ -36,30 +36,99 @@ import type { TThemeOverrides } from '@/config/theme' export class SearchBox { @Element() htmlElement!: HTMLElement + /** + * Component theme customization + */ @Prop() themeConfig?: Partial + /** + * Component color schema + */ @Prop() colorScheme?: ColorScheme = 'light' + /** + * Orama Index configuration + * + * note: It will be overrided by clientInstance property + */ @Prop() index?: CloudIndexConfig + /** + * Orama Instance + */ @Prop() clientInstance?: OramaClient | AnyOrama @Prop({ mutable: true }) open = false + /** + * Index result property to + */ @Prop() facetProperty?: string + /** + * Used to map dataset result properties to the expected SearchBox properties + */ @Prop() resultMap?: Partial = {} + /** + * Used to provide source base URL for the Search Results + */ @Prop() sourceBaseUrl?: string + /** + * Used to provide linkRel to search result links + */ @Prop() linksTarget?: string + /** + * Used to provide linkRel to search result links + */ @Prop() linksRel?: string + /** + * Used to map Chat result sources to expected Orama Chat properties + */ @Prop() sourcesMap?: SourcesMap + /** + * Disables chat capabilities + */ @Prop() disableChat?: boolean = false + /** + * This component can behave either as Modal or a Embed component. + * For Modal, a new absolute panel will be displayed on top. + * For Embed, Orama Search Box will be displayed as a inline component. + */ @Prop() layout?: 'modal' | 'embed' = 'modal' + /** + * Options for highlights of Search Result titles + */ @Prop() highlightTitle?: HighlightOptions | false = false + /** + * Options for highlights of Search Result descriptions + */ @Prop() highlightDescription?: HighlightOptions | false = false - - // TODO: remove it in favor of dictionary + /** + * @deprecated it will be removed on next releases + * Placeholder for chat input + */ @Prop() placeholder?: string + /** + * Placeholder for chat input + */ @Prop() chatPlaceholder?: string + /** + * Placeholder for search input + */ @Prop() searchPlaceholder?: string + /** + * List of initial questions for Orama Chat + */ @Prop() suggestions?: string[] + /** + * Parameters forwarded to Orama Client. + */ @Prop() searchParams?: SearchParams> + /** + * Callback function used on every AI Chat link title + */ @Prop() chatMarkdownLinkTitle?: ChatMarkdownLinkTitle + /** + * Callback function used on every AI Chat link + */ @Prop() chatMarkdownLinkHref?: ChatMarkdownLinkHref + /** + * Callback function used on every AI Chat link target + */ @Prop() chatMarkdownLinkTarget?: ChatMarkdownLinkTarget @State() componentID = generateRandomID('search-box') diff --git a/packages/ui-stencil/src/components/orama-search-box/readme.md b/packages/ui-stencil/src/components/orama-search-box/readme.md index 4dd62627..8ac8a091 100644 --- a/packages/ui-stencil/src/components/orama-search-box/readme.md +++ b/packages/ui-stencil/src/components/orama-search-box/readme.md @@ -5,31 +5,31 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------------ | ----------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- | -| `chatMarkdownLinkHref` | -- | | `({ text, href }: { text: string; href: string; }) => string` | `undefined` | -| `chatMarkdownLinkTarget` | -- | | `({ text, href }: { text: string; href: string; }) => string` | `undefined` | -| `chatMarkdownLinkTitle` | -- | | `({ text, href }: { text: string; href: string; }) => string` | `undefined` | -| `chatPlaceholder` | `chat-placeholder` | | `string` | `undefined` | -| `clientInstance` | -- | | `FunctionComponents & Internals & ArrayCallbackComponents & OramaID & { plugins: OramaPlugin[]; } \| OramaClient` | `undefined` | -| `colorScheme` | `color-scheme` | | `"dark" \| "light" \| "system"` | `'light'` | -| `disableChat` | `disable-chat` | | `boolean` | `false` | -| `facetProperty` | `facet-property` | | `string` | `undefined` | -| `highlightDescription` | `highlight-description` | | `HighlightOptions \| boolean` | `false` | -| `highlightTitle` | `highlight-title` | | `HighlightOptions \| boolean` | `false` | -| `index` | -- | | `{ api_key: string; endpoint: string; }` | `undefined` | -| `layout` | `layout` | | `"embed" \| "modal"` | `'modal'` | -| `linksRel` | `links-rel` | | `string` | `undefined` | -| `linksTarget` | `links-target` | | `string` | `undefined` | -| `open` | `open` | | `boolean` | `false` | -| `placeholder` | `placeholder` | | `string` | `undefined` | -| `resultMap` | -- | | `{ section?: string \| ResultMapRenderFunction; title?: string \| ResultMapRenderFunction; path?: string \| ResultMapRenderFunction; description?: string \| ResultMapRenderFunction; }` | `{}` | -| `searchParams` | -- | | `SearchParamsFullText>, never> \| SearchParamsHybrid>, never> \| SearchParamsVector>, never>` | `undefined` | -| `searchPlaceholder` | `search-placeholder` | | `string` | `undefined` | -| `sourceBaseUrl` | `source-base-url` | | `string` | `undefined` | -| `sourcesMap` | -- | | `{ title?: string; path?: string; description?: string; }` | `undefined` | -| `suggestions` | -- | | `string[]` | `undefined` | -| `themeConfig` | -- | | `{ typography?: DeepPartial<{ '--font-primary': string; }>; colors?: DeepPartial<{ gray50: string; gray100: string; gray200: string; gray300: string; gray400: string; gray500: string; gray600: string; gray700: string; gray800: string; gray900: string; gray950: string; purple100: string; purple200: string; purple300: string; purple500: string; purple600: string; purple700: string; light: { "--text-color-primary": string; "--text-color-secondary": string; "--text-color-tertiary": string; "--text-color-accent": string; "--text-color-inactive": string; "--text-color-reverse": string; "--background-color-primary": string; "--background-color-secondary": string; "--background-color-tertiary": string; "--background-color-fourth": string; "--background-color-reverse": string; "--border-color-primary": string; "--border-color-secondary": string; "--border-color-tertiary": string; "--border-color-accent": string; "--icon-color-primary": string; "--icon-color-secondary": string; "--icon-color-tertiary": string; "--icon-color-inactive": string; "--icon-color-accent": string; "--shadow-color-primary": string; "--button-text-color-primary": string; "--button-text-color-secondary": string; "--button-text-color-inactive": string; "--button-background-color-primary": string; "--button-background-color-secondary": string; "--button-background-color-secondary-hover": string; "--button-background-color-inactive": string; "--button-border-color-secondary": string; "--backdrop-background-color-primary": string; "--chat-button-border-color-gradientOne": string; "--chat-button-border-color-gradientTwo": string; "--chat-button-border-color-gradientThree": string; "--chat-button-border-color-gradientFour": string; "--chat-button-border-color-gradientFive": string; "--chat-button-border-color-gradientSix": string; "--chat-button-background-color-gradientOne": string; "--chat-button-background-color-gradientTwo": string; }; dark: { "--text-color-primary": string; "--text-color-secondary": string; "--text-color-tertiary": string; "--text-color-accent": string; "--text-color-inactive": string; "--text-color-reverse": string; "--background-color-primary": string; "--background-color-secondary": string; "--background-color-tertiary": string; "--background-color-fourth": string; "--background-color-reverse": string; "--border-color-primary": string; "--border-color-secondary": string; "--border-color-tertiary": string; "--border-color-accent": string; "--icon-color-primary": string; "--icon-color-secondary": string; "--icon-color-tertiary": string; "--icon-color-inactive": string; "--icon-color-accent": string; "--shadow-color-primary": string; "--button-text-color-primary": string; "--button-text-color-secondary": string; "--button-background-color-primary": string; "--button-background-color-secondary": string; "--button-background-color-secondary-hover": string; "--button-border-color-secondary": string; "--backdrop-background-color-primary": string; "--chat-button-border-color-gradientOne": string; "--chat-button-border-color-gradientTwo": string; "--chat-button-border-color-gradientThree": string; "--chat-button-border-color-gradientFour": string; "--chat-button-border-color-gradientFive": string; "--chat-button-border-color-gradientSix": string; "--chat-button-background-color-gradientOne": string; "--chat-button-background-color-gradientTwo": string; }; }>; }` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------------------ | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `chatMarkdownLinkHref` | -- | Callback function used on every AI Chat link | `({ text, href }: { text: string; href: string; }) => string` | `undefined` | +| `chatMarkdownLinkTarget` | -- | Callback function used on every AI Chat link target | `({ text, href }: { text: string; href: string; }) => string` | `undefined` | +| `chatMarkdownLinkTitle` | -- | Callback function used on every AI Chat link title | `({ text, href }: { text: string; href: string; }) => string` | `undefined` | +| `chatPlaceholder` | `chat-placeholder` | Placeholder for chat input | `string` | `undefined` | +| `clientInstance` | -- | Orama Instance | `FunctionComponents & Internals & ArrayCallbackComponents & OramaID & { plugins: OramaPlugin[]; } \| OramaClient` | `undefined` | +| `colorScheme` | `color-scheme` | Component color schema | `"dark" \| "light" \| "system"` | `'light'` | +| `disableChat` | `disable-chat` | Disables chat capabilities | `boolean` | `false` | +| `facetProperty` | `facet-property` | Index result property to | `string` | `undefined` | +| `highlightDescription` | `highlight-description` | Options for highlights of Search Result descriptions | `HighlightOptions \| boolean` | `false` | +| `highlightTitle` | `highlight-title` | Options for highlights of Search Result titles | `HighlightOptions \| boolean` | `false` | +| `index` | -- | Orama Index configuration note: It will be overrided by clientInstance property | `{ api_key: string; endpoint: string; }` | `undefined` | +| `layout` | `layout` | This component can behave either as Modal or a Embed component. For Modal, a new absolute panel will be displayed on top. For Embed, Orama Search Box will be displayed as a inline component. | `"embed" \| "modal"` | `'modal'` | +| `linksRel` | `links-rel` | Used to provide linkRel to search result links | `string` | `undefined` | +| `linksTarget` | `links-target` | Used to provide linkRel to search result links | `string` | `undefined` | +| `open` | `open` | | `boolean` | `false` | +| `placeholder` | `placeholder` | **[DEPRECATED]** it will be removed on next releases Placeholder for chat input

| `string` | `undefined` | +| `resultMap` | -- | Used to map dataset result properties to the expected SearchBox properties | `{ section?: string \| ResultMapRenderFunction; title?: string \| ResultMapRenderFunction; path?: string \| ResultMapRenderFunction; description?: string \| ResultMapRenderFunction; }` | `{}` | +| `searchParams` | -- | Parameters forwarded to Orama Client. | `SearchParamsFullText>, never> \| SearchParamsHybrid>, never> \| SearchParamsVector>, never>` | `undefined` | +| `searchPlaceholder` | `search-placeholder` | Placeholder for search input | `string` | `undefined` | +| `sourceBaseUrl` | `source-base-url` | Used to provide source base URL for the Search Results | `string` | `undefined` | +| `sourcesMap` | -- | Used to map Chat result sources to expected Orama Chat properties | `{ title?: string; path?: string; description?: string; }` | `undefined` | +| `suggestions` | -- | List of initial questions for Orama Chat | `string[]` | `undefined` | +| `themeConfig` | -- | Component theme customization | `{ typography?: DeepPartial<{ '--font-primary': string; }>; colors?: DeepPartial<{ gray50: string; gray100: string; gray200: string; gray300: string; gray400: string; gray500: string; gray600: string; gray700: string; gray800: string; gray900: string; gray950: string; purple100: string; purple200: string; purple300: string; purple500: string; purple600: string; purple700: string; light: { "--text-color-primary": string; "--text-color-secondary": string; "--text-color-tertiary": string; "--text-color-accent": string; "--text-color-inactive": string; "--text-color-reverse": string; "--background-color-primary": string; "--background-color-secondary": string; "--background-color-tertiary": string; "--background-color-fourth": string; "--background-color-reverse": string; "--background-color-accent": string; "--border-color-primary": string; "--border-color-secondary": string; "--border-color-tertiary": string; "--border-color-accent": string; "--icon-color-primary": string; "--icon-color-secondary": string; "--icon-color-tertiary": string; "--icon-color-inactive": string; "--icon-color-reverse": string; "--shadow-color-primary": string; "--button-text-color-primary": string; "--button-text-color-secondary": string; "--button-background-color-primary": string; "--button-background-color-secondary": string; "--button-background-color-secondary-hover": string; "--button-border-color-secondary": string; "--backdrop-background-color-primary": string; "--chat-button-border-color-gradientOne": string; "--chat-button-border-color-gradientTwo": string; "--chat-button-border-color-gradientThree": string; "--chat-button-border-color-gradientFour": string; "--chat-button-border-color-gradientFive": string; "--chat-button-border-color-gradientSix": string; "--chat-button-background-color-gradientOne": string; "--chat-button-background-color-gradientTwo": string; }; dark: { "--text-color-primary": string; "--text-color-secondary": string; "--text-color-tertiary": string; "--text-color-accent": string; "--text-color-inactive": string; "--text-color-reverse": string; "--background-color-primary": string; "--background-color-secondary": string; "--background-color-tertiary": string; "--background-color-fourth": string; "--background-color-reverse": string; "--background-color-accent": string; "--border-color-primary": string; "--border-color-secondary": string; "--border-color-tertiary": string; "--border-color-accent": string; "--icon-color-primary": string; "--icon-color-secondary": string; "--icon-color-tertiary": string; "--icon-color-inactive": string; "--icon-color-reverse": string; "--shadow-color-primary": string; "--button-text-color-primary": string; "--button-text-color-secondary": string; "--button-background-color-primary": string; "--button-background-color-secondary": string; "--button-background-color-secondary-hover": string; "--button-border-color-secondary": string; "--backdrop-background-color-primary": string; "--chat-button-border-color-gradientOne": string; "--chat-button-border-color-gradientTwo": string; "--chat-button-border-color-gradientThree": string; "--chat-button-border-color-gradientFour": string; "--chat-button-border-color-gradientFive": string; "--chat-button-border-color-gradientSix": string; "--chat-button-background-color-gradientOne": string; "--chat-button-background-color-gradientTwo": string; }; }>; }` | `undefined` | ## Events diff --git a/packages/ui-stencil/src/components/orama-search-button/readme.md b/packages/ui-stencil/src/components/orama-search-button/readme.md index 920e0782..e440f23c 100644 --- a/packages/ui-stencil/src/components/orama-search-button/readme.md +++ b/packages/ui-stencil/src/components/orama-search-button/readme.md @@ -7,11 +7,11 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------- | -------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- | -| `colorScheme` | `color-scheme` | | `"dark" \| "light" \| "system"` | `'light'` | -| `size` | `size` | | `"large" \| "medium" \| "small"` | `'medium'` | -| `themeConfig` | -- | | `{ typography?: DeepPartial<{ '--font-primary': string; }>; colors?: DeepPartial<{ gray50: string; gray100: string; gray200: string; gray300: string; gray400: string; gray500: string; gray600: string; gray700: string; gray800: string; gray900: string; gray950: string; purple100: string; purple200: string; purple300: string; purple500: string; purple600: string; purple700: string; light: { "--text-color-primary": string; "--text-color-secondary": string; "--text-color-tertiary": string; "--text-color-accent": string; "--text-color-inactive": string; "--text-color-reverse": string; "--background-color-primary": string; "--background-color-secondary": string; "--background-color-tertiary": string; "--background-color-fourth": string; "--background-color-reverse": string; "--border-color-primary": string; "--border-color-secondary": string; "--border-color-tertiary": string; "--border-color-accent": string; "--icon-color-primary": string; "--icon-color-secondary": string; "--icon-color-tertiary": string; "--icon-color-inactive": string; "--icon-color-accent": string; "--shadow-color-primary": string; "--button-text-color-primary": string; "--button-text-color-secondary": string; "--button-text-color-inactive": string; "--button-background-color-primary": string; "--button-background-color-secondary": string; "--button-background-color-secondary-hover": string; "--button-background-color-inactive": string; "--button-border-color-secondary": string; "--backdrop-background-color-primary": string; "--chat-button-border-color-gradientOne": string; "--chat-button-border-color-gradientTwo": string; "--chat-button-border-color-gradientThree": string; "--chat-button-border-color-gradientFour": string; "--chat-button-border-color-gradientFive": string; "--chat-button-border-color-gradientSix": string; "--chat-button-background-color-gradientOne": string; "--chat-button-background-color-gradientTwo": string; }; dark: { "--text-color-primary": string; "--text-color-secondary": string; "--text-color-tertiary": string; "--text-color-accent": string; "--text-color-inactive": string; "--text-color-reverse": string; "--background-color-primary": string; "--background-color-secondary": string; "--background-color-tertiary": string; "--background-color-fourth": string; "--background-color-reverse": string; "--border-color-primary": string; "--border-color-secondary": string; "--border-color-tertiary": string; "--border-color-accent": string; "--icon-color-primary": string; "--icon-color-secondary": string; "--icon-color-tertiary": string; "--icon-color-inactive": string; "--icon-color-accent": string; "--shadow-color-primary": string; "--button-text-color-primary": string; "--button-text-color-secondary": string; "--button-background-color-primary": string; "--button-background-color-secondary": string; "--button-background-color-secondary-hover": string; "--button-border-color-secondary": string; "--backdrop-background-color-primary": string; "--chat-button-border-color-gradientOne": string; "--chat-button-border-color-gradientTwo": string; "--chat-button-border-color-gradientThree": string; "--chat-button-border-color-gradientFour": string; "--chat-button-border-color-gradientFive": string; "--chat-button-border-color-gradientSix": string; "--chat-button-background-color-gradientOne": string; "--chat-button-background-color-gradientTwo": string; }; }>; }` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------- | -------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `colorScheme` | `color-scheme` | | `"dark" \| "light" \| "system"` | `'light'` | +| `size` | `size` | | `"large" \| "medium" \| "small"` | `'medium'` | +| `themeConfig` | -- | | `{ typography?: DeepPartial<{ '--font-primary': string; }>; colors?: DeepPartial<{ gray50: string; gray100: string; gray200: string; gray300: string; gray400: string; gray500: string; gray600: string; gray700: string; gray800: string; gray900: string; gray950: string; purple100: string; purple200: string; purple300: string; purple500: string; purple600: string; purple700: string; light: { "--text-color-primary": string; "--text-color-secondary": string; "--text-color-tertiary": string; "--text-color-accent": string; "--text-color-inactive": string; "--text-color-reverse": string; "--background-color-primary": string; "--background-color-secondary": string; "--background-color-tertiary": string; "--background-color-fourth": string; "--background-color-reverse": string; "--background-color-accent": string; "--border-color-primary": string; "--border-color-secondary": string; "--border-color-tertiary": string; "--border-color-accent": string; "--icon-color-primary": string; "--icon-color-secondary": string; "--icon-color-tertiary": string; "--icon-color-inactive": string; "--icon-color-reverse": string; "--shadow-color-primary": string; "--button-text-color-primary": string; "--button-text-color-secondary": string; "--button-background-color-primary": string; "--button-background-color-secondary": string; "--button-background-color-secondary-hover": string; "--button-border-color-secondary": string; "--backdrop-background-color-primary": string; "--chat-button-border-color-gradientOne": string; "--chat-button-border-color-gradientTwo": string; "--chat-button-border-color-gradientThree": string; "--chat-button-border-color-gradientFour": string; "--chat-button-border-color-gradientFive": string; "--chat-button-border-color-gradientSix": string; "--chat-button-background-color-gradientOne": string; "--chat-button-background-color-gradientTwo": string; }; dark: { "--text-color-primary": string; "--text-color-secondary": string; "--text-color-tertiary": string; "--text-color-accent": string; "--text-color-inactive": string; "--text-color-reverse": string; "--background-color-primary": string; "--background-color-secondary": string; "--background-color-tertiary": string; "--background-color-fourth": string; "--background-color-reverse": string; "--background-color-accent": string; "--border-color-primary": string; "--border-color-secondary": string; "--border-color-tertiary": string; "--border-color-accent": string; "--icon-color-primary": string; "--icon-color-secondary": string; "--icon-color-tertiary": string; "--icon-color-inactive": string; "--icon-color-reverse": string; "--shadow-color-primary": string; "--button-text-color-primary": string; "--button-text-color-secondary": string; "--button-background-color-primary": string; "--button-background-color-secondary": string; "--button-background-color-secondary-hover": string; "--button-border-color-secondary": string; "--backdrop-background-color-primary": string; "--chat-button-border-color-gradientOne": string; "--chat-button-border-color-gradientTwo": string; "--chat-button-border-color-gradientThree": string; "--chat-button-border-color-gradientFour": string; "--chat-button-border-color-gradientFive": string; "--chat-button-border-color-gradientSix": string; "--chat-button-background-color-gradientOne": string; "--chat-button-background-color-gradientTwo": string; }; }>; }` | `undefined` | ## Dependencies diff --git a/packages/ui-stencil/src/config/colors.ts b/packages/ui-stencil/src/config/colors.ts index ca57e778..7f9e52f1 100644 --- a/packages/ui-stencil/src/config/colors.ts +++ b/packages/ui-stencil/src/config/colors.ts @@ -29,33 +29,32 @@ export default { "--background-color-tertiary": "#eee9f6", "--background-color-fourth": "#efefef", "--background-color-reverse": "black", + "--background-color-accent": "#432d77", "--border-color-primary": "#dadada", "--border-color-secondary": "#efefef", "--border-color-tertiary": "#151515", - "--border-color-accent": "#ae8ff7", + "--border-color-accent": "#432d77", "--icon-color-primary": "#151515", "--icon-color-secondary": "#dadada", "--icon-color-tertiary": "#838289", "--icon-color-inactive": "#99989d", - "--icon-color-accent": "#8152ee", + "--icon-color-reverse": "#fbfbfb", "--shadow-color-primary": "white", - "--button-text-color-primary": "#f7f6f9", + "--button-text-color-primary": "#fbfbfb", "--button-text-color-secondary": "#838289", - "--button-text-color-inactive": "#99989d", - "--button-background-color-primary": "#8152ee", + "--button-background-color-primary": "#432d77", "--button-background-color-secondary": "white", "--button-background-color-secondary-hover": "#eee9f6", - "--button-background-color-inactive": "#efefef", "--button-border-color-secondary": "#dadada", - "--backdrop-background-color-primary": "rgba(0, 0, 0, 0.7)", - "--chat-button-border-color-gradientOne": "#eee9f6", - "--chat-button-border-color-gradientTwo": "#eee9f6", - "--chat-button-border-color-gradientThree": "#ae8ff7", - "--chat-button-border-color-gradientFour": "#ae8ff7", - "--chat-button-border-color-gradientFive": "#eee9f6", - "--chat-button-border-color-gradientSix": "#eee9f6", - "--chat-button-background-color-gradientOne": "#ae8ff7", - "--chat-button-background-color-gradientTwo": "rgba(255, 255, 255, 0)" + "--backdrop-background-color-primary": "rgba(251, 251, 251, 0.7)", + "--chat-button-border-color-gradientOne": "transparent", + "--chat-button-border-color-gradientTwo": "transparent", + "--chat-button-border-color-gradientThree": "#432d77", + "--chat-button-border-color-gradientFour": "#432d77", + "--chat-button-border-color-gradientFive": "transparent", + "--chat-button-border-color-gradientSix": "transparent", + "--chat-button-background-color-gradientOne": "#432d77", + "--chat-button-background-color-gradientTwo": "transparent" }, "dark": { "--text-color-primary": "#fbfbfb", @@ -69,6 +68,7 @@ export default { "--background-color-tertiary": "#212121", "--background-color-fourth": "#2e2e2e", "--background-color-reverse": "white", + "--background-color-accent": "#8152ee", "--border-color-primary": "#2e2e2e", "--border-color-secondary": "#151515", "--border-color-tertiary": "#afafb1", @@ -77,22 +77,22 @@ export default { "--icon-color-secondary": "#dadada", "--icon-color-tertiary": "#838289", "--icon-color-inactive": "#99989d", - "--icon-color-accent": "#8152ee", + "--icon-color-reverse": "#050505", "--shadow-color-primary": "black", - "--button-text-color-primary": "#efefef", + "--button-text-color-primary": "#fbfbfb", "--button-text-color-secondary": "#99989d", - "--button-background-color-primary": "#432d77", + "--button-background-color-primary": "#8152ee", "--button-background-color-secondary": "#151515", "--button-background-color-secondary-hover": "#212121", "--button-border-color-secondary": "#2e2e2e", - "--backdrop-background-color-primary": "rgba(0, 0, 0, 0.7)", - "--chat-button-border-color-gradientOne": "#212121", - "--chat-button-border-color-gradientTwo": "#212121", - "--chat-button-border-color-gradientThree": "#ae8ff7", + "--backdrop-background-color-primary": "rgba(5, 5, 5, 0.7)", + "--chat-button-border-color-gradientOne": "transparent", + "--chat-button-border-color-gradientTwo": "transparent", + "--chat-button-border-color-gradientThree": "#8152ee", "--chat-button-border-color-gradientFour": "#8152ee", - "--chat-button-border-color-gradientFive": "#212121", - "--chat-button-border-color-gradientSix": "#212121", - "--chat-button-background-color-gradientOne": "#6a4bb2", - "--chat-button-background-color-gradientTwo": "rgba(106, 75, 178, 0)" + "--chat-button-border-color-gradientFive": "transparent", + "--chat-button-border-color-gradientSix": "transparent", + "--chat-button-background-color-gradientOne": "#8152ee", + "--chat-button-background-color-gradientTwo": "transparent" } }; \ No newline at end of file