cherry-styled-components 0.2.20 → 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/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.20",
+  "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",