fix: themes, improve app components

Author: chase-moskal

package-lock.json

@@ -18,7 +18,7 @@
 		"@e280/kv": "^0.1.0",
 		"@e280/renraku": "^0.5.0",
 		"@e280/science": "^0.1.2",
-		"@e280/sly": "^0.2.0-28",
+		"@e280/sly": "^0.2.0-31",
 		"@e280/strata": "^0.2.0",
 		"@e280/stz": "^0.2.10",
 		"@noble/ed25519": "^3.0.0",

package.json

@@ -21,12 +21,10 @@ export default ssg.page(import.meta.url, async orb => ({
 		url: `https://${domain}/app/`,
 	},
 
-	head: html`
-		<link rel="stylesheet" href="${orb.url("/themes/basic.css")}"/>
-	`,
+	head: html``,
 
 	body: html`
-		<h1>Example app using Authlocal</h1>
+		<h1>Example app using Authlocal <small>${orb.packageVersion()}</small></h1>
 		<p>This page is a test for a typical federated auth integration with <a href="/">Authlocal</a></p>
 		<auth-button src="/"></auth-button>
 		<auth-user></auth-user>

s/app/index.html.ts

@@ -3,7 +3,7 @@ import {dom} from "@e280/sly"
 import {Auth} from "./auth.js"
 import {AuthOptions} from "./types.js"
 import {prepareViews} from "../ui/views.js"
-import {commonElements} from "../../../common/ui/views/views.js"
+import {commonElements, commonViews} from "../../../common/ui/views/views.js"
 
 export type AuthlocalInstallation = Awaited<ReturnType<typeof install>>
 
@@ -18,6 +18,6 @@ export async function install(options: AuthOptions) {
 		...elements,
 	})
 
-	return {auth, views}
+	return {auth, views: {...commonViews, ...views}}
 }
 

s/app/lib/parts/install.ts

@@ -8,43 +8,45 @@ export const basic = css`
 ${cssReset}
 
 @layer overlay {
-	[part="button"] {
-		all: unset;
-		font: inherit;
-		color: inherit;
-
-		cursor: pointer;
-		padding: 1em 0.5em;
-		border-radius: 0.5em;
-		border: 0.1em solid transparent;
-
-		font-weight: bold;
-		color: #fff;
-		background: #567;
-		text-shadow: 0.1em 0.1em 0.1em #0008;
-		box-shadow: 0.1em 0.1em 0.3em #0004;
+	:host([view="auth-button"]) {
+		[part~="button"] {
+			all: unset;
+			font: inherit;
+			color: inherit;
+
+			cursor: pointer;
+			padding: 1em 0.5em;
+			border-radius: 0.5em;
+			border: 0.1em solid transparent;
+
+			font-weight: bold;
+			color: #fff;
+			background: #567;
+			text-shadow: 0.1em 0.1em 0.1em #0008;
+			box-shadow: 0.1em 0.1em 0.3em #0004;
+		}
+		[part~="button"]:hover { background: #678; }
+		[part~="button"]:active { background: #456; }
+
+		[part~="button-login"] {
+			all: unset;
+			font: inherit;
+			color: inherit;
+
+			cursor: pointer;
+			padding: 1em 0.5em;
+			border-radius: 0.5em;
+			border: 0.1em solid transparent;
+
+			font-weight: bold;
+			color: white;
+			background: #0a0;
+			text-shadow: 0.1em 0.1em 0.1em #0008;
+			box-shadow: 0.1em 0.1em 0.3em #0004;
+		}
+		[part~="button-login"]:hover { background: #4a4; }
+		[part~="button-login"]:active { background: #080; }
 	}
-	[part="button"]:hover { background: #678; }
-	[part="button"]:active { background: #456; }
-
-	[part="button-login"] {
-		all: unset;
-		font: inherit;
-		color: inherit;
-
-		cursor: pointer;
-		padding: 1em 0.5em;
-		border-radius: 0.5em;
-		border: 0.1em solid transparent;
-
-		font-weight: bold;
-		color: white;
-		background: #0a0;
-		text-shadow: 0.1em 0.1em 0.1em #0008;
-		box-shadow: 0.1em 0.1em 0.3em #0004;
-	}
-	[part="button-login"]:hover { background: #4a4; }
-	[part="button-login"]:active { background: #080; }
 }
 
 `

s/app/lib/themes/basic.css.ts

@@ -3,7 +3,7 @@ import {css} from "lit"
 export default css`@layer view {
 
 :host {
-	display: contents;
+	display: inline-flex;
 }
 
 slot {

s/app/lib/ui/auth-button/style.css.ts

@@ -5,8 +5,10 @@ import styleCss from "./style.css.js"
 import {Auth} from "../../parts/auth.js"
 
 export const AuthButton = (auth: Auth) => view(use => () => {
+	use.name("auth-button")
 	use.css(auth.theme, styleCss)
 	const attrs = use.attrs.spec({src: String})
+	use.states().assign(auth.login ? "authenticated" : "unauthenticated")
 
 	async function clickLogout() {
 		await auth.logout()

s/app/lib/ui/auth-button/view.ts

@@ -3,7 +3,7 @@ import {css} from "lit"
 export default css`@layer view {
 
 :host {
-	display: contents;
+	display: inline-flex;
 	--icon-size: var(--auth-user-icon-size, 3em);
 	--label-max-width: var(--auth-user-label-max-width, 4em);
 }
@@ -16,10 +16,12 @@ export default css`@layer view {
 
 	padding: 1em;
 	border-radius: 0.5em;
-	background: #333;
+	color: color-mix(in oklab, var(--idcolor), #fff 80%);
+	background: color-mix(in oklab, var(--idcolor), #4448 90%);
 }
 
 .icon {
+	color: var(--idcolor, white);
 	svg {
 		width: var(--icon-size);
 		height: var(--icon-size);

s/app/lib/ui/auth-user/style.css.ts

@@ -8,16 +8,19 @@ import {idHsl} from "../../../../common/utils/id-hue.js"
 import userIcon from "../../../../common/ui/icons/tabler/user.icon.js"
 
 export const AuthUser = (auth: Auth) => view(use => () => {
+	use.name("auth-user")
 	use.css(auth.theme, styleCss)
+	use.states().assign(auth.login ? "authenticated" : "unauthenticated")
 
 	if (!auth.login)
-		return html``
+		return null
 
 	const {id, label} = auth.login.nametag
+	const idcolor = idHsl(id)
 
 	return html`
-		<div part=shell>
-			<div class=icon style="color: ${idHsl(id)};">
+		<div part=shell style="--idcolor: ${idcolor};">
+			<div class=icon>
 				${svgLit(userIcon)}
 			</div>
 			<div class=box>