@yuzu-jobs/ui-components 0.0.8 → 0.1.0

package/index.ts

@@ -10,9 +10,11 @@ import Alert from "./src/Alert.astro";
 import ProgressBar from "./src/ProgressBar.astro";
 import Button from "./src/Button.astro";
 import ProfileSetupFlowHeader from "./src/ProfileSetupFlowHeader.astro";
+import StatusDot from "./src/StatusDot.astro";
 
 export {
 	Button,
+	StatusDot,
 	InputText,
 	InputSelect,
 	InputSwitch,

package/package.json

@@ -3,14 +3,16 @@
 	"engines": {
 		"node": ">=22.12.0"
 	},
-	"version": "0.0.8",
+	"version": "0.1.0",
 	"type": "module",
 	"exports": {
-		".": "./index.ts"
+		".": "./index.ts",
+		"./theme.css": "./theme.css"
 	},
 	"files": [
 		"src",
-		"index.ts"
+		"index.ts",
+		"theme.css"
 	],
 	"keywords": [
 		"astro-component"

package/src/Alert.astro

@@ -15,14 +15,14 @@ const variantClasses: Record<Variant, string> = {
 	success: "bg-emerald-50 border-emerald-500 text-emerald-800",
 	error: "bg-red-50 border-red-500 text-red-800",
 	warning: "bg-amber-50 border-amber-500 text-amber-800",
-	info: "bg-indigo-50 border-indigo-500 text-indigo-800",
+	info: "bg-brand-50 border-brand-500 text-brand-800",
 };
 
 const iconClasses: Record<Variant, string> = {
 	success: "text-emerald-500",
 	error: "text-red-500",
 	warning: "text-amber-500",
-	info: "text-indigo-500",
+	info: "text-brand-500",
 };
 
 const icons: Record<Variant, typeof CircleCheck> = {
@@ -38,7 +38,7 @@ const Icon = icons[variant];
 <div
 	id={id}
 	class:list={[
-		"flex items-start gap-3 border border-transparent border-l-4 px-4 py-3 rounded-lg text-sm font-sans shadow-sm",
+		"flex items-start gap-3 border border-transparent border-l-4 px-4 py-3 rounded-lg text-sm font-sans",
 		variantClasses[variant],
 		className,
 	]}

package/src/Button.astro

@@ -3,7 +3,7 @@ interface Props {
 	id?: string;
 	href?: string;
 	type?: "button" | "submit" | "reset";
-	variant?: "primary" | "secondary" | "outline" | "ghost" | "danger";
+	variant?: "primary" | "accent" | "secondary" | "outline" | "ghost" | "danger";
 	size?: "sm" | "md" | "lg";
 	disabled?: boolean;
 	fullWidth?: boolean;
@@ -28,20 +28,23 @@ const {
 } = Astro.props;
 
 const variantClasses = {
-	// Filled — solid background, white text. Use for primary CTAs on any background.
+	// Filled ink — solid background, white text. Use for primary CTAs on light backgrounds.
 	primary:
-		"bg-indigo-600 hover:bg-indigo-700 text-white border border-transparent",
+		"bg-primary hover:bg-primary-hover text-white border border-transparent",
+	// Filled teal — the brand accent. Use sparingly (e.g. spoke "Join free" CTA).
+	accent:
+		"bg-accent hover:bg-accent-hover text-white border border-transparent",
 	// Danger — filled red, white text. Use for destructive actions.
 	danger: "bg-red-600 hover:bg-red-700 text-white border border-transparent",
-	// Outline — dark border and text on transparent background. Use for secondary actions on light backgrounds.
+	// Outline — ink text, hairline border. Use for secondary actions on light backgrounds.
 	secondary:
-		"text-gray-700 border border-gray-300 hover:bg-gray-100 hover:border-gray-400 hover:text-gray-900",
+		"text-ink-900 border border-slate-300 hover:bg-slate-50 hover:border-slate-400",
 	// Alias for secondary
 	outline:
-		"text-gray-700 border border-gray-300 hover:bg-gray-100 hover:border-gray-400 hover:text-gray-900",
-	// Ghost — subtle indigo outline on transparent background. Use for actions on dark/indigo backgrounds.
+		"text-ink-900 border border-slate-300 hover:bg-slate-50 hover:border-slate-400",
+	// Ghost — subtle teal outline on transparent background. Use for actions on dark (ink) surfaces.
 	ghost:
-		"text-indigo-200 border border-indigo-500/50 hover:bg-indigo-500/20 hover:text-white hover:border-indigo-400",
+		"text-brand-200 border border-brand-500/50 hover:bg-brand-500/20 hover:text-white hover:border-brand-400",
 };
 
 const sizeClasses = {
@@ -51,7 +54,7 @@ const sizeClasses = {
 };
 
 const classes = [
-	"inline-flex items-center gap-1.5 rounded-lg font-sans font-medium cursor-pointer transition-colors",
+	"inline-flex items-center gap-1.5 rounded-md font-sans font-medium cursor-pointer transition-colors",
 	"disabled:opacity-40 disabled:cursor-not-allowed",
 	variantClasses[variant],
 	sizeClasses[size],

package/src/ProfileSetupFlowHeader.astro

@@ -11,19 +11,19 @@ interface Props {
 const { step, totalSteps, title, userRole } = Astro.props;
 ---
 
-<div class="bg-indigo-900 border-b border-indigo-800/60">
+<div class="bg-ink-900 border-b border-ink-800/60">
 	<div class="container mx-auto max-w-3xl px-8 py-6">
 		<div class="flex items-center gap-3 mb-4">
-			<span class="text-indigo-400 text-sm font-sans">Account setup</span>
-			<span class="text-indigo-700">/</span>
-			<span class="text-indigo-200 text-sm font-sans"
+			<span class="text-ink-300 text-sm font-sans">Account setup</span>
+			<span class="text-ink-500">/</span>
+			<span class="text-ink-200 text-sm font-sans"
 				>{userRole == "recruiter" ? "Recruiter" : "Candidate"} profile</span
 			>
 		</div>
 
 		<div class="mb-5">
 			<p
-				class="text-indigo-400 text-xs font-sans uppercase tracking-widest font-semibold mb-1"
+				class="text-brand-400 text-[11px] font-mono uppercase tracking-[0.08em] font-semibold mb-1"
 			>
 				Step {step} of {totalSteps}
 			</p>

package/src/ProgressBar.astro

@@ -9,9 +9,9 @@ const { totalSteps, currentStep, class: className } = Astro.props;
 ---
 
 <div class:list={[className]}>
-	<div class="w-full bg-gray-200 rounded-full h-2">
+	<div class="w-full bg-slate-200/40 rounded-full h-2">
 		<div
-			class="bg-primary h-2 rounded-full"
+			class="bg-brand-500 h-2 rounded-full"
 			style={`width: ${Math.max(8, ((currentStep - 1) / totalSteps) * 100)}%`}
 		>
 		</div>

package/src/StatusDot.astro

@@ -0,0 +1,33 @@
+---
+// Status indicator: colored dot + plain text (replaces pill badges).
+// Semantic colors per the Precision theme: emerald=active/success,
+// slate=draft/neutral, amber=closed/attention, teal=pending, red=error.
+type Color = "emerald" | "slate" | "amber" | "teal" | "red";
+
+interface Props {
+	color: Color;
+	label: string;
+	class?: string;
+}
+
+const { color, label, class: className } = Astro.props;
+
+const dotClasses: Record<Color, string> = {
+	emerald: "bg-emerald-500",
+	slate: "bg-slate-400",
+	amber: "bg-amber-500",
+	teal: "bg-brand-500",
+	red: "bg-red-500",
+};
+---
+
+<span
+	class:list={[
+		"inline-flex items-center gap-1.5 text-[13px] font-sans text-slate-600 whitespace-nowrap",
+		className,
+	]}
+>
+	<span class:list={["w-1.5 h-1.5 rounded-full shrink-0", dotClasses[color]]}
+	></span>
+	{label}
+</span>

package/theme.css

@@ -0,0 +1,61 @@
+/*
+ * Shared "Precision" design tokens for mizu.health (hub) and the spoke sites.
+ * Consumers @import this after tailwindcss in their global.css:
+ *
+ *   @import "tailwindcss";
+ *   @import "@yuzu-jobs/ui-components/theme.css";
+ *
+ * The --font-schibsted-grotesk / --font-spline-sans-mono variables are
+ * provided by each app's astro.config.mjs fonts entry (astro:assets <Font>).
+ */
+@theme {
+	--font-sans: var(--font-schibsted-grotesk), ui-sans-serif, system-ui,
+		sans-serif;
+	--font-mono: var(--font-spline-sans-mono), ui-monospace, monospace;
+
+	/* Brand = teal (accent) scale, built from the logo node #0E8FA6 */
+	--color-brand-50: #eff6f8;
+	--color-brand-100: #ddf3f6;
+	--color-brand-200: #b6e0e7;
+	--color-brand-300: #7cc6d2;
+	--color-brand-400: #3faabc;
+	--color-brand-500: #14b0c6; /* bright accent — dark surfaces */
+	--color-brand-600: #0e8fa6; /* the logo node — primary accent */
+	--color-brand-700: #0b6e80;
+	--color-brand-800: #0a5866;
+	--color-brand-900: #0a4854;
+	--color-brand-950: #06222e;
+
+	/* Ink = structural navy (nav, sidebar, headings, primary buttons) */
+	--color-ink-50: #f4f7fa;
+	--color-ink-100: #e7edf3;
+	--color-ink-200: #c4d2df;
+	--color-ink-300: #93a9bd;
+	--color-ink-400: #5f7b94;
+	--color-ink-500: #3d5a75;
+	--color-ink-600: #28425c;
+	--color-ink-700: #1a344c;
+	--color-ink-800: #142c42;
+	--color-ink-900: #0f2e4c; /* the logo ink */
+	--color-ink-950: #0a1f33;
+
+	/* Semantic */
+	--color-primary: var(--color-ink-900); /* primary buttons are INK, not teal */
+	--color-primary-hover: var(--color-ink-700);
+	--color-accent: var(--color-brand-600); /* links, data, highlights */
+	--color-accent-hover: var(--color-brand-700);
+
+	/* Neutrals: the theme standardizes on slate. gray-* utilities are aliased
+	   to slate so existing markup renders correctly; prefer slate-* in new code. */
+	--color-gray-50: var(--color-slate-50);
+	--color-gray-100: var(--color-slate-100);
+	--color-gray-200: var(--color-slate-200);
+	--color-gray-300: var(--color-slate-300);
+	--color-gray-400: var(--color-slate-400);
+	--color-gray-500: var(--color-slate-500);
+	--color-gray-600: var(--color-slate-600);
+	--color-gray-700: var(--color-slate-700);
+	--color-gray-800: var(--color-slate-800);
+	--color-gray-900: var(--color-slate-900);
+	--color-gray-950: var(--color-slate-950);
+}