# text-shadow

> Applies `text-shadow`, tracing the glyph forms themselves.

```ts
import { textShadow } from "@sdxc/u/effects";
```

Applies `text-shadow`, tracing the glyph forms themselves. The practical use
is keeping text legible over an image or video; a translucent scrim between
the media and the text stays the reliable fix, with this layered on top.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.textShadow()` | `css({ textShadow: "calc(var(--ui-spacing, 0.25rem) * 0) calc(var(--ui-spacing, 0.25rem) * 1) calc(var(--ui-spacing, 0.25rem) * 2) rgb(0 0 0 / 0.35)" })` |
| `u.textShadow({ y: "1px", blur: "3px", color: "brand" })` | `css({ textShadow: "calc(var(--ui-spacing, 0.25rem) * 0) 1px 3px var(--ui-brand-border)" })` |

## Examples

### Basic example

Use `textShadow()` to shadow the letters of an element, and pass `y` and `blur` to deepen it:

```tsx
<div mix={[...]}>
	<p mix={[textShadow(), text("3xl"), weight("bold")]}>The quick brown fox</p>
	<p mix={[textShadow({ y: 1, blur: 3 }), text("3xl"), weight("bold")]}>The quick brown fox</p>
	<p mix={[textShadow({ y: 2, blur: 4 }), text("3xl"), weight("bold")]}>The quick brown fox</p>
</div>
```

### Keeping text legible over an image

Shadow light text with `textShadow()` to keep it readable where it crosses a busy image:

```tsx
<div mix={[...]}>
	<p mix={[fg("color.neutral.50"), text("xl"), weight("bold")]}>Without a shadow</p>
	<p
		mix={[
			textShadow({ y: "1px", blur: "3px" }),
			fg("color.neutral.50"),
			text("xl"),
			weight("bold"),
		]}
	>
		With textShadow()
	</p>
</div>
```

### Changing the color

Pass a theme `color` to tint the shadow, like `color: "brand.solid"` for a soft glow:

```tsx
<p mix={[textShadow({ y: 0, blur: 3, color: "brand.solid" }), text("3xl"), weight("bold")]}>
	Launch day
</p>
```

## Applying on a state

Wrap the call in a state utility to scope it to one selector.

```ts
u.hover(u.textShadow())
```

## Responsive design

Wrap the call in a container query to scope it to one width.

```ts
u.at("md", u.textShadow())
```

## Customizing your theme

### Customizing spacing

Every numeric step multiplies `--ui-spacing`, so redefining it rescales every spacing and sizing utility at once:

```css
:root {
	--ui-spacing: 0.25rem;
}
```

Every call that names the step now reads the new value:

```ts
p(4)
```

### Customizing colors

Define a palette as `--ui-color-{name}-{50..950}` and map a tone onto it with the `--ui-{tone}-*` variables, the way `theme.css` maps the built-in ones:

```css
:root {
	--ui-color-info-50: oklch(0.97 0.02 230);
	--ui-color-info-200: oklch(0.88 0.06 230);
	--ui-color-info-500: oklch(0.62 0.16 230);
	--ui-color-info-600: oklch(0.52 0.18 230);
	--ui-color-info-900: oklch(0.3 0.1 230);

	--ui-info-bg-tint: var(--ui-color-info-50);
	--ui-info-bg-solid: var(--ui-color-info-600);
	--ui-info-fg: var(--ui-color-info-600);
	--ui-info-fg-muted: var(--ui-color-info-500);
	--ui-info-fg-emphasis: var(--ui-color-info-900);
	--ui-info-fg-on-solid: white;
	--ui-info-border: var(--ui-color-info-200);
	--ui-info-border-strong: var(--ui-color-info-600);
	--ui-info-ring: var(--ui-color-info-500);
}
```

```ts
declare module "@sdxc/u" {
	interface ColorPalettes {
		info: true;
	}
	interface SemanticTones {
		info: true;
	}
}
```

The new name is then accepted wherever the scale is:

```ts
bg("info")
```

## Signature

```ts
u.textShadow(options?: TextShadowOptions)
```