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