Make host lobby start button yellow during countdown

Add a `warning` variant to o-button that reuses the existing
`--color-cyber-yellow` brand token, and apply it to the host lobby's
start button while the "Starting in Xs" countdown is active. The button
stays primary blue in the Waiting/Start states.
This commit is contained in:
evanpelle
2026-06-22 12:46:18 -07:00
parent 68da097791
commit 55916b807b
2 changed files with 4 additions and 2 deletions
+1 -1
View File
@@ -473,7 +473,7 @@ export class HostLobbyModal extends BaseModal {
<!-- Player List / footer -->
<div class="p-6 pt-4 border-t border-white/10 bg-black/20 shrink-0">
<o-button
variant="primary"
variant=${secondsRemaining !== null ? "warning" : "primary"}
width="block"
size="lg"
.title=${statusLabel}
@@ -2,7 +2,7 @@ import { LitElement, TemplateResult, html, nothing } from "lit";
import { customElement, property } from "lit/decorators.js";
import { translateText } from "../../Utils";
type ButtonVariant = "primary" | "secondary" | "danger" | "ghost";
type ButtonVariant = "primary" | "secondary" | "danger" | "warning" | "ghost";
type ButtonSize = "xs" | "sm" | "md" | "lg";
type ButtonWidth = "auto" | "block" | "blockDesktop" | "fill";
type IconPosition = "left" | "right" | "only";
@@ -37,6 +37,8 @@ export class OButton extends LitElement {
return "bg-gray-700 hover:bg-gray-600 text-white disabled:bg-gray-800 disabled:text-gray-400";
case "danger":
return "bg-red-600 hover:bg-red-500 text-white disabled:bg-red-900 disabled:text-gray-300";
case "warning":
return "bg-cyber-yellow hover:brightness-110 text-gray-900 disabled:bg-yellow-900 disabled:text-gray-300";
case "ghost":
return "bg-transparent hover:bg-white/10 text-malibu-blue disabled:text-gray-500 disabled:hover:bg-transparent";
}