cherry-styled-components 0.2.20 → 0.2.22

package/dist/avatar.js

@@ -1,6 +1,6 @@
 "use client";
 "use client";
-import { darkFilledTextRule, filledTextColor } from "./utils/mixins.js";
+import { darkFilledTextRule, filledTextColor, primaryFillColor } from "./utils/mixins.js";
 import { renderIcon } from "./icon.js";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
@@ -22,7 +22,7 @@ var avatarSizes = {
 	}
 };
 var avatarColors = {
-	primary: (theme) => theme.colors.primary,
+	primary: (theme) => primaryFillColor(theme),
 	secondary: (theme) => theme.colors.secondary,
 	tertiary: (theme) => theme.colors.tertiary,
 	gray: (theme) => theme.colors.grayDark
@@ -32,9 +32,10 @@ function toInitials(name) {
 }
 var StyledAvatar = styled.span.withConfig({
 	displayName: "avatar__StyledAvatar",
-	componentId: "sc-3c0e28ca-0"
+	componentId: "sc-616c0fb2-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

@@ -1,6 +1,6 @@
 "use client";
 "use client";
-import { darkFilledTextRule, filledTextColor, formElementHeightStyles, resetButton, shade, tint } from "./utils/mixins.js";
+import { darkFilledTextRule, filledTextColor, formElementHeightStyles, primaryFillColor, primaryFillHoverColor, resetButton, shade, tint } from "./utils/mixins.js";
 import { jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import styled, { css } from "styled-components";
@@ -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" : primaryFillColor(theme), $outline ? theme.colors.primary : primaryFillColor(theme), theme.colors.primary, $outline ? "transparent" : primaryFillHoverColor(theme), $outline ? theme.colors.primaryDark : primaryFillHoverColor(theme), $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-577b793f-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

@@ -1,7 +1,7 @@
 "use client";
 "use client";
 import { mq } from "./utils/theme.js";
-import { darkFilledTextRule, filledTextColor } from "./utils/mixins.js";
+import { darkFilledTextRule, filledTextColor, primaryFillColor } from "./utils/mixins.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import styled, { css } from "styled-components";
@@ -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-7327cbb7-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));
+], primaryFillColor(theme), 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

@@ -1,6 +1,6 @@
 import { GlobalStyles } from "./utils/global.js";
 import { breakpoints, colors, colorsDark, fontSizes, fonts, lineHeights, mq, shadows, shadowsDark, spacing, theme, themeDark } from "./utils/theme.js";
-import { alpha, darkFilledTextRule, errorInteractiveStyles, filledTextColor, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, interactiveStyles, resetButton, resetInput, shade, statusBorderStyles, thinScrollbar, tint } from "./utils/mixins.js";
+import { alpha, darkFilledTextRule, errorInteractiveStyles, filledTextColor, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, interactiveStyles, primaryFillColor, primaryFillHoverColor, resetButton, resetInput, shade, statusBorderStyles, thinScrollbar, tint } from "./utils/mixins.js";
 import { createTypographyStyle, styledBlockquote, styledButton, styledButtonBig, styledCode, styledH1, styledH2, styledH3, styledH4, styledH5, styledH6, styledHero1, styledHero2, styledHero3, styledInput, styledInputBig, styledSmall, styledStrong, styledText } from "./utils/typography.js";
 import { useLockBodyScroll } from "./utils/use-lock-body-scroll.js";
 import { useBelowBreakpoint, useMediaQuery } from "./utils/use-media-query.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, useModalLayer, 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, primaryFillColor, primaryFillHoverColor, 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/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,27 @@ 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. */
+/** The solid primary fill: the theme's `primaryFill`, else `primary`. */
+export declare const primaryFillColor: (theme: Theme) => string;
+/** The solid primary fill on hover: a shade of `primaryFill`, else `primaryDark`. */
+export declare const primaryFillHoverColor: (theme: Theme) => string;
+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

@@ -10,16 +10,21 @@ import { css } from "styled-components";
 */ var alpha = (color, percent) => `color-mix(in srgb, ${color} ${percent}%, transparent)`;
 /** 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)`;
+/** Which fill a label sits on, so a theme's `onPrimary` can answer for its own. */ /** The solid primary fill: the theme's `primaryFill`, else `primary`. */ var primaryFillColor = (theme) => theme.colors.primaryFill ?? theme.colors.primary;
+/** The solid primary fill on hover: a shade of `primaryFill`, else `primaryDark`. */ var primaryFillHoverColor = (theme) => theme.colors.primaryFill ? shade(theme.colors.primaryFill, 10) : theme.colors.primaryDark;
 /**
-* 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
@@ -105,4 +110,4 @@ var generateDirectionStyles = (size, direction) => css([
 	`;}`
 ], mq(size), direction && `${direction}`);
 //#endregion
-export { alpha, darkFilledTextRule, errorInteractiveStyles, filledTextColor, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, interactiveStyles, resetButton, resetInput, shade, statusBorderStyles, thinScrollbar, tint };
+export { alpha, darkFilledTextRule, errorInteractiveStyles, filledTextColor, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, interactiveStyles, primaryFillColor, primaryFillHoverColor, resetButton, resetInput, shade, statusBorderStyles, thinScrollbar, tint };

package/dist/utils/theme.d.ts

@@ -57,6 +57,22 @@ 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;
+    /**
+     * Optional fill for the solid primary surfaces (the primary button, the
+     * sent chat bubble, the primary avatar), whose label is `onPrimary`. Set it
+     * when the theme's `primary` is too bright to carry a label but still right
+     * for accents (links, rings, outlines): the fills take this deeper shade
+     * and the accents keep `primary`. Without it the fills use `primary`.
+     */
+    primaryFill?: 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.22",
   "description": "Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.",
   "private": false,
   "type": "module",