cherry-styled-components 0.2.21 → 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,7 +32,7 @@ function toInitials(name) {
 }
 var StyledAvatar = styled.span.withConfig({
 	displayName: "avatar__StyledAvatar",
-	componentId: "sc-5bf22726-0"
+	componentId: "sc-616c0fb2-0"
 })([``, `;`], ({ theme, $size = "default", $color = "primary" }) => {
 	const { box } = avatarSizes[$size];
 	const fill = $color === "primary" ? "primary" : "other";

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, "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([
+], $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-75947fe4-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-3bca3977-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, "primary"), darkFilledTextRule(theme, "primary")) : 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/utils/mixins.d.ts

@@ -10,6 +10,10 @@ 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 theme's

package/dist/utils/mixins.js

@@ -10,6 +10,8 @@ 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 theme's
 * `onPrimary` on a primary fill when it sets one, else the palette's
@@ -108,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

@@ -65,6 +65,14 @@ export interface Colors<TString = string> {
      * 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.21",
+  "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",