cherry-styled-components 0.2.19 → 0.2.21

package/dist/avatar.js

@@ -32,9 +32,10 @@ function toInitials(name) {
 }
 var StyledAvatar = styled.span.withConfig({
 	displayName: "avatar__StyledAvatar",
-	componentId: "sc-3c0e28ca-0"
+	componentId: "sc-5bf22726-0"
 })([``, `;`], ({ theme, $size = "default", $color = "primary" }) => {
 	const { box } = avatarSizes[$size];
+	const fill = $color === "primary" ? "primary" : "other";
 	return css([
 		`display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;width:`,
 		`px;height:`,
@@ -43,7 +44,7 @@ var StyledAvatar = styled.span.withConfig({
 		`;font-size:`,
 		`px;line-height:1;font-weight:600;user-select:none;`,
 		`;& img{width:100%;height:100%;object-fit:cover;display:block;}`
-	], box, box, avatarColors[$color](theme), filledTextColor(theme), Math.round(box * .38), darkFilledTextRule(theme));
+	], box, box, avatarColors[$color](theme), filledTextColor(theme, fill), Math.round(box * .38), darkFilledTextRule(theme, fill));
 });
 function LocalAvatar({ $size = "default", $src, $alt, $name, $icon = User, $color, ...props }, ref) {
 	const initials = $name ? toInitials($name) : "";

package/dist/button.js

@@ -29,7 +29,7 @@ var buttonStyles = (theme, $variant, $size, $outline, $fullWidth, $error, disabl
 	`;}&:focus{box-shadow:0 0 0 4px `,
 	`;}&:active{box-shadow:0 0 0 2px `,
 	`;}`
-], $outline ? theme.colors.primary : filledTextColor(theme), !$outline && darkFilledTextRule(theme), $outline ? "transparent" : theme.colors.primary, theme.colors.primary, theme.colors.primary, $outline ? "transparent" : theme.colors.primaryDark, theme.colors.primaryDark, $outline && `color: ${theme.colors.primaryDark}`, theme.colors.primaryLight, theme.colors.primaryLight), !disabled && $variant === "secondary" && css([
+], $outline ? theme.colors.primary : filledTextColor(theme, "primary"), !$outline && darkFilledTextRule(theme, "primary"), $outline ? "transparent" : theme.colors.primary, theme.colors.primary, theme.colors.primary, $outline ? "transparent" : theme.colors.primaryDark, theme.colors.primaryDark, $outline && `color: ${theme.colors.primaryDark}`, theme.colors.primaryLight, theme.colors.primaryLight), !disabled && $variant === "secondary" && css([
 	`color:`,
 	`;`,
 	` background:`,
@@ -80,7 +80,7 @@ var buttonStyles = (theme, $variant, $size, $outline, $fullWidth, $error, disabl
 	`, $fullWidth && `width: 100%;`);
 var StyledButton = styled.button.withConfig({
 	displayName: "button__StyledButton",
-	componentId: "sc-286fdf36-0"
+	componentId: "sc-75947fe4-0"
 })([``, ``], ({ theme, $variant, $error, $size, $outline, $fullWidth, disabled }) => buttonStyles(theme, $variant, $size, $outline, $fullWidth, $error, disabled));
 function LocalButton({ $variant = "primary", ...props }, ref) {
 	return /*#__PURE__*/ jsxs(StyledButton, {

package/dist/chat-message.js

@@ -19,7 +19,7 @@ import styled, { css } from "styled-components";
 ], theme.fontSizes.text.xs, theme.lineHeights.text.xs, mq("lg"), theme.fontSizes.small.lg, theme.lineHeights.small.lg);
 var StyledChatMessage = styled.div.withConfig({
 	displayName: "chat-message__StyledChatMessage",
-	componentId: "sc-878d3851-0"
+	componentId: "sc-3bca3977-0"
 })([
 	`display:flex;align-items:flex-end;gap:10px;width:100%;& .chat-message-avatar{flex-shrink:0;display:flex;align-items:center;height:calc( `,
 	` * `,
@@ -36,7 +36,7 @@ var StyledChatMessage = styled.div.withConfig({
 	`;color:`,
 	`;`,
 	`;padding:9px 14px;border-radius:16px 16px 4px 16px;margin-left:auto;width:fit-content;max-width:min(560px,88%);font-weight:500;white-space:pre-wrap;overflow-wrap:anywhere;}`
-], theme.colors.primary, filledTextColor(theme), darkFilledTextRule(theme)) : css([`& .chat-message-content{color:`, `;width:100%;}& .chat-message-avatar{position:sticky;bottom:0;}`], theme.colors.dark));
+], theme.colors.primary, filledTextColor(theme, "primary"), darkFilledTextRule(theme, "primary")) : css([`& .chat-message-content{color:`, `;width:100%;}& .chat-message-avatar{position:sticky;bottom:0;}`], theme.colors.dark));
 function LocalChatMessage({ children, $role = "assistant", $avatar, ...props }, ref) {
 	return /*#__PURE__*/ jsxs(StyledChatMessage, {
 		$role,

package/dist/index.js

@@ -34,7 +34,7 @@ import { Flex } from "./flex.js";
 import { Grid } from "./grid.js";
 import { Input, StyledInputWrapper, StyledLabel } from "./input.js";
 import { MaxWidth } from "./max-width.js";
-import { Modal } from "./modal.js";
+import { Modal, useModalLayer } from "./modal.js";
 import { Password } from "./password.js";
 import { Range } from "./range.js";
 import { Select, StyledIconWrapper } from "./select.js";
@@ -44,4 +44,4 @@ import { Textarea } from "./textarea.js";
 import { ThemeToggle } from "./theme-toggle.js";
 import { StyledNotificationItem, StyledNotifications, ToastNotifications, ToastNotificationsContext, ToastNotificationsProvider, useToastNotifications } from "./toast.js";
 import { Toggle } from "./toggle.js";
-export { Accordion, Avatar, AvatarDropzone, Box, Button, Callout, ChatContext, ChatInput, ChatLauncher, ChatMessage, ChatMessageList, ChatPanel, ChatProvider, ChatSource, ChatSources, ChatTyping, CherryThemeProvider, ClientThemeProvider, Col, Container, Dropzone, Flex, GlobalStyles, Grid, Icon, IconButton, Input, MaxWidth, Modal, Password, Prose, Range, Select, Space, Spinner, StyledIconWrapper, StyledInputWrapper, StyledLabel, StyledNotificationItem, StyledNotifications, TabContent, Tabs, Textarea, ThemeContext, ThemeToggle, ToastNotifications, ToastNotificationsContext, ToastNotificationsProvider, Toggle, alpha, breakpoints, buttonStyles, chatTextStyles, colors, colorsDark, createThemeInitScript, createTypographyStyle, darkFilledTextRule, errorInteractiveStyles, filledTextColor, fontSizes, fonts, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, iconButtonStyles, interactiveStyles, lineHeights, matchesAccept, mq, proseStyles, renderIcon, resetButton, resetInput, resolveShowcaseCommand, resolveTheme, shade, shadows, shadowsDark, showcaseCommands, spacing, statusBorderStyles, styledBlockquote, styledButton, styledButtonBig, styledCode, styledH1, styledH2, styledH3, styledH4, styledH5, styledH6, styledHero1, styledHero2, styledHero3, styledInput, styledInputBig, styledSmall, styledStrong, styledText, theme, themeDark, themeInitScript, thinScrollbar, tint, useBelowBreakpoint, useChat, useLockBodyScroll, useMediaQuery, useOnClickOutside, useToastNotifications };
+export { Accordion, Avatar, AvatarDropzone, Box, Button, Callout, ChatContext, ChatInput, ChatLauncher, ChatMessage, ChatMessageList, ChatPanel, ChatProvider, ChatSource, ChatSources, ChatTyping, CherryThemeProvider, ClientThemeProvider, Col, Container, Dropzone, Flex, GlobalStyles, Grid, Icon, IconButton, Input, MaxWidth, Modal, Password, Prose, Range, Select, Space, Spinner, StyledIconWrapper, StyledInputWrapper, StyledLabel, StyledNotificationItem, StyledNotifications, TabContent, Tabs, Textarea, ThemeContext, ThemeToggle, ToastNotifications, ToastNotificationsContext, ToastNotificationsProvider, Toggle, alpha, breakpoints, buttonStyles, chatTextStyles, colors, colorsDark, createThemeInitScript, createTypographyStyle, darkFilledTextRule, errorInteractiveStyles, filledTextColor, fontSizes, fonts, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, iconButtonStyles, interactiveStyles, lineHeights, matchesAccept, mq, proseStyles, renderIcon, resetButton, resetInput, resolveShowcaseCommand, resolveTheme, shade, shadows, shadowsDark, showcaseCommands, spacing, statusBorderStyles, styledBlockquote, styledButton, styledButtonBig, styledCode, styledH1, styledH2, styledH3, styledH4, styledH5, styledH6, styledHero1, styledHero2, styledHero3, styledInput, styledInputBig, styledSmall, styledStrong, styledText, theme, themeDark, themeInitScript, thinScrollbar, tint, useBelowBreakpoint, useChat, useLockBodyScroll, useMediaQuery, useModalLayer, useOnClickOutside, useToastNotifications };

package/dist/modal.d.ts

@@ -14,6 +14,16 @@ export interface ModalProps {
         .modal-title, .modal-content. */
     className?: string;
     style?: React.CSSProperties;
+    /** Joins the modal stack (default true): a Modal or `useModalLayer` cover
+        opened over this one hides it until it closes again. Pass false to let
+        this modal and the ones over it show at the same time. */
+    $stack?: boolean;
 }
-declare function Modal({ children, $isOpen, $onClose, $title, $width, $hideCloseButton, className, style, }: ModalProps): React.ReactPortal | null;
-export { Modal };
+/**
+ * Puts a full-page layer that is not a Modal (an outage screen, a sign-in
+ * wall) on the modal stack while `open`, so an open Modal fades away under
+ * it and returns once it is gone. Returns whether another layer covers it.
+ */
+declare function useModalLayer(open: boolean): boolean;
+declare function Modal({ children, $isOpen, $onClose, $title, $width, $hideCloseButton, className, style, $stack, }: ModalProps): React.ReactPortal | null;
+export { Modal, useModalLayer };

package/dist/modal.js

@@ -7,7 +7,7 @@ import { useOnClickOutside } from "./utils/use-on-click-outside.js";
 import { Icon } from "./icon.js";
 import { IconButton } from "./icon-button.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
 import styled, { css, keyframes } from "styled-components";
 import { X } from "lucide-react";
 import { createPortal } from "react-dom";
@@ -16,31 +16,84 @@ var emptySubscribe = () => () => {};
 function useIsClient() {
 	return useSyncExternalStore(emptySubscribe, () => true, () => false);
 }
+var layers = [];
+var layerListeners = /* @__PURE__ */ new Set();
+function subscribeLayers(listener) {
+	layerListeners.add(listener);
+	return () => {
+		layerListeners.delete(listener);
+	};
+}
+function setLayers(next) {
+	layers = next;
+	for (const listener of layerListeners) listener();
+}
+var COVERED = 1;
+var UNDER_COVER = 2;
+var STACKED = 4;
+function layerFlags(id) {
+	const index = layers.findIndex((layer) => layer.id === id);
+	if (index === -1) return 0;
+	let flags = 0;
+	if (index < layers.length - 1) flags |= COVERED;
+	if (layers.slice(index + 1).some((layer) => layer.kind === "cover")) flags |= UNDER_COVER;
+	if (index > 0 && layers[index - 1].kind === "modal") flags |= STACKED;
+	return flags;
+}
+var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+function useLayer(open, kind) {
+	const id = useId();
+	useIsomorphicLayoutEffect(() => {
+		if (!open) return;
+		setLayers([...layers, {
+			id,
+			kind
+		}]);
+		return () => setLayers(layers.filter((layer) => layer.id !== id));
+	}, [
+		open,
+		id,
+		kind
+	]);
+	return useSyncExternalStore(subscribeLayers, () => layerFlags(id), () => 0);
+}
+/**
+* Puts a full-page layer that is not a Modal (an outage screen, a sign-in
+* wall) on the modal stack while `open`, so an open Modal fades away under
+* it and returns once it is gone. Returns whether another layer covers it.
+*/ function useModalLayer(open) {
+	return (useLayer(open, "cover") & COVERED) !== 0;
+}
 var overlayFadeIn = keyframes([`from{opacity:0;}to{opacity:1;}`]);
 var overlayFadeOut = keyframes([`from{opacity:1;}to{opacity:0;}`]);
 var innerRiseIn = keyframes([`from{transform:translateY(40px);}to{transform:translateY(0);}`]);
 var innerSinkOut = keyframes([`from{transform:translateY(0);}to{transform:translateY(40px);}`]);
+var overlayHide = keyframes([`from{opacity:1;}to{opacity:0;visibility:hidden;}`]);
+var cardOut = keyframes([`from{opacity:1;transform:translateY(0);}to{opacity:0;transform:translateY(40px);visibility:hidden;}`]);
+var cardGone = keyframes([`from{opacity:0;visibility:hidden;}to{opacity:0;visibility:hidden;}`]);
+var cardIn = keyframes([`from{opacity:0;transform:translateY(40px);}to{opacity:1;transform:translateY(0);}`]);
 var StyledModal = styled.div.withConfig({
 	displayName: "modal__StyledModal",
-	componentId: "sc-937855ae-0"
+	componentId: "sc-44ff4d11-0"
 })([
 	`position:fixed;top:0;left:0;width:100%;height:100%;background:`,
 	`;display:flex;justify-content:center;align-items:center;z-index:1010;animation:`,
-	` 0.3s ease both;`,
+	` 0.3s ease both;transition:background-color 0.3s ease;`,
+	` `,
 	` & .modal-inner{background:`,
 	`;border-radius:`,
 	`;padding:20px;max-width:calc(100% - 40px);width:100%;margin:auto;position:relative;animation:`,
-	` 0.3s ease both;`,
+	`;`,
 	`{max-width:500px;`,
 	`}}`
-], ({ theme }) => alpha(theme.colors.primary, 50), ({ $isClosing }) => $isClosing ? overlayFadeOut : overlayFadeIn, ({ $isClosing }) => $isClosing && css([`pointer-events:none;`]), ({ theme }) => theme.colors.light, ({ theme }) => theme.spacing.radius.lg, ({ $isClosing }) => $isClosing ? innerSinkOut : innerRiseIn, mq("lg"), ({ $width }) => $width && css([`max-width:`, `px;`], $width));
+], ({ theme }) => alpha(theme.colors.primary, 50), ({ $isClosing, $layer }) => $isClosing ? overlayFadeOut : $layer === "under-cover" ? overlayHide : overlayFadeIn, ({ $bare }) => $bare && css([`background:transparent;`]), ({ $isClosing, $layer }) => ($isClosing || $layer === "covered" || $layer === "under-cover") && css([`pointer-events:none;`]), ({ theme }) => theme.colors.light, ({ theme }) => theme.spacing.radius.lg, ({ $isClosing, $layer, $cardAway }) => $isClosing ? css([``, ` 0.3s ease both`], $cardAway ? cardGone : innerSinkOut) : $layer === "covered" || $layer === "under-cover" ? css([``, ` 0.3s ease both`], cardOut) : $layer === "arriving" ? css([``, ` 0.3s ease 0.3s both`], cardIn) : css([``, ` 0.3s ease both`], innerRiseIn), mq("lg"), ({ $width }) => $width && css([`max-width:`, `px;`], $width));
 var StyledModalClose = styled(IconButton).withConfig({
 	displayName: "modal__StyledModalClose",
-	componentId: "sc-937855ae-1"
+	componentId: "sc-44ff4d11-1"
 })([`position:absolute;top:20px;right:20px;z-index:10;`]);
 var StyledModalTitle = styled.h2.withConfig({
 	displayName: "modal__StyledModalTitle",
-	componentId: "sc-937855ae-2"
+	componentId: "sc-44ff4d11-2"
 })([
 	`--divider-color:`,
 	`;margin:0 0 15px 0;padding:0 0 15px 0;color:`,
@@ -49,22 +102,40 @@ var StyledModalTitle = styled.h2.withConfig({
 ], ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.dark, ({ theme }) => styledH5(theme));
 var StyledModalContent = styled.div.withConfig({
 	displayName: "modal__StyledModalContent",
-	componentId: "sc-937855ae-3"
+	componentId: "sc-44ff4d11-3"
 })([
 	`max-height:calc(100svh - 200px);overflow-y:auto;padding:5px;margin:-5px;--divider-color:`,
 	`;`,
 	`;& hr{margin:20px 0;border:none;border-bottom:solid 1px var(--divider-color);}`
 ], ({ theme }) => theme.colors.grayLight, ({ theme }) => styledText(theme));
-function Modal({ children, $isOpen, $onClose, $title, $width, $hideCloseButton, className, style }) {
+function Modal({ children, $isOpen, $onClose, $title, $width, $hideCloseButton, className, style, $stack = true }) {
 	const wrapperRef = useRef(null);
 	const elmRef = useRef(null);
 	const isClient = useIsClient();
 	const [shouldRender, setShouldRender] = useState($isOpen);
-	if ($isOpen && !shouldRender) setShouldRender(true);
+	const [hasStacked, setHasStacked] = useState(false);
+	const [arrived, setArrived] = useState(false);
+	if ($isOpen && !shouldRender) {
+		setShouldRender(true);
+		setHasStacked(false);
+		setArrived(false);
+	}
+	const live = useLayer($isOpen && $stack, "modal");
+	const [shown, setShown] = useState(live);
+	if ($isOpen && live !== shown) setShown(live);
+	const flags = $isOpen ? live : shown;
+	const covered = (flags & COVERED) !== 0;
+	const underCover = (flags & UNDER_COVER) !== 0;
+	const stacked = (flags & STACKED) !== 0;
+	if ($isOpen && (covered || stacked) && !hasStacked) setHasStacked(true);
+	if ($isOpen && covered && arrived) setArrived(false);
+	if (!$isOpen && shouldRender && underCover) setShouldRender(false);
+	const layer = underCover ? "under-cover" : covered ? "covered" : hasStacked ? "arriving" : void 0;
+	const cardAway = covered || hasStacked && !arrived;
 	const isClosing = !$isOpen && shouldRender;
 	const closeModal = useCallback(() => {
-		$onClose();
-	}, [$onClose]);
+		if (!covered) $onClose();
+	}, [$onClose, covered]);
 	useEffect(() => {
 		if (!$isOpen) return;
 		function handleKeydown(event) {
@@ -84,6 +155,9 @@ function Modal({ children, $isOpen, $onClose, $title, $width, $hideCloseButton,
 	if (!isClient || !shouldRender) return null;
 	return /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx(StyledModal, {
 		$isClosing: isClosing,
+		$layer: layer,
+		$cardAway: cardAway,
+		$bare: stacked,
 		$width,
 		className,
 		style,
@@ -91,6 +165,9 @@ function Modal({ children, $isOpen, $onClose, $title, $width, $hideCloseButton,
 		children: /*#__PURE__*/ jsxs("div", {
 			className: "modal-inner",
 			ref: wrapperRef,
+			onAnimationEnd: (event) => {
+				if (event.target === event.currentTarget && layer === "arriving") setArrived(true);
+			},
 			role: "dialog",
 			"aria-modal": "true",
 			"aria-label": $title,
@@ -118,4 +195,4 @@ function Modal({ children, $isOpen, $onClose, $title, $width, $hideCloseButton,
 	}), document.body);
 }
 //#endregion
-export { Modal };
+export { Modal, useModalLayer };

package/dist/styled-components/client-theme-provider.js

@@ -77,7 +77,9 @@ function resolveColor(value) {
 	}, [effectiveTheme.isDark, reconciled]);
 	useEffect(() => {
 		if (!$themeColor) return;
-		const background = resolveColor(effectiveTheme.colors[$themeColor]);
+		const color = effectiveTheme.colors[$themeColor];
+		if (!color) return;
+		const background = resolveColor(color);
 		let meta = document.querySelector("meta[name=\"theme-color\"]");
 		if (!meta) {
 			meta = document.createElement("meta");

package/dist/utils/mixins.d.ts

@@ -9,18 +9,23 @@ export declare const alpha: (color: string, percent: number) => string;
 export declare const shade: (color: string, percent: number) => string;
 /** Lightens a color by mixing it toward white. See `alpha` for why it is CSS. */
 export declare const tint: (color: string, percent: number) => string;
+/** Which fill a label sits on, so a theme's `onPrimary` can answer for its own. */
+export type FilledTextFill = "primary" | "other";
 /**
- * Text color for a label sitting on a brand-colored fill: the palette's
+ * Text color for a label sitting on a brand-colored fill: the theme's
+ * `onPrimary` on a primary fill when it sets one, else the palette's
  * contrasting end, `light` in light mode and `dark` in dark mode.
  */
-export declare const filledTextColor: (theme: Theme) => string;
+export declare const filledTextColor: (theme: Theme, fill?: FilledTextFill) => string;
 /**
  * The same choice restated as a rule scoped to a `dark` class on <html>, which
  * is what apps resolving the mode in CSS key off before hydration can swap the
  * theme object. Additive: with an already-dark theme object both paths resolve
- * to the same color. Interpolate alongside `filledTextColor`.
+ * to the same color. A dark theme object's `onPrimary` answers for a primary
+ * fill; a light one under the class cannot know the dark value, so it keeps
+ * the palette's `dark`. Interpolate alongside `filledTextColor`.
  */
-export declare const darkFilledTextRule: (theme: Theme) => string;
+export declare const darkFilledTextRule: (theme: Theme, fill?: FilledTextFill) => string;
 /**
  * Slim, theme-aware scrollbar for internal scroll areas (chat transcripts, code
  * blocks, tables) so the chunky native bar doesn't stand out, especially in

package/dist/utils/mixins.js

@@ -11,15 +11,18 @@ import { css } from "styled-components";
 /** Darkens a color by mixing it toward black. See `alpha` for why it is CSS. */ var shade = (color, percent) => `color-mix(in srgb, ${color} ${100 - percent}%, black)`;
 /** Lightens a color by mixing it toward white. See `alpha` for why it is CSS. */ var tint = (color, percent) => `color-mix(in srgb, ${color} ${100 - percent}%, white)`;
 /**
-* Text color for a label sitting on a brand-colored fill: the palette's
+* Text color for a label sitting on a brand-colored fill: the theme's
+* `onPrimary` on a primary fill when it sets one, else the palette's
 * contrasting end, `light` in light mode and `dark` in dark mode.
-*/ var filledTextColor = (theme) => theme.isDark ? theme.colors.dark : theme.colors.light;
+*/ var filledTextColor = (theme, fill = "other") => fill === "primary" && theme.colors.onPrimary ? theme.colors.onPrimary : theme.isDark ? theme.colors.dark : theme.colors.light;
 /**
 * The same choice restated as a rule scoped to a `dark` class on <html>, which
 * is what apps resolving the mode in CSS key off before hydration can swap the
 * theme object. Additive: with an already-dark theme object both paths resolve
-* to the same color. Interpolate alongside `filledTextColor`.
-*/ var darkFilledTextRule = (theme) => `:root.dark & { color: ${theme.colors.dark}; }`;
+* to the same color. A dark theme object's `onPrimary` answers for a primary
+* fill; a light one under the class cannot know the dark value, so it keeps
+* the palette's `dark`. Interpolate alongside `filledTextColor`.
+*/ var darkFilledTextRule = (theme, fill = "other") => `:root.dark & { color: ${fill === "primary" && theme.isDark && theme.colors.onPrimary ? theme.colors.onPrimary : theme.colors.dark}; }`;
 /**
 * Slim, theme-aware scrollbar for internal scroll areas (chat transcripts, code
 * blocks, tables) so the chunky native bar doesn't stand out, especially in

package/dist/utils/theme.d.ts

@@ -57,6 +57,14 @@ export interface Colors<TString = string> {
     info: TString;
     dark: TString;
     light: TString;
+    /**
+     * Optional label color for text on a `primary` fill (a primary button, a
+     * sent chat bubble, a primary avatar). Set it when neither `light` nor
+     * `dark` reads on the theme's primary, e.g. a bright dark-mode primary
+     * that a light label cannot sit on. Without it the fill takes the palette's
+     * contrasting end, as `filledTextColor` describes.
+     */
+    onPrimary?: TString;
 }
 export interface Shadows<TString = string> {
     xs: TString;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cherry-styled-components",
-  "version": "0.2.19",
+  "version": "0.2.21",
   "description": "Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.",
   "private": false,
   "type": "module",