Set icon colors on Card components

[aschrijver]

What version of starlight are you using?

0.13.0

What is your idea?

When using <Card> user component and choosing an icon the color of the icon cannot be set. Would be great if the component can be extended so that color can be controlled, both for the icon itself and surrounding rectangle. Idk how to best take into account coloring for light and dark modes. If a color attribute (and maybe boxColor or something) is not feasible, then the color might be made overridable, same as other components already support.

Why is this feature necessary?

When customizing/branding starlight theme, specific consistent color palette should be used. The current cards introduce arbitrary colors that break brand consistency.

Do you have examples of this feature in other projects?

The astro <Icon> component has a color setting.

Participation

• I am willing to submit a pull request for this feature.

[gruntlord5]

Something like this in the main package would be nice so we could do things like color a checkmark green.

<Card title="Recommended" icon="approve-check" color="green">
  It is recommended you use this view when on a touchscreen device as it allows 
  you to scroll through the list quickly and have a visual cue for what you are looking for as you go. 
</Card>

---
import Icon from './Icon.astro';
import type { Icons } from './components/Icons';

interface Props {
	icon?: keyof typeof Icons;
	title: string;
	color?: 'purple' | 'orange' | 'green' | 'red' | 'blue' | 'black';
}

const { icon, title, color } = Astro.props;

const colorVariables = {
	purple: { border: 'var(--sl-color-purple)', bg: 'var(--sl-color-purple-low)' },
	orange: { border: 'var(--sl-color-orange)', bg: 'var(--sl-color-orange-low)' },
	green: { border: 'var(--sl-color-green)', bg: 'var(--sl-color-green-low)' },
	red: { border: 'var(--sl-color-red)', bg: 'var(--sl-color-red-low)' },
	blue: { border: 'var(--sl-color-blue)', bg: 'var(--sl-color-blue-low)' },
	black: { border: 'var(--sl-color-gray-5)', bg: 'var(--sl-color-gray-6)' },
};

const cardStyle = color ? `--sl-card-border: ${colorVariables[color].border}; --sl-card-bg: ${colorVariables[color].bg};` : '';
---

<article class:list={["card", "sl-flex", color && `card-${color}`]} style={cardStyle}>
	<p class="title sl-flex">
		{icon && <Icon name={icon} class="icon" size="1.333em" />}
		<span set:html={title} />
	</p>
	<div class="body"><slot /></div>
</article>

<style>
	.card {
		--sl-card-border: var(--sl-color-purple);
		--sl-card-bg: var(--sl-color-purple-low);
		border: 1px solid var(--sl-color-gray-5);
		background-color: var(--sl-color-black);
		padding: clamp(1rem, calc(0.125rem + 3vw), 2.5rem);
		flex-direction: column;
		gap: clamp(0.5rem, calc(0.125rem + 1vw), 1rem);
	}
	.card:nth-child(4n + 1):not([class*="card-"]) {
		--sl-card-border: var(--sl-color-orange);
		--sl-card-bg: var(--sl-color-orange-low);
	}
	.card:nth-child(4n + 3):not([class*="card-"]) {
		--sl-card-border: var(--sl-color-green);
		--sl-card-bg: var(--sl-color-green-low);
	}
	.card:nth-child(4n + 4):not([class*="card-"]) {
		--sl-card-border: var(--sl-color-red);
		--sl-card-bg: var(--sl-color-red-low);
	}
	.card:nth-child(4n + 5):not([class*="card-"]) {
		--sl-card-border: var(--sl-color-blue);
		--sl-card-bg: var(--sl-color-blue-low);
	}
	.title {
		font-weight: 600;
		font-size: var(--sl-text-h4);
		color: var(--sl-color-white);
		line-height: var(--sl-line-height-headings);
		gap: 1rem;
		align-items: center;
	}
	.card .icon {
		border: 1px solid var(--sl-card-border);
		background-color: var(--sl-card-bg);
		padding: 0.2em;
		border-radius: 0.25rem;
	}
	.card .body {
		margin: 0;
		font-size: clamp(var(--sl-text-sm), calc(0.5rem + 1vw), var(--sl-text-body));
	}
	.card-black .icon {
		color: var(--sl-color-white);
	}
</style>