dsh-coding-subscription-oauth 0.5.4 → 0.5.5

package/src/client/styles.ts

@@ -3,6 +3,8 @@
 import type { CSSProperties } from "react";
 import type { ProviderStatus } from "./types.ts";
 
+export const TRANSITION = "all 0.15s ease";
+
 export const pageStyle: CSSProperties = { display: "flex", flexDirection: "column", gap: 16, maxWidth: 780 };
 export const titleStyle: CSSProperties = {
 	margin: 0,
@@ -25,6 +27,7 @@ export const cardStyle: CSSProperties = {
 	border: "1px solid var(--dsw-alias-border-l2)",
 	borderRadius: 12,
 	background: "var(--dsw-alias-bg-module-platform)",
+	transition: TRANSITION,
 };
 export const rowStyle: CSSProperties = {
 	display: "flex",
@@ -54,16 +57,25 @@ export const buttonStyle: CSSProperties = {
 	fontSize: 14,
 	fontWeight: 500,
 	cursor: "pointer",
+	transition: TRANSITION,
 };
 export const primaryButtonStyle: CSSProperties = {
 	...buttonStyle,
-	borderColor: "#315fc7",
-	background: "#315fc7",
+	borderColor: "var(--dsw-alias-brand-primary, #315fc7)",
+	background: "var(--dsw-alias-brand-primary, #315fc7)",
 	color: "#ffffff",
 	boxShadow: "0 1px 3px rgba(0, 0, 0, 0.28)",
 	fontWeight: 600,
 };
+export const compactButtonStyle: CSSProperties = {
+	...buttonStyle,
+	minHeight: 28,
+	padding: "4px 10px",
+	fontSize: 13,
+	borderRadius: 8,
+};
 export const errorStyle: CSSProperties = { ...bodyStyle, color: "var(--dsw-alias-state-error-primary)" };
+export const successStyle: CSSProperties = { ...bodyStyle, color: "var(--dsw-alias-state-success-primary, #22a06b)" };
 export const warningStyle: CSSProperties = {
 	...bodyStyle,
 	padding: "10px 12px",
@@ -78,6 +90,10 @@ export const tipStyle: CSSProperties = {
 	background: "var(--dsw-alias-bg-layer-1)",
 	color: "var(--dsw-alias-label-primary)",
 };
+export const noticeStyle: CSSProperties = {
+	...tipStyle,
+	animation: "dsh-coding-oauth-fade-in 0.2s ease",
+};
 export const codeStyle: CSSProperties = {
 	fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
 	fontSize: 20,
@@ -86,6 +102,19 @@ export const codeStyle: CSSProperties = {
 	color: "var(--dsw-alias-label-primary)",
 };
 export const monoStyle: CSSProperties = { fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" };
+export const snippetStyle: CSSProperties = {
+	...monoStyle,
+	display: "block",
+	fontSize: 12,
+	lineHeight: "18px",
+	padding: "10px 12px",
+	borderRadius: 8,
+	border: "1px solid var(--dsw-alias-border-l2)",
+	background: "var(--dsw-alias-bg-layer-1)",
+	color: "var(--dsw-alias-label-primary)",
+	overflowWrap: "anywhere",
+	whiteSpace: "pre-wrap",
+};
 export const linkStyle: CSSProperties = { color: "var(--dsw-alias-brand-primary)", wordBreak: "break-all" };
 export const listStyle: CSSProperties = {
 	display: "flex",
@@ -113,6 +142,7 @@ export const inputStyle: CSSProperties = {
 	color: "var(--dsw-alias-label-primary)",
 	font: "inherit",
 	fontSize: 13,
+	transition: TRANSITION,
 };
 export const nestedStyle: CSSProperties = {
 	display: "flex",
@@ -124,18 +154,31 @@ export const nestedStyle: CSSProperties = {
 	background: "var(--dsw-alias-bg-layer-1)",
 };
 export const hintStyle: CSSProperties = { ...bodyStyle, fontSize: 13 };
-export const tabNavStyle: CSSProperties = {
-	display: "flex",
+export const segmentedNavStyle: CSSProperties = {
+	display: "inline-flex",
 	flexWrap: "wrap",
-	gap: 8,
+	gap: 2,
+	padding: 3,
+	borderRadius: 10,
+	border: "1px solid var(--dsw-alias-border-l2)",
+	background: "var(--dsw-alias-bg-layer-1)",
 };
-export const tabButtonStyle: CSSProperties = {
+export const segmentedTabStyle: CSSProperties = {
 	...buttonStyle,
-	borderRadius: 10,
+	border: "none",
+	borderRadius: 8,
+	boxShadow: "none",
+	background: "transparent",
+	minHeight: 32,
+	padding: "5px 12px",
+	fontSize: 13,
 };
-export const tabButtonActiveStyle: CSSProperties = {
-	...primaryButtonStyle,
-	borderRadius: 10,
+export const segmentedTabActiveStyle: CSSProperties = {
+	...segmentedTabStyle,
+	background: "var(--dsw-alias-bg-module-platform)",
+	color: "var(--dsw-alias-label-primary)",
+	boxShadow: "0 1px 2px rgba(0, 0, 0, 0.12)",
+	fontWeight: 600,
 };
 export const panelStyle: CSSProperties = {
 	display: "flex",
@@ -161,7 +204,75 @@ export const skeletonStyle: CSSProperties = {
 	background:
 		"linear-gradient(90deg, var(--dsw-alias-bg-layer-1) 0%, var(--dsw-alias-bg-module-platform) 50%, var(--dsw-alias-bg-layer-1) 100%)",
 	backgroundSize: "200% 100%",
+	animation: "dsh-coding-oauth-skeleton-pulse 1.4s ease-in-out infinite",
 };
+export const stepRowStyle: CSSProperties = {
+	display: "flex",
+	alignItems: "flex-start",
+	gap: 10,
+	fontSize: 14,
+	color: "var(--dsw-alias-label-secondary)",
+};
+export const stepActiveStyle: CSSProperties = {
+	...stepRowStyle,
+	color: "var(--dsw-alias-label-primary)",
+	fontWeight: 500,
+};
+export const stepNumberStyle: CSSProperties = {
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	width: 22,
+	height: 22,
+	borderRadius: "50%",
+	flex: "0 0 auto",
+	fontSize: 12,
+	fontWeight: 600,
+	background: "var(--dsw-alias-bg-layer-1)",
+	border: "1px solid var(--dsw-alias-border-l2)",
+	color: "var(--dsw-alias-label-secondary)",
+};
+export const stepNumberActiveStyle: CSSProperties = {
+	...stepNumberStyle,
+	background: "var(--dsw-alias-brand-primary, #315fc7)",
+	borderColor: "var(--dsw-alias-brand-primary, #315fc7)",
+	color: "#ffffff",
+};
+
+export type StatusTone = "success" | "error" | "warning" | "info" | "neutral";
+
+export function statusToneColor(tone: StatusTone): string {
+	switch (tone) {
+		case "success":
+			return "var(--dsw-alias-state-success-primary, #22a06b)";
+		case "error":
+			return "var(--dsw-alias-state-error-primary, #d92d20)";
+		case "warning":
+			return "var(--dsw-alias-state-warning-primary, #e06c00)";
+		case "info":
+			return "var(--dsw-alias-brand-primary, #1677ff)";
+		default:
+			return "var(--dsw-alias-label-dimmed, #9aa0a6)";
+	}
+}
+
+export function badgeStyle(tone: StatusTone): CSSProperties {
+	const color = statusToneColor(tone);
+	return {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: 6,
+		padding: "3px 10px",
+		borderRadius: 999,
+		fontSize: 12,
+		fontWeight: 600,
+		lineHeight: "18px",
+		color,
+		background: `color-mix(in srgb, ${color} 14%, transparent)`,
+		border: `1px solid color-mix(in srgb, ${color} 28%, transparent)`,
+		whiteSpace: "nowrap",
+	};
+}
 
 export function dotStyle(
 	status: ProviderStatus["status"] | "loading" | "available" | "unavailable",
@@ -178,3 +289,18 @@ export function dotStyle(
 					: "var(--dsw-alias-label-dimmed, #9aa0a6)";
 	return { width: 9, height: 9, borderRadius: "50%", flex: "0 0 auto", background: color };
 }
+
+export function providerStatusTone(status: ProviderStatus["status"], installed = true): StatusTone {
+	if (!installed) return "neutral";
+	if (status === "signed-in") return "success";
+	if (status === "error") return "error";
+	if (status === "signing-in") return "info";
+	return "neutral";
+}
+
+/** @deprecated Use segmentedTabStyle / segmentedTabActiveStyle */
+export const tabNavStyle: CSSProperties = segmentedNavStyle;
+/** @deprecated Use segmentedTabStyle */
+export const tabButtonStyle: CSSProperties = segmentedTabStyle;
+/** @deprecated Use segmentedTabActiveStyle */
+export const tabButtonActiveStyle: CSSProperties = segmentedTabActiveStyle;