@voila.dev/ui-landing 1.1.9 → 1.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@voila.dev/ui-landing",
-	"version": "1.1.9",
+	"version": "1.1.10",
 	"type": "module",
 	"description": "Your marketing site, from the same system as your product.",
 	"license": "MIT",

package/src/components/article-card.tsx

@@ -76,7 +76,7 @@ function ImageFallback({
 		<div
 			data-slot="article-card-image-fallback"
 			className={cn(
-				"relative aspect-video overflow-hidden rounded-t-lg bg-linear-to-br from-provider/20 to-organization/20",
+				"relative aspect-video overflow-hidden rounded-t-lg bg-linear-to-br from-brand/20 to-highlight/20",
 				className,
 			)}
 			{...props}
@@ -107,7 +107,7 @@ function Title({ className, ...props }: React.ComponentProps<"h3">) {
 		<h3
 			data-slot="article-card-title"
 			className={cn(
-				"mb-2 line-clamp-2 text-lg font-semibold transition-colors group-hover:text-provider",
+				"mb-2 line-clamp-2 text-lg font-semibold transition-colors group-hover:text-brand",
 				className,
 			)}
 			{...props}

package/src/components/article-tags.tsx

@@ -17,7 +17,7 @@ function Tag({ className, ...props }: React.ComponentProps<"span">) {
 		<span
 			data-slot="article-tag"
 			className={cn(
-				"inline-flex items-center rounded-full bg-provider/10 px-2.5 py-0.5 text-xs font-medium text-provider transition-colors",
+				"inline-flex items-center rounded-full bg-brand/10 px-2.5 py-0.5 text-xs font-medium text-brand transition-colors",
 				className,
 			)}
 			{...props}

package/src/components/bento-grid.tsx

@@ -1,6 +1,6 @@
 import { cn } from "@voila.dev/ui/lib/utils";
 
-import { accentOrangeBlobClass, brandGradientClass } from "#/lib/tones.ts";
+import { accentHighlightBlobClass, brandGradientClass } from "#/lib/tones.ts";
 
 /**
  * Bento grid with a featured gradient tile. Compose: Root > FeaturedItem (FeaturedContent >
@@ -38,7 +38,7 @@ function FeaturedItem({
 			<div
 				className={cn(
 					"pointer-events-none absolute -bottom-20 -left-10 h-56 w-56 rounded-full blur-3xl",
-					accentOrangeBlobClass,
+					accentHighlightBlobClass,
 				)}
 			/>
 			{children}

package/src/components/cta-banner.tsx

@@ -4,7 +4,7 @@ import { Container, type ContainerProps } from "#/components/container.tsx";
 import { Heading, type HeadingProps } from "#/components/heading.tsx";
 import { Section, type SectionProps } from "#/components/section.tsx";
 import { Text, type TextProps } from "#/components/text.tsx";
-import { accentOrangeBlobClass, brandGradientClass } from "#/lib/tones.ts";
+import { accentHighlightBlobClass, brandGradientClass } from "#/lib/tones.ts";
 
 /**
  * Gradient call-to-action banner with decorative blur blobs. Compose: Root > Title,
@@ -42,7 +42,7 @@ function Root({
 					<div
 						className={cn(
 							"pointer-events-none absolute -bottom-20 -left-10 h-56 w-56 rounded-full blur-3xl",
-							accentOrangeBlobClass,
+							accentHighlightBlobClass,
 						)}
 					/>
 

package/src/components/eyebrow.tsx

@@ -10,8 +10,8 @@ import {
 } from "#/lib/tones.ts";
 
 /**
- * The badge pill that opens most sections ("Nouvelle plateforme", "Pour les
- * clubs"…): tinted rounded-full chip with an optional pulse dot or icon and a
+ * The badge pill that opens most sections ("New platform", "For
+ * clients"…): tinted rounded-full chip with an optional pulse dot or icon and a
  * label in the tone color. Reproduces the inline pattern of
  * the source design.
  */

package/src/components/numbered-cards.tsx

@@ -9,7 +9,7 @@ import {
 } from "#/lib/tones.ts";
 
 /**
- * Grid of numbered step cards ("Étape 1/2/3"). Compose: Root (tone, columns) > Card >
+ * Grid of numbered step cards ("Step 1/2/3"). Compose: Root (tone, columns) > Card >
  * CardHeader (CardIcon + CardLabel) + CardTitle + CardDescription.
  */
 
@@ -100,7 +100,7 @@ function CardIcon({ className, ...props }: React.ComponentProps<"span">) {
 	);
 }
 
-/** The "Étape N" label next to the icon. */
+/** The "Step N" label next to the icon. */
 function CardLabel({ className, ...props }: React.ComponentProps<"span">) {
 	return (
 		<span

package/src/components/prose-article.tsx

@@ -17,9 +17,9 @@ function ProseArticle({
 			{
 				className: cn(
 					"prose prose-lg md:prose-xl mx-auto max-w-none",
-					"prose-blockquote:border-l-provider prose-blockquote:bg-muted/50 prose-blockquote:py-1 prose-blockquote:pl-6 prose-blockquote:not-italic",
+					"prose-blockquote:border-l-brand prose-blockquote:bg-muted/50 prose-blockquote:py-1 prose-blockquote:pl-6 prose-blockquote:not-italic",
 					"prose-p:text-muted-foreground",
-					"prose-a:text-provider",
+					"prose-a:text-brand",
 					"prose-strong:text-foreground",
 					"prose-img:rounded-xl",
 					className,

package/src/components/section-variants.ts

@@ -13,12 +13,12 @@ export const sectionVariants = cva({
 		background: {
 			default: "bg-background",
 			muted: "bg-muted",
-			provider: "bg-provider text-primary-foreground",
+			brand: "bg-brand text-primary-foreground",
 			gradient: "bg-gradient-to-br from-background via-background to-muted",
 			"gradient-primary":
 				"bg-gradient-to-br from-primary/5 via-background to-primary/10",
-			"gradient-provider":
-				"bg-gradient-to-br from-provider/5 via-background to-provider/10",
+			"gradient-brand":
+				"bg-gradient-to-br from-brand/5 via-background to-brand/10",
 		},
 	},
 	defaultVariants: {
@@ -40,8 +40,8 @@ export const sectionSpacingOptions = [
 export const sectionBackgroundOptions = [
 	"default",
 	"muted",
-	"provider",
+	"brand",
 	"gradient",
 	"gradient-primary",
-	"gradient-provider",
+	"gradient-brand",
 ] as const satisfies readonly NonNullable<SectionVariants["background"]>[];

package/src/components/testimonial-grid.tsx

@@ -2,7 +2,10 @@ import { QuotesIcon, StarIcon } from "@phosphor-icons/react";
 import { cva, type VariantProps } from "@voila.dev/ui/cva";
 import { cn } from "@voila.dev/ui/lib/utils";
 
-import { accentOrangeStarClass, accentOrangeTintClass } from "#/lib/tones.ts";
+import {
+	accentHighlightStarClass,
+	accentHighlightTintClass,
+} from "#/lib/tones.ts";
 
 /**
  * Testimonial figure cards (quote, avatar initial, star rating). Compose: Root > Item >
@@ -67,7 +70,7 @@ function Footer({ className, ...props }: React.ComponentProps<"div">) {
 		<div
 			data-slot="testimonial-footer"
 			className={cn(
-				"mt-6 flex items-center gap-3 border-t border-border/60 pt-5",
+				"mt-6 flex flex-wrap items-center gap-3 border-t border-border/60 pt-5",
 				className,
 			)}
 			{...props}
@@ -80,7 +83,7 @@ const testimonialAvatarVariants = cva({
 	variants: {
 		accent: {
 			primary: "bg-primary/10 text-primary",
-			orange: accentOrangeTintClass,
+			highlight: accentHighlightTintClass,
 		},
 	},
 	defaultVariants: {
@@ -92,7 +95,7 @@ type TestimonialAvatarVariants = VariantProps<typeof testimonialAvatarVariants>;
 
 const testimonialAvatarAccentOptions = [
 	"primary",
-	"orange",
+	"highlight",
 ] as const satisfies readonly NonNullable<
 	TestimonialAvatarVariants["accent"]
 >[];
@@ -158,7 +161,7 @@ function Rating({ count = 5, className, ...props }: TestimonialRatingProps) {
 					// Stars are a static decorative sequence — the index is the identity.
 					key={index}
 					weight="fill"
-					className={cn("h-3.5 w-3.5", accentOrangeStarClass)}
+					className={cn("h-3.5 w-3.5", accentHighlightStarClass)}
 				/>
 			))}
 		</div>

package/src/lib/tones.ts

@@ -7,8 +7,8 @@
 
 export const toneOptions = [
 	"primary",
-	"provider",
-	"organization",
+	"brand",
+	"highlight",
 	"destructive",
 	"muted",
 ] as const;
@@ -17,41 +17,40 @@ export type Tone = (typeof toneOptions)[number];
 
 export const toneTextClass: Record<Tone, string> = {
 	primary: "text-primary",
-	provider: "text-provider",
-	organization: "text-organization",
+	brand: "text-brand",
+	highlight: "text-highlight",
 	destructive: "text-destructive",
 	muted: "text-muted-foreground",
 };
 
 export const toneTintBackgroundClass: Record<Tone, string> = {
 	primary: "bg-primary/10",
-	provider: "bg-provider/10",
-	organization: "bg-organization/10",
+	brand: "bg-brand/10",
+	highlight: "bg-highlight/10",
 	destructive: "bg-destructive/10",
 	muted: "bg-muted",
 };
 
 export const toneSolidBackgroundClass: Record<Tone, string> = {
 	primary: "bg-primary",
-	provider: "bg-provider",
-	organization: "bg-organization",
+	brand: "bg-brand",
+	highlight: "bg-highlight",
 	destructive: "bg-destructive",
 	muted: "bg-muted-foreground",
 };
 
 export const toneSolidClass: Record<Tone, string> = {
 	primary: "bg-primary text-primary-foreground",
-	provider: "bg-provider text-provider-foreground",
-	organization: "bg-organization text-organization-foreground",
+	brand: "bg-brand text-brand-foreground",
+	highlight: "bg-highlight text-highlight-foreground",
 	destructive: "bg-destructive text-white",
 	muted: "bg-muted text-muted-foreground",
 };
 
 export const toneConnectorLineClass: Record<Tone, string> = {
 	primary: "bg-gradient-to-b from-primary via-primary/40 to-primary/10",
-	provider: "bg-gradient-to-b from-provider via-provider/40 to-provider/10",
-	organization:
-		"bg-gradient-to-b from-organization via-organization/40 to-organization/10",
+	brand: "bg-gradient-to-b from-brand via-brand/40 to-brand/10",
+	highlight: "bg-gradient-to-b from-highlight via-highlight/40 to-highlight/10",
 	destructive:
 		"bg-gradient-to-b from-destructive via-destructive/40 to-destructive/10",
 	muted: "bg-gradient-to-b from-border via-border/40 to-border/10",
@@ -59,27 +58,26 @@ export const toneConnectorLineClass: Record<Tone, string> = {
 
 export const toneHoverBorderClass: Record<Tone, string> = {
 	primary: "hover:border-primary/40",
-	provider: "hover:border-provider/40",
-	organization: "hover:border-organization/40",
+	brand: "hover:border-brand/40",
+	highlight: "hover:border-highlight/40",
 	destructive: "hover:border-destructive/40",
 	muted: "hover:border-border",
 };
 
 export const tonePanelClass: Record<Tone, string> = {
 	primary: "border-primary/20 bg-primary/5",
-	provider: "border-provider/20 bg-provider/5",
-	organization: "border-organization/20 bg-organization/5",
+	brand: "border-brand/20 bg-brand/5",
+	highlight: "border-highlight/20 bg-highlight/5",
 	destructive: "border-destructive/20 bg-destructive/5",
 	muted: "border-border bg-muted/50",
 };
 
 /*
- * Accent literals carried over from the Astro marketing site for pixel
- * parity. TODO: promote to named tokens in @voila.dev/ui-tokens once the
- * rebuild has shipped (they are close to, but not equal to, the brand roles).
+ * Accent classes for marketing highlights - built on the brand roles from
+ * `@voila.dev/ui-tokens` so a rebrand is a token change, not a find-and-replace.
  */
 
-export const accentOrangeTintClass = "bg-[#FA8424]/10 text-[#FA8424]";
-export const accentOrangeStarClass = "fill-[#FA8424] text-[#FA8424]";
-export const accentOrangeBlobClass = "bg-[#FA8424]/20";
-export const brandGradientClass = "bg-gradient-to-br from-primary to-[#3b5bff]";
+export const accentHighlightTintClass = "bg-highlight/10 text-highlight";
+export const accentHighlightStarClass = "fill-highlight text-highlight";
+export const accentHighlightBlobClass = "bg-highlight/20";
+export const brandGradientClass = "bg-gradient-to-br from-primary to-brand";