Gradient Text

1import type * as React from "react";
2 
3/**
4 * Standalone fallbacks for when the @sistine/theme tokens aren't present. They mirror the theme
5 * gradient's hue math (base hue → +63.53°): the default at a mid lightness, the contrast one dark
6 * (legible on light surfaces; the theme's .dark override flips it light).
7 */
8const FALLBACK_GRADIENT = "linear-gradient(135deg, oklch(0.62 0.16 250) 0%, oklch(0.62 0.16 313.53) 100%)";
9const FALLBACK_CONTRAST = "linear-gradient(135deg, oklch(0.32 0.14 250) 0%, oklch(0.32 0.14 313.53) 100%)";
10 
11export interface GradientTextProps extends React.ComponentProps<"span"> {
12  /** Override the gradient. Defaults to the theme's `--gradient-text`, which follows the live glass tint. */
13  gradient?: string;
14  /**
15   * Use the high-contrast theme gradient (`--gradient-text-contrast`: dark in light mode, light in
16   * dark mode) so the text stays legible printed ON a tinted glass surface. Ignored when `gradient`
17   * is set.
18   */
19  contrast?: boolean;
20}
21 
22/**
23 * Fills its text with a gradient via `background-clip: text`. Defaults to the theme token
24 * `--gradient-text` (which tracks the live glass tint); pass `contrast` to use the lightness-
25 * contrasting `--gradient-text-contrast` when the text sits on a tinted surface. Falls back to a
26 * fixed brand gradient when the theme isn't present, so it works standalone. Best on large/display
27 * text — a gradient fill has no single contrast value, so keep body/UI text solid.
28 *
29 * @example
30 * <h1><GradientText>Beautiful interfaces</GradientText></h1>
31 * <GradientText contrast><code>{css}</code></GradientText>
32 * <GradientText gradient="linear-gradient(90deg, #f00, #00f)">Custom</GradientText>
33 */
34export function GradientText({ gradient, contrast = false, style, ...props }: GradientTextProps) {
35  const themed = contrast ? `var(--gradient-text-contrast, ${FALLBACK_CONTRAST})` : `var(--gradient-text, ${FALLBACK_GRADIENT})`;
36  return (
37    <span
38      data-slot="gradient-text"
39      style={{
40        backgroundImage: gradient ?? themed,
41        backgroundClip: "text",
42        WebkitBackgroundClip: "text",
43        color: "transparent",
44        WebkitTextFillColor: "transparent",
45        ...style,
46      }}
47      {...props}
48    />
49  );
50}