let5see/clawdbot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(a2ui): improve modal styling

Browse Source
This commit is contained in:
Peter Steinberger
2025-12-20 11:12:11 +00:00
parent cd5809d11f
commit 13124542cf
3 changed files with 72 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
apps/shared/ClawdisKit/Sources/ClawdisKit/Resources/CanvasA2UI/a2ui.bundle.js
View File

@@ -17566,6 +17566,27 @@ function instanceOf(tagName) {
//#endregion //#endregion
//#region apps/shared/ClawdisKit/Tools/CanvasA2UI/bootstrap.js //#region apps/shared/ClawdisKit/Tools/CanvasA2UI/bootstrap.js
const modalStyles = i`
dialog {
padding: 24px;
border: none;
background: none;
display: flex;
align-items: center;
justify-content: center;
max-width: calc(100vw - 32px);
max-height: calc(100vh - 32px);
}
dialog::backdrop {
background: rgba(5, 8, 16, 0.65);
backdrop-filter: blur(6px);
}
`;
const modalElement = customElements.get("a2ui-modal");
if (modalElement && Array.isArray(modalElement.styles)) {
modalElement.styles = [...modalElement.styles, modalStyles];
}
const empty = Object.freeze({}); const empty = Object.freeze({});
const emptyClasses = () => ({}); const emptyClasses = () => ({});
const textHintStyles = () => ({ const textHintStyles = () => ({
@@ -17689,6 +17710,14 @@ const clawdisTheme = {
padding: "14px", padding: "14px",
boxShadow: cardShadow boxShadow: cardShadow
}, },
Modal: {
background: "rgba(12, 16, 24, 0.92)",
border: "1px solid rgba(255,255,255,.12)",
borderRadius: "16px",
padding: "16px",
boxShadow: "0 30px 80px rgba(0,0,0,.6)",
width: "min(520px, calc(100vw - 48px))"
},
Column: { gap: "10px" }, Column: { gap: "10px" },
Row: { Row: {
gap: "10px", gap: "10px",

12
apps/shared/ClawdisKit/Tests/ClawdisKitTests/CanvasA2UIActionTests.swift
View File

@@ -52,4 +52,16 @@ import Testing
#expect(js.contains("blur(${r(statusBlur)})")) #expect(js.contains("blur(${r(statusBlur)})"))
#expect(js.contains("box-shadow: ${r(statusShadow)}")) #expect(js.contains("box-shadow: ${r(statusShadow)}"))
} }
@Test func a2uiBundleStylesModalBackdrop() throws {
guard let url = ClawdisKitResources.bundle.url(forResource: "a2ui.bundle", withExtension: "js")
else {
throw NSError(domain: "Tests", code: 1, userInfo: [
NSLocalizedDescriptionKey: "Missing resource a2ui.bundle.js",
])
}
let js = try String(contentsOf: url, encoding: .utf8)
#expect(js.contains("::backdrop"))
#expect(js.contains("backdrop-filter: blur(6px)"))
}
} }

31
apps/shared/ClawdisKit/Tools/CanvasA2UI/bootstrap.js vendored
View File

@@ -6,6 +6,29 @@ import { v0_8 } from "@a2ui/lit";
import "@a2ui/lit/ui"; import "@a2ui/lit/ui";
import { themeContext } from "@clawdis/a2ui-theme-context"; import { themeContext } from "@clawdis/a2ui-theme-context";
const modalStyles = css`
dialog {
padding: 24px;
border: none;
background: none;
display: flex;
align-items: center;
justify-content: center;
max-width: calc(100vw - 32px);
max-height: calc(100vh - 32px);
}
dialog::backdrop {
background: rgba(5, 8, 16, 0.65);
backdrop-filter: blur(6px);
}
`;
const modalElement = customElements.get("a2ui-modal");
if (modalElement && Array.isArray(modalElement.styles)) {
modalElement.styles = [...modalElement.styles, modalStyles];
}
const empty = Object.freeze({}); const empty = Object.freeze({});
const emptyClasses = () => ({}); const emptyClasses = () => ({});
const textHintStyles = () => ({ h1: {}, h2: {}, h3: {}, h4: {}, h5: {}, body: {}, caption: {} }); const textHintStyles = () => ({ h1: {}, h2: {}, h3: {}, h4: {}, h5: {}, body: {}, caption: {} });
@@ -93,6 +116,14 @@ const clawdisTheme = {
padding: "14px", padding: "14px",
boxShadow: cardShadow, boxShadow: cardShadow,
}, },
Modal: {
background: "rgba(12, 16, 24, 0.92)",
border: "1px solid rgba(255,255,255,.12)",
borderRadius: "16px",
padding: "16px",
boxShadow: "0 30px 80px rgba(0,0,0,.6)",
width: "min(520px, calc(100vw - 48px))",
},
Column: { gap: "10px" }, Column: { gap: "10px" },
Row: { gap: "10px", alignItems: "center" }, Row: { gap: "10px", alignItems: "center" },
Divider: { opacity: "0.25" }, Divider: { opacity: "0.25" },