1 line
16 KiB
Plaintext
1 line
16 KiB
Plaintext
{"version":3,"file":"litTheme.mjs","names":[],"sources":["../../../src/react-renderer/theme/litTheme.ts"],"sourcesContent":["import type { Types } from \"@a2ui/lit/0.8\";\n\n/**\n * Default theme for A2UI React components.\n *\n * This theme uses the same CSS class conventions as the Lit renderer,\n * ensuring visual consistency between React and Lit implementations.\n *\n * IMPORTANT: This theme must be kept in sync with the Lit renderer's internal\n * styling. If Lit components change their class maps, this file must be updated\n * to match. Ideally, Lit would export its default theme for direct import.\n *\n * Requires the structural styles to be injected:\n * @example\n * ```tsx\n * import { A2UIProvider } from '@a2ui/react';\n * import { injectStyles } from '@a2ui/react/styles';\n *\n * // Inject structural CSS at app startup\n * injectStyles();\n *\n * function App() {\n * return (\n * <A2UIProvider>\n * <A2UIRenderer surfaceId=\"main\" />\n * </A2UIProvider>\n * );\n * }\n * ```\n */\n\n// =============================================================================\n// Element Styles (used for markdown rendering and form elements)\n// =============================================================================\n\nconst elementA = {\n \"typography-f-sf\": true,\n \"typography-fs-n\": true,\n \"typography-w-500\": true,\n \"layout-as-n\": true,\n \"layout-dis-iflx\": true,\n \"layout-al-c\": true,\n \"typography-td-none\": true,\n \"color-c-p40\": true,\n};\n\nconst elementAudio = {\n \"layout-w-100\": true,\n};\n\nconst elementBody = {\n \"typography-f-s\": true,\n \"typography-fs-n\": true,\n \"typography-w-400\": true,\n \"layout-mt-0\": true,\n \"layout-mb-2\": true,\n \"typography-sz-bm\": true,\n \"color-c-n10\": true,\n};\n\nconst elementButton = {\n \"typography-f-sf\": true,\n \"typography-fs-n\": true,\n \"typography-w-500\": true,\n \"layout-pt-3\": true,\n \"layout-pb-3\": true,\n \"layout-pl-5\": true,\n \"layout-pr-5\": true,\n \"layout-mb-1\": true,\n \"border-br-16\": true,\n \"border-bw-0\": true,\n \"border-c-n70\": true,\n \"border-bs-s\": true,\n \"color-bgc-s30\": true,\n \"behavior-ho-80\": true,\n};\n\nconst elementHeading = {\n \"typography-f-sf\": true,\n \"typography-fs-n\": true,\n \"typography-w-500\": true,\n \"layout-mt-0\": true,\n \"layout-mb-2\": true,\n};\n\nconst elementIframe = {\n \"behavior-sw-n\": true,\n};\n\nconst elementInput = {\n \"typography-f-sf\": true,\n \"typography-fs-n\": true,\n \"typography-w-400\": true,\n \"layout-pl-4\": true,\n \"layout-pr-4\": true,\n \"layout-pt-2\": true,\n \"layout-pb-2\": true,\n \"border-br-6\": true,\n \"border-bw-1\": true,\n \"color-bc-s70\": true,\n \"border-bs-s\": true,\n \"layout-as-n\": true,\n \"color-c-n10\": true,\n};\n\nconst elementP = {\n \"typography-f-s\": true,\n \"typography-fs-n\": true,\n \"typography-w-400\": true,\n \"layout-m-0\": true,\n \"typography-sz-bm\": true,\n \"layout-as-n\": true,\n \"color-c-n10\": true,\n};\n\nconst elementList = {\n \"typography-f-s\": true,\n \"typography-fs-n\": true,\n \"typography-w-400\": true,\n \"layout-m-0\": true,\n \"typography-sz-bm\": true,\n \"layout-as-n\": true,\n \"color-c-n10\": true,\n};\n\nconst elementPre = {\n \"typography-f-c\": true,\n \"typography-fs-n\": true,\n \"typography-w-400\": true,\n \"typography-sz-bm\": true,\n \"typography-ws-p\": true,\n \"layout-as-n\": true,\n};\n\nconst elementTextarea = {\n ...elementInput,\n \"layout-r-none\": true,\n \"layout-fs-c\": true,\n};\n\nconst elementVideo = {\n \"layout-el-cv\": true,\n};\n\n// =============================================================================\n// Theme Export\n// =============================================================================\n\nexport const litTheme: Types.Theme = {\n // ===========================================================================\n // Additional Styles — map to CopilotKit CSS variables\n // ===========================================================================\n\n additionalStyles: {\n Button: {\n background: \"var(--primary, oklch(0.205 0 0))\",\n color: \"var(--primary-foreground, oklch(0.985 0 0))\",\n \"border-radius\": \"calc(var(--radius, 0.625rem) - 2px)\",\n cursor: \"pointer\",\n width: \"100%\",\n \"--n-10\": \"var(--primary-foreground, oklch(0.985 0 0))\",\n \"--n-35\": \"var(--primary-foreground, oklch(0.985 0 0))\",\n \"--n-60\": \"var(--primary-foreground, oklch(0.985 0 0))\",\n },\n Card: {\n background: \"var(--card, oklch(1 0 0))\",\n border: \"1px solid var(--border, oklch(0.922 0 0))\",\n \"border-radius\": \"var(--radius, 0.625rem)\",\n },\n // Applied directly to <input>/<textarea>\n TextField: {\n \"background-color\": \"var(--background, oklch(1 0 0))\",\n \"border-color\": \"var(--input, oklch(0.922 0 0))\",\n color: \"var(--foreground, oklch(0.145 0 0))\",\n \"border-radius\": \"var(--radius, 0.625rem)\",\n },\n // Applied to <section> container — palette vars cascade to <input type=\"checkbox\"> inside\n CheckBox: {\n \"--p-100\": \"var(--background, oklch(1 0 0))\",\n \"--p-60\": \"var(--input, oklch(0.922 0 0))\",\n \"--n-30\": \"var(--foreground, oklch(0.145 0 0))\",\n },\n // Applied directly to <input>\n DateTimeInput: {\n \"background-color\": \"var(--background, oklch(1 0 0))\",\n \"border-color\": \"var(--input, oklch(0.922 0 0))\",\n color: \"var(--foreground, oklch(0.145 0 0))\",\n \"border-radius\": \"var(--radius, 0.625rem)\",\n },\n Modal: {\n \"--p-100\": \"var(--card, oklch(1 0 0))\",\n \"--p-80\": \"var(--border, oklch(0.922 0 0))\",\n \"border-radius\": \"var(--radius, 0.625rem)\",\n },\n // Applied to <section> wrapping markdown content\n Text: {\n color: \"var(--foreground, oklch(0.145 0 0))\",\n },\n },\n\n components: {\n // =========================================================================\n // Content Components\n // =========================================================================\n\n AudioPlayer: {},\n\n Divider: {},\n\n Icon: {},\n\n Image: {\n all: {\n \"border-br-5\": true,\n \"layout-el-cv\": true,\n \"layout-w-100\": true,\n \"layout-h-100\": true,\n },\n avatar: { \"is-avatar\": true },\n header: {},\n icon: {},\n largeFeature: {},\n mediumFeature: {},\n smallFeature: {},\n },\n\n Text: {\n all: {\n \"layout-w-100\": true,\n \"layout-g-2\": true,\n },\n h1: {\n \"typography-f-sf\": true,\n \"typography-v-r\": true,\n \"typography-w-400\": true,\n \"layout-m-0\": true,\n \"layout-p-0\": true,\n \"typography-sz-hs\": true,\n },\n h2: {\n \"typography-f-sf\": true,\n \"typography-v-r\": true,\n \"typography-w-400\": true,\n \"layout-m-0\": true,\n \"layout-p-0\": true,\n \"typography-sz-tl\": true,\n },\n h3: {\n \"typography-f-sf\": true,\n \"typography-v-r\": true,\n \"typography-w-400\": true,\n \"layout-m-0\": true,\n \"layout-p-0\": true,\n \"typography-sz-tl\": true,\n },\n h4: {\n \"typography-f-sf\": true,\n \"typography-v-r\": true,\n \"typography-w-400\": true,\n \"layout-m-0\": true,\n \"layout-p-0\": true,\n \"typography-sz-bl\": true,\n },\n h5: {\n \"typography-f-sf\": true,\n \"typography-v-r\": true,\n \"typography-w-400\": true,\n \"layout-m-0\": true,\n \"layout-p-0\": true,\n \"typography-sz-bm\": true,\n },\n body: {},\n caption: {},\n },\n\n Video: {\n \"border-br-5\": true,\n \"layout-el-cv\": true,\n },\n\n // =========================================================================\n // Layout Components\n // =========================================================================\n\n Card: {\n \"border-br-9\": true,\n \"layout-p-4\": true,\n \"color-bgc-n100\": true,\n },\n\n Column: {\n \"layout-g-2\": true,\n },\n\n List: {\n \"layout-g-4\": true,\n \"layout-p-2\": true,\n },\n\n Modal: {\n backdrop: {\n \"color-bbgc-p60_20\": true,\n },\n element: {\n \"border-br-2\": true,\n \"color-bgc-p100\": true,\n \"layout-p-4\": true,\n \"border-bw-1\": true,\n \"border-bs-s\": true,\n \"color-bc-p80\": true,\n },\n },\n\n Row: {\n \"layout-g-4\": true,\n },\n\n Tabs: {\n container: {},\n controls: {\n all: {},\n selected: {},\n },\n element: {},\n },\n\n // =========================================================================\n // Interactive Components\n // =========================================================================\n\n Button: {\n \"layout-pt-2\": true,\n \"layout-pb-2\": true,\n \"layout-pl-3\": true,\n \"layout-pr-3\": true,\n \"border-bw-0\": true,\n \"border-bs-s\": true,\n \"typography-w-400\": true,\n },\n\n CheckBox: {\n container: {\n \"layout-dsp-iflex\": true,\n \"layout-al-c\": true,\n },\n element: {\n \"layout-m-0\": true,\n \"layout-mr-2\": true,\n \"layout-p-2\": true,\n \"border-br-2\": true,\n \"border-bw-1\": true,\n \"border-bs-s\": true,\n \"color-bgc-p100\": true,\n \"color-bc-p60\": true,\n \"color-c-n30\": true,\n },\n label: {\n \"typography-f-sf\": true,\n \"typography-v-r\": true,\n \"typography-w-400\": true,\n \"layout-flx-1\": true,\n \"typography-sz-ll\": true,\n },\n },\n\n DateTimeInput: {\n container: {\n \"typography-sz-bm\": true,\n \"layout-w-100\": true,\n \"layout-g-2\": true,\n \"layout-dsp-flexvert\": true,\n },\n label: {\n \"color-c-p30\": true,\n \"typography-sz-bm\": true,\n },\n element: {\n \"layout-pt-2\": true,\n \"layout-pb-2\": true,\n \"layout-pl-3\": true,\n \"layout-pr-3\": true,\n \"border-bw-1\": true,\n \"border-bs-s\": true,\n },\n },\n\n MultipleChoice: {\n container: {},\n label: {},\n element: {},\n },\n\n Slider: {\n container: {},\n label: {},\n element: {},\n },\n\n TextField: {\n container: {\n \"typography-sz-bm\": true,\n \"layout-w-100\": true,\n \"layout-g-2\": true,\n \"layout-dsp-flexvert\": true,\n },\n label: {\n \"layout-flx-0\": true,\n },\n element: {\n \"typography-sz-bm\": true,\n \"layout-pt-2\": true,\n \"layout-pb-2\": true,\n \"layout-pl-3\": true,\n \"layout-pr-3\": true,\n \"border-bw-1\": true,\n \"border-bs-s\": true,\n },\n },\n },\n\n // ===========================================================================\n // HTML Elements (used for markdown rendering and raw HTML)\n // ===========================================================================\n\n elements: {\n a: elementA,\n audio: elementAudio,\n body: elementBody,\n button: elementButton,\n h1: elementHeading,\n h2: elementHeading,\n h3: elementHeading,\n h4: elementHeading,\n h5: elementHeading,\n iframe: elementIframe,\n input: elementInput,\n p: elementP,\n pre: elementPre,\n textarea: elementTextarea,\n video: elementVideo,\n },\n\n // ===========================================================================\n // Markdown (class arrays for markdown-it renderer)\n // ===========================================================================\n\n markdown: {\n p: Object.keys(elementP),\n h1: Object.keys(elementHeading),\n h2: Object.keys(elementHeading),\n h3: Object.keys(elementHeading),\n h4: Object.keys(elementHeading),\n h5: Object.keys(elementHeading),\n ul: Object.keys(elementList),\n ol: Object.keys(elementList),\n li: Object.keys(elementList),\n a: Object.keys(elementA),\n strong: [],\n em: [\"typography-fs-n\"],\n },\n};\n\n/**\n * Alias for litTheme - the default theme for A2UI React components.\n * @see litTheme\n */\nexport const defaultTheme = litTheme;\n"],"mappings":"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"} |