cherry-styled-components 0.2.21 → 0.2.23

package/dist/avatar-dropzone.js

@@ -1,6 +1,6 @@
 "use client";
 "use client";
-import { alpha, resetButton } from "./utils/mixins.js";
+import { alpha, darkPrimaryTintRule, primaryTintColor, resetButton } from "./utils/mixins.js";
 import { Icon, renderIcon } from "./icon.js";
 import { matchesAccept } from "./dropzone.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -115,7 +115,7 @@ function LocalAvatarDropzone({ $size, $icon = User, $maxBytes, "aria-label": ari
 var AvatarDropzone = /*#__PURE__*/ forwardRef(LocalAvatarDropzone);
 var StyledAvatarDropzoneWrapper = styled.span.withConfig({
 	displayName: "avatar-dropzone__StyledAvatarDropzoneWrapper",
-	componentId: "sc-b516c8e0-0"
+	componentId: "sc-c05e8173-0"
 })([
 	`position:relative;display:inline-flex;width:`,
 	`px;height:`,
@@ -123,7 +123,7 @@ var StyledAvatarDropzoneWrapper = styled.span.withConfig({
 ], ({ $size }) => avatarSizes[$size ?? "default"].box, ({ $size }) => avatarSizes[$size ?? "default"].box);
 var StyledAvatarDropzone = styled.button.withConfig({
 	displayName: "avatar-dropzone__StyledAvatarDropzone",
-	componentId: "sc-b516c8e0-1"
+	componentId: "sc-c05e8173-1"
 })([
 	``,
 	`;font-family:inherit;display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;overflow:hidden;border:2px `,
@@ -142,12 +142,12 @@ var StyledAvatarDropzone = styled.button.withConfig({
 ], resetButton, ({ $hasImage }) => $hasImage ? "solid" : "dashed", ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayDark, ({ $size }) => avatarSizes[$size ?? "default"].icon, ({ $size }) => avatarSizes[$size ?? "default"].icon, ({ theme }) => theme.colors.primary, ({ theme, $dragOver }) => $dragOver && css([
 	`border-color:`,
 	`;background:`,
-	`;:root.dark &{background:`,
-	`;}`
-], theme.colors.primary, alpha(theme.colors.primary, theme.isDark ? 12 : 5), alpha(theme.colors.primary, 12)), ({ theme }) => theme.colors.primary, ({ theme }) => alpha(theme.colors.primary, theme.isDark ? 10 : 4), ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primaryLight);
+	`;`,
+	``
+], theme.colors.primary, primaryTintColor(theme, "drop"), darkPrimaryTintRule(theme, "drop")), ({ theme }) => theme.colors.primary, ({ theme }) => primaryTintColor(theme, "hover"), ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primaryLight);
 var StyledAvatarRemove = styled.button.withConfig({
 	displayName: "avatar-dropzone__StyledAvatarRemove",
-	componentId: "sc-b516c8e0-2"
+	componentId: "sc-c05e8173-2"
 })([
 	``,
 	`;position:absolute;top:0;right:0;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;color:#ffffff;background:`,

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/callout.js

@@ -84,7 +84,7 @@ var tintStyles = (tint) => css([
 ], tint.border, tint.background, tint.text);
 var StyledCallout = styled.div.withConfig({
 	displayName: "callout__StyledCallout",
-	componentId: "sc-46cf6e91-0"
+	componentId: "sc-18dbabb6-0"
 })([
 	`background:`,
 	`;border:solid 1px `,
@@ -96,9 +96,10 @@ var StyledCallout = styled.div.withConfig({
 ], ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.spacing.radius.lg, ({ theme }) => theme.colors.grayDark, ({ theme }) => styledSmall(theme), ({ $type, theme }) => $type && css([
 	``,
 	`;`,
-	`;:root.dark &{`,
+	`;:root.dark &,:root [data-theme="dark"] &{`,
+	`;}:root [data-theme="light"] &{`,
 	`;}`
-], tintStyles(calloutTints[$type].light), theme.isDark && tintStyles(calloutTints[$type].dark), tintStyles(calloutTints[$type].dark)));
+], tintStyles(calloutTints[$type].light), theme.isDark && tintStyles(calloutTints[$type].dark), tintStyles(calloutTints[$type].dark), tintStyles(calloutTints[$type].light)));
 function LocalCallout({ children, $type, $icon, $hideIcon, ...props }, ref) {
 	const icon = $icon ?? ($type ? calloutIcons[$type] : void 0);
 	return /*#__PURE__*/ jsxs(StyledCallout, {

package/dist/chat-launcher.js

@@ -1,6 +1,6 @@
 "use client";
 "use client";
-import { alpha, interactiveStyles } from "./utils/mixins.js";
+import { accentColor, alpha, interactiveStyles } from "./utils/mixins.js";
 import { Icon } from "./icon.js";
 import { ChatContext } from "./chat-provider.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -22,7 +22,7 @@ var pulseGlow = keyframes([`0%,100%{opacity:0.5;filter:blur(16px);}50%{opacity:1
 var conicStops = (colors) => [...colors, colors[0]].join(", ");
 var StyledChatLauncher = styled.button.withConfig({
 	displayName: "chat-launcher__StyledChatLauncher",
-	componentId: "sc-61e3ed78-0"
+	componentId: "sc-cfea1742-0"
 })([
 	``,
 	`;appearance:none;outline:none;cursor:pointer;box-sizing:border-box;height:30px;background:`,
@@ -33,7 +33,7 @@ var StyledChatLauncher = styled.button.withConfig({
 	`;border-radius:`,
 	`;}& svg{width:16px;height:16px;color:inherit;}`,
 	``
-], interactiveStyles, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark, ({ theme }) => theme.spacing.radius.xs, ({ theme }) => theme.colors.light, ({ theme }) => theme.spacing.radius.xs, ({ $glow, $glowColors = GLOW_COLORS, $isActive, theme }) => $glow && css([
+], interactiveStyles, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayLight, ({ theme }) => accentColor(theme), ({ theme }) => theme.spacing.radius.xs, ({ theme }) => theme.colors.light, ({ theme }) => theme.spacing.radius.xs, ({ $glow, $glowColors = GLOW_COLORS, $isActive, theme }) => $glow && css([
 	`position:relative;isolation:isolate;&::before,&::after,& .chat-launcher-ring{content:"";position:absolute;background:conic-gradient( from var(--cherry-gradient-angle),`,
 	` );opacity:0;transition:opacity 0.3s ease;animation:`,
 	` 3s linear infinite;z-index:-1;pointer-events:none;}&::before{inset:-1px;border-radius:calc(`,

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/chat-sources.js

@@ -1,17 +1,17 @@
 "use client";
 "use client";
-import { alpha, interactiveStyles } from "./utils/mixins.js";
+import { accentColor, alpha, interactiveStyles } from "./utils/mixins.js";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import styled from "styled-components";
 //#region src/lib/chat-sources.tsx
 var StyledChatSources = styled.div.withConfig({
 	displayName: "chat-sources__StyledChatSources",
-	componentId: "sc-f28b3c84-0"
+	componentId: "sc-1650021a-0"
 })([`display:flex;gap:16px;flex-wrap:wrap;&:not(:first-child){margin-top:10px;}`]);
 var StyledChatSource = styled.a.withConfig({
 	displayName: "chat-sources__StyledChatSource",
-	componentId: "sc-f28b3c84-1"
+	componentId: "sc-1650021a-1"
 })([
 	`position:relative;text-decoration:none;font-size:`,
 	`;line-height:1;color:`,
@@ -20,7 +20,7 @@ var StyledChatSource = styled.a.withConfig({
 	`;`,
 	`;& svg{width:14px;height:14px;flex-shrink:0;}&:hover{color:`,
 	`;}`
-], ({ theme }) => theme.fontSizes.small.lg, ({ theme }) => theme.colors.primary, ({ theme }) => alpha(theme.colors.primaryLight, 10), ({ theme }) => theme.spacing.radius.xs, interactiveStyles, ({ theme }) => theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark);
+], ({ theme }) => theme.fontSizes.small.lg, ({ theme }) => theme.colors.primary, ({ theme }) => alpha(theme.colors.primaryLight, 10), ({ theme }) => theme.spacing.radius.xs, interactiveStyles, ({ theme }) => accentColor(theme));
 function LocalChatSources({ children, ...props }, ref) {
 	return /*#__PURE__*/ jsx(StyledChatSources, {
 		...props,

package/dist/dropzone.js

@@ -1,7 +1,7 @@
 "use client";
 "use client";
 import { mq } from "./utils/theme.js";
-import { alpha, resetButton } from "./utils/mixins.js";
+import { alpha, darkPrimaryTintRule, primaryTintColor, resetButton } from "./utils/mixins.js";
 import { Icon, renderIcon } from "./icon.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
@@ -155,11 +155,11 @@ function LocalDropzone({ $prompt = "Drag & drop files here", $browse, $hint, $ic
 var Dropzone = /*#__PURE__*/ forwardRef(LocalDropzone);
 var StyledDropzoneWrapper = styled.div.withConfig({
 	displayName: "dropzone__StyledDropzoneWrapper",
-	componentId: "sc-1391bc72-0"
+	componentId: "sc-6ed03d1-0"
 })([`display:flex;flex-direction:column;gap:12px;width:100%;`]);
 var StyledDropzone = styled.button.withConfig({
 	displayName: "dropzone__StyledDropzone",
-	componentId: "sc-1391bc72-1"
+	componentId: "sc-6ed03d1-1"
 })([
 	``,
 	`;font-family:inherit;display:flex;flex-direction:`,
@@ -179,12 +179,12 @@ var StyledDropzone = styled.button.withConfig({
 ], resetButton, ({ $inline }) => $inline ? "row" : "column", ({ $inline }) => $inline ? "10px" : "8px", ({ $inline }) => $inline ? "10px 14px" : "24px 20px", ({ theme }) => theme.spacing.radius.lg, ({ theme }) => theme.colors.grayLight, ({ theme, $inline }) => $inline ? "transparent" : theme.colors.light, ({ theme }) => theme.colors.grayDark, ({ $inline }) => $inline ? "left" : "center", ({ theme, $dragOver }) => $dragOver && css([
 	`border-color:`,
 	`;background:`,
-	`;:root.dark &{background:`,
-	`;}`
-], theme.colors.primary, alpha(theme.colors.primary, theme.isDark ? 12 : 5), alpha(theme.colors.primary, 12)), ({ theme }) => theme.colors.primary, ({ theme }) => alpha(theme.colors.primary, theme.isDark ? 10 : 4), ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primaryLight);
+	`;`,
+	``
+], theme.colors.primary, primaryTintColor(theme, "drop"), darkPrimaryTintRule(theme, "drop")), ({ theme }) => theme.colors.primary, ({ theme }) => primaryTintColor(theme, "hover"), ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primaryLight);
 var StyledDropIcon = styled.span.withConfig({
 	displayName: "dropzone__StyledDropIcon",
-	componentId: "sc-1391bc72-2"
+	componentId: "sc-6ed03d1-2"
 })([
 	`display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:`,
 	`;height:`,
@@ -198,7 +198,7 @@ var StyledDropIcon = styled.span.withConfig({
 ], ({ $inline }) => $inline ? "32px" : "44px", ({ $inline }) => $inline ? "32px" : "44px", ({ theme }) => theme.spacing.radius.lg, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.primary, ({ $inline }) => $inline ? "18px" : "22px", ({ $inline }) => $inline ? "18px" : "22px");
 var StyledDropPrompt = styled.span.withConfig({
 	displayName: "dropzone__StyledDropPrompt",
-	componentId: "sc-1391bc72-3"
+	componentId: "sc-6ed03d1-3"
 })([
 	`display:flex;flex-direction:`,
 	`;flex-wrap:wrap;align-items:baseline;gap:`,
@@ -210,7 +210,7 @@ var StyledDropPrompt = styled.span.withConfig({
 ], ({ $inline }) => $inline ? "row" : "column", ({ $inline }) => $inline ? "0 6px" : "2px", ({ theme }) => theme.fontSizes.text.xs, ({ theme }) => theme.lineHeights.text.xs, ({ theme }) => theme.colors.dark, ({ theme }) => theme.colors.grayDark);
 var StyledDropHint = styled.span.withConfig({
 	displayName: "dropzone__StyledDropHint",
-	componentId: "sc-1391bc72-4"
+	componentId: "sc-6ed03d1-4"
 })([
 	`font-family:inherit;font-size:`,
 	`;line-height:`,
@@ -220,11 +220,11 @@ var StyledDropHint = styled.span.withConfig({
 ], ({ theme }) => theme.fontSizes.small.xs, ({ theme }) => theme.lineHeights.small.xs, ({ theme }) => theme.colors.gray, ({ $inline }) => $inline && css([`margin-left:auto;`]));
 var StyledThumbs = styled.div.withConfig({
 	displayName: "dropzone__StyledThumbs",
-	componentId: "sc-1391bc72-5"
+	componentId: "sc-6ed03d1-5"
 })([`display:grid;grid-template-columns:repeat(auto-fill,72px);gap:10px;`, `{grid-template-columns:repeat(auto-fill,84px);}`], mq("sm"));
 var StyledThumb = styled.div.withConfig({
 	displayName: "dropzone__StyledThumb",
-	componentId: "sc-1391bc72-6"
+	componentId: "sc-6ed03d1-6"
 })([
 	`position:relative;width:72px;height:72px;border-radius:`,
 	`;overflow:hidden;border:solid 1px `,
@@ -234,7 +234,7 @@ var StyledThumb = styled.div.withConfig({
 ], ({ theme }) => theme.spacing.radius.lg, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.colors.light, mq("sm"));
 var StyledThumbFile = styled.span.withConfig({
 	displayName: "dropzone__StyledThumbFile",
-	componentId: "sc-1391bc72-7"
+	componentId: "sc-6ed03d1-7"
 })([
 	`display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;height:100%;padding:6px;color:`,
 	`;& svg{width:20px;height:20px;color:`,
@@ -242,7 +242,7 @@ var StyledThumbFile = styled.span.withConfig({
 ], ({ theme }) => theme.colors.grayDark, ({ theme }) => theme.colors.primary);
 var StyledThumbRemove = styled.button.withConfig({
 	displayName: "dropzone__StyledThumbRemove",
-	componentId: "sc-1391bc72-8"
+	componentId: "sc-6ed03d1-8"
 })([
 	``,
 	`;position:absolute;top:4px;right:4px;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;color:#ffffff;background:`,

package/dist/icon-button.js

@@ -1,6 +1,6 @@
 "use client";
 "use client";
-import { alpha, resetButton, shade, tint } from "./utils/mixins.js";
+import { darkPrimaryTintRule, primaryTintColor, resetButton, shade, tint } from "./utils/mixins.js";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import styled, { css } from "styled-components";
@@ -57,9 +57,9 @@ var iconButtonStyles = (theme, $size, $error, disabled, $active) => {
 		`border-color:`,
 		`;background:`,
 		`;color:`,
-		`;:root.dark &{background:`,
-		`;}`
-	], theme.colors.primary, alpha(theme.colors.primary, theme.isDark ? 18 : 10), theme.colors.primary, alpha(theme.colors.primary, 18)), disabled && css([
+		`;`,
+		``
+	], theme.colors.primary, primaryTintColor(theme, "active"), theme.colors.primary, darkPrimaryTintRule(theme, "active")), disabled && css([
 		`cursor:not-allowed;background:`,
 		`;border-color:`,
 		`;color:`,
@@ -68,7 +68,7 @@ var iconButtonStyles = (theme, $size, $error, disabled, $active) => {
 };
 var StyledIconButton = styled.button.withConfig({
 	displayName: "icon-button__StyledIconButton",
-	componentId: "sc-9fd4b85f-0"
+	componentId: "sc-4a741989-0"
 })([``, ``], ({ theme, $size, $error, disabled, $active }) => iconButtonStyles(theme, $size, $error, disabled, $active));
 function LocalIconButton({ ...props }, ref) {
 	return /*#__PURE__*/ jsx(StyledIconButton, {

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 { accentColor, alpha, darkFilledTextRule, darkPrimaryTintRule, errorInteractiveStyles, filledTextColor, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, interactiveStyles, linkColor, primaryFillColor, primaryFillHoverColor, primaryTintColor, resetButton, resetInput, shade, statusBorderStyles, thinScrollbar, tint } from "./utils/mixins.js";
+import { GlobalStyles } from "./utils/global.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, accentColor, alpha, breakpoints, buttonStyles, chatTextStyles, colors, colorsDark, createThemeInitScript, createTypographyStyle, darkFilledTextRule, darkPrimaryTintRule, errorInteractiveStyles, filledTextColor, fontSizes, fonts, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, iconButtonStyles, interactiveStyles, lineHeights, linkColor, matchesAccept, mq, primaryFillColor, primaryFillHoverColor, primaryTintColor, 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/prose.js

@@ -1,12 +1,11 @@
 "use client";
 "use client";
-import { alpha, thinScrollbar } from "./utils/mixins.js";
+import { accentColor, alpha, thinScrollbar } from "./utils/mixins.js";
 import { styledH1, styledH2, styledH3, styledH4, styledH5, styledH6, styledSmall, styledText } from "./utils/typography.js";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import styled, { css } from "styled-components";
 //#region src/lib/prose.tsx
-var accent = (theme) => theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark;
 /**
 * Styles for rendered markdown: links, lists, tables, code, media and
 * headings. Exported so it can be applied to an element that is already
@@ -58,11 +57,11 @@ var accent = (theme) => theme.isDark ? theme.colors.primaryLight : theme.colors.
 		`;`,
 		`;}}& img,& video,& iframe{max-width:100%;border-radius:`,
 		`;margin:10px 0;display:block;}`
-	], theme.colors.dark, styledText(theme), block, styledText(theme), block, theme.colors.dark, ($compact ? styledH3 : styledH1)(theme), ($compact ? styledH4 : styledH2)(theme), ($compact ? styledH5 : styledH3)(theme), ($compact ? styledH6 : styledH4)(theme), ($compact ? styledH6 : styledH5)(theme), styledH6(theme), theme.colors.primary, accent(theme), theme.colors.primary, theme.spacing.radius.xs, theme.colors.primary, theme.colors.primaryLight, block, styledText(theme), theme.colors.primary, styledText(theme), theme.colors.primary, alpha(theme.colors.primaryLight, 20), theme.colors.dark, theme.spacing.radius.xs, theme.fonts.mono, thinScrollbar, block, block, theme.colors.grayLight, theme.colors.grayDark, block, theme.colors.grayLight, block, thinScrollbar, theme.colors.grayLight, styledSmall(theme), theme.colors.dark, theme.colors.grayLight, theme.colors.grayDark, styledSmall(theme), theme.spacing.radius.lg);
+	], theme.colors.dark, styledText(theme), block, styledText(theme), block, theme.colors.dark, ($compact ? styledH3 : styledH1)(theme), ($compact ? styledH4 : styledH2)(theme), ($compact ? styledH5 : styledH3)(theme), ($compact ? styledH6 : styledH4)(theme), ($compact ? styledH6 : styledH5)(theme), styledH6(theme), theme.colors.primary, accentColor(theme), theme.colors.primary, theme.spacing.radius.xs, theme.colors.primary, theme.colors.primaryLight, block, styledText(theme), theme.colors.primary, styledText(theme), theme.colors.primary, alpha(theme.colors.primaryLight, 20), theme.colors.dark, theme.spacing.radius.xs, theme.fonts.mono, thinScrollbar, block, block, theme.colors.grayLight, theme.colors.grayDark, block, theme.colors.grayLight, block, thinScrollbar, theme.colors.grayLight, styledSmall(theme), theme.colors.dark, theme.colors.grayLight, theme.colors.grayDark, styledSmall(theme), theme.spacing.radius.lg);
 };
 var StyledProse = styled.div.withConfig({
 	displayName: "prose__StyledProse",
-	componentId: "sc-c60056db-0"
+	componentId: "sc-eed03297-0"
 })([``, `;`], ({ theme, $compact }) => proseStyles(theme, $compact));
 function LocalProse({ children, ...props }, ref) {
 	return /*#__PURE__*/ jsx(StyledProse, {

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

@@ -59,7 +59,7 @@ function resolveColor(value) {
 				persistTheme(cookieValue);
 			}
 			const wantDark = cookieValue === "dark";
-			if (initialTheme.isDark !== wantDark) {
+			if (Boolean(initialTheme.isDark) !== wantDark) {
 				setOverrideTheme(wantDark ? themeDark : theme);
 				setReconciled(true);
 				return;
@@ -73,7 +73,7 @@ function resolveColor(value) {
 	}, [overrideTheme]);
 	useEffect(() => {
 		if (!reconciled) return;
-		document.documentElement.classList.toggle("dark", effectiveTheme.isDark);
+		document.documentElement.classList.toggle("dark", Boolean(effectiveTheme.isDark));
 	}, [effectiveTheme.isDark, reconciled]);
 	useEffect(() => {
 		if (!$themeColor) return;
@@ -99,7 +99,7 @@ function resolveColor(value) {
 		if (!themeDark) return;
 		setTheme(effectiveTheme.isDark ? theme : themeDark);
 	};
-	const GlobalStylesComponent = $globalStyles ? GlobalStyles(effectiveTheme) : null;
+	const GlobalStylesComponent = useMemo(() => $globalStyles ? GlobalStyles(effectiveTheme) : null, [$globalStyles, effectiveTheme]);
 	return /*#__PURE__*/ jsx(ThemeProvider, {
 		theme: effectiveTheme,
 		children: /*#__PURE__*/ jsxs(ThemeContext.Provider, {

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

@@ -2,7 +2,7 @@
 "use client";
 import { GlobalStyles } from "../utils/global.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { createContext, useEffect, useState } from "react";
+import { createContext, useEffect, useMemo, useState } from "react";
 import { ThemeProvider } from "styled-components";
 //#region src/lib/styled-components/theme-provider.tsx
 var ThemeContext = /*#__PURE__*/ createContext({
@@ -26,9 +26,9 @@ function CherryThemeProvider({ children, theme, themeDark }) {
 		const next = currentTheme.isDark ? theme : themeDark;
 		setTheme(next);
 		localStorage.theme = next.isDark ? "dark" : "light";
-		document.documentElement.classList.toggle("dark", next.isDark);
+		document.documentElement.classList.toggle("dark", Boolean(next.isDark));
 	};
-	const GlobalStylesComponent = GlobalStyles(currentTheme);
+	const GlobalStylesComponent = useMemo(() => GlobalStyles(currentTheme), [currentTheme]);
 	return /*#__PURE__*/ jsx(ThemeProvider, {
 		theme: currentTheme,
 		children: /*#__PURE__*/ jsxs(ThemeContext.Provider, {

package/dist/theme-toggle.js

@@ -1,6 +1,6 @@
 "use client";
 "use client";
-import { alpha, interactiveStyles, resetButton } from "./utils/mixins.js";
+import { accentColor, alpha, interactiveStyles, resetButton } from "./utils/mixins.js";
 import { ThemeContext } from "./styled-components/theme-provider.js";
 import { Icon } from "./icon.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -10,7 +10,7 @@ import { MoonStar, Sun } from "lucide-react";
 //#region src/lib/theme-toggle.tsx
 var StyledThemeToggle = styled.button.withConfig({
 	displayName: "theme-toggle__StyledThemeToggle",
-	componentId: "sc-85f678d3-0"
+	componentId: "sc-9b39d035-0"
 })([
 	``,
 	` `,
@@ -21,9 +21,9 @@ var StyledThemeToggle = styled.button.withConfig({
 	`}:root.dark &::after{transform:translateX(26px);}`,
 	` & svg{width:16px;height:16px;object-fit:contain;transition:all 0.3s ease;position:relative;z-index:2;}& svg[stroke]{stroke:`,
 	`;}&:hover svg[stroke]{stroke:`,
-	`;}:root.dark &:hover svg[stroke]{stroke:`,
-	`;}`
-], resetButton, interactiveStyles, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayLight, ({ theme }) => alpha(theme.colors.primaryLight, 20), ({ theme }) => theme.isDark && css([`transform:translateX(26px);`]), ({ $hidden }) => $hidden && css([`display:none;`]), ({ theme }) => theme.colors.primary, ({ theme }) => theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark, ({ theme }) => theme.colors.primaryLight);
+	`;}`,
+	``
+], resetButton, interactiveStyles, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayLight, ({ theme }) => alpha(theme.colors.primaryLight, 20), ({ theme }) => theme.isDark && css([`transform:translateX(26px);`]), ({ $hidden }) => $hidden && css([`display:none;`]), ({ theme }) => theme.colors.primary, ({ theme }) => accentColor(theme), ({ theme }) => !theme.colors.accent && css([`:root.dark &:hover svg[stroke]{stroke:`, `;}`], theme.colors.primaryLight));
 function LocalThemeToggle({ onClick, $shortcut = false, ...props }, ref) {
 	const { toggleTheme } = useContext(ThemeContext);
 	useEffect(() => {

package/dist/toast.js

@@ -53,11 +53,11 @@ function ToastNotificationsProvider({ children }) {
 }
 var StyledNotifications = styled.ul.withConfig({
 	displayName: "toast__StyledNotifications",
-	componentId: "sc-5ff21b00-0"
+	componentId: "sc-43455f54-0"
 })([`position:fixed;z-index:99999;margin:0;padding:0;list-style:none;left:20px;right:20px;pointer-events:none;`, ``], ({ $bottom }) => $bottom ? css([`bottom:20px;`]) : css([`top:20px;`]));
 var StyledNotificationItem = styled.li.withConfig({
 	displayName: "toast__StyledNotificationItem",
-	componentId: "sc-5ff21b00-1"
+	componentId: "sc-43455f54-1"
 })([
 	`display:grid;grid-template-rows:0fr;justify-items:center;margin:0;padding:0;opacity:0;pointer-events:none;transform:translateY(`,
 	`);transition:opacity 0.2s ease,transform 0.2s ease,grid-template-rows 0.25s ease 0.15s,margin 0.25s ease 0.15s;`,
@@ -73,7 +73,7 @@ var StyledNotificationItem = styled.li.withConfig({
 	`;}}& .message{flex:1;min-width:0;line-height:1.5;overflow-wrap:anywhere;}& .close-button{flex-shrink:0;}}`,
 	` `,
 	``
-], ({ $bottom }) => $bottom ? "20px" : "-20px", ({ $align }) => $align === "right" && css([`justify-items:end;`]), ({ $align }) => $align === "left" && css([`justify-items:start;`]), ({ theme }) => theme.spacing.radius.xl, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.isDark ? theme.shadows.sm : theme.shadows.xs, ({ theme }) => theme.colors.dark, ({ theme }) => theme.fontSizes.small.lg, ({ theme }) => theme.lineHeights.small.lg, ({ theme, $color }) => theme.colors[$color], ({ $visible, $bottom }) => $visible && css([`opacity:1;transform:translateY(0);grid-template-rows:1fr;transition:grid-template-rows 0.25s ease,margin 0.25s ease,opacity 0.2s ease 0.15s,transform 0.2s ease 0.15s;& .item{pointer-events:auto;}`, ``], $bottom ? css([`margin-top:10px;`]) : css([`margin-bottom:10px;`])), ({ $static }) => $static && css([`position:relative;z-index:10;`]));
+], ({ $bottom }) => $bottom ? "20px" : "-20px", ({ $align }) => $align === "right" && css([`justify-items:end;`]), ({ $align }) => $align === "left" && css([`justify-items:start;`]), ({ theme }) => theme.spacing.radius.xl, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayLight, ({ theme }) => theme.shadows.toast ?? (theme.isDark ? theme.shadows.sm : theme.shadows.xs), ({ theme }) => theme.colors.dark, ({ theme }) => theme.fontSizes.small.lg, ({ theme }) => theme.lineHeights.small.lg, ({ theme, $color }) => theme.colors[$color], ({ $visible, $bottom }) => $visible && css([`opacity:1;transform:translateY(0);grid-template-rows:1fr;transition:grid-template-rows 0.25s ease,margin 0.25s ease,opacity 0.2s ease 0.15s,transform 0.2s ease 0.15s;& .item{pointer-events:auto;}`, ``], $bottom ? css([`margin-top:10px;`]) : css([`margin-bottom:10px;`])), ({ $static }) => $static && css([`position:relative;z-index:10;`]));
 function ToastNotifications({ $align = "center", $bottom }) {
 	const { notifications } = useToastNotifications();
 	return /*#__PURE__*/ jsx(StyledNotifications, {

package/dist/utils/global.js

@@ -1,5 +1,6 @@
 "use client";
 "use client";
+import { linkColor } from "./mixins.js";
 import { createGlobalStyle } from "styled-components";
 //#region src/lib/utils/global.tsx
 var GlobalStyles = (theme) => createGlobalStyle([
@@ -8,6 +9,6 @@ var GlobalStyles = (theme) => createGlobalStyle([
 	`;}a{color:`,
 	`;}ol,ul{list-style:none;margin:0;padding:0;}figure{margin:0;}fieldset{appearance:none;border:none;}button,input,a,img,svg,svg *{transition:all 0.3s ease;}strong,b{font-weight:700;}hr{margin:20px 0;border:none;border-bottom:1px solid `,
 	`;}`
-], theme.colors.light, theme.colors.dark, theme.isDark ? theme.colors.dark : theme.colors.primary, theme.colors.grayLight);
+], theme.colors.light, theme.colors.dark, linkColor(theme), theme.colors.grayLight);
 //#endregion
 export { GlobalStyles };

package/dist/utils/mixins.d.ts

@@ -9,12 +9,43 @@ 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;
+/** 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;
+/**
+ * Hover and emphasis text on a surface: the theme's `accent` when it sets
+ * one, else the end of the primary ramp that contrasts with the mode,
+ * `primaryDark` in light mode and `primaryLight` in dark mode.
+ */
+export declare const accentColor: (theme: Theme) => string;
+/**
+ * The link color: the theme's `link` when it sets one, else `primary` in
+ * light mode and `dark` in dark mode.
+ */
+export declare const linkColor: (theme: Theme) => string;
+/** Which primary tint a surface takes: hovered, dragged over, or active. */
+export type PrimaryTintKind = "hover" | "drop" | "active";
+/**
+ * A primary tint behind a surface: the theme's `primaryTintHover`,
+ * `primaryTintDrop` or `primaryTintActive` when it sets one, else `primary`
+ * faded to the mode's amount.
+ */
+export declare const primaryTintColor: (theme: Theme, kind: PrimaryTintKind) => string;
+/**
+ * The dark-mode tint restated as a rule scoped to a `dark` class on <html>,
+ * for apps that resolve the mode in CSS before hydration can swap the theme
+ * object. Empty when the theme sets the token: a token already follows the
+ * mode, and the rule would override it inside a light-mode island.
+ */
+export declare const darkPrimaryTintRule: (theme: Theme, kind: PrimaryTintKind) => 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 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.
+ * `onPrimary` on a primary fill when it sets one, else the theme's
+ * `onFilled`, else the palette's contrasting end, `light` in light mode and
+ * `dark` in dark mode.
  */
 export declare const filledTextColor: (theme: Theme, fill?: FilledTextFill) => string;
 /**
@@ -23,7 +54,8 @@ export declare const filledTextColor: (theme: Theme, fill?: FilledTextFill) => s
  * theme object. Additive: with an already-dark theme object both paths resolve
  * 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`.
+ * the palette's `dark`. Empty when the theme sets `onFilled`: its tokens
+ * already follow the mode. Interpolate alongside `filledTextColor`.
  */
 export declare const darkFilledTextRule: (theme: Theme, fill?: FilledTextFill) => string;
 /**

package/dist/utils/mixins.js

@@ -10,19 +10,56 @@ 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)`;
+/** 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;
+/**
+* Hover and emphasis text on a surface: the theme's `accent` when it sets
+* one, else the end of the primary ramp that contrasts with the mode,
+* `primaryDark` in light mode and `primaryLight` in dark mode.
+*/ var accentColor = (theme) => theme.colors.accent ?? (theme.isDark ? theme.colors.primaryLight : theme.colors.primaryDark);
+/**
+* The link color: the theme's `link` when it sets one, else `primary` in
+* light mode and `dark` in dark mode.
+*/ var linkColor = (theme) => theme.colors.link ?? (theme.isDark ? theme.colors.dark : theme.colors.primary);
+var primaryTintTokens = {
+	hover: "primaryTintHover",
+	drop: "primaryTintDrop",
+	active: "primaryTintActive"
+};
+/** The fallback amounts of `primary`, in percent: [light mode, dark mode]. */ var primaryTintAmounts = {
+	hover: [4, 10],
+	drop: [5, 12],
+	active: [10, 18]
+};
+/**
+* A primary tint behind a surface: the theme's `primaryTintHover`,
+* `primaryTintDrop` or `primaryTintActive` when it sets one, else `primary`
+* faded to the mode's amount.
+*/ var primaryTintColor = (theme, kind) => {
+	const [light, dark] = primaryTintAmounts[kind];
+	return theme.colors[primaryTintTokens[kind]] ?? alpha(theme.colors.primary, theme.isDark ? dark : light);
+};
+/**
+* The dark-mode tint restated as a rule scoped to a `dark` class on <html>,
+* for apps that resolve the mode in CSS before hydration can swap the theme
+* object. Empty when the theme sets the token: a token already follows the
+* mode, and the rule would override it inside a light-mode island.
+*/ var darkPrimaryTintRule = (theme, kind) => theme.colors[primaryTintTokens[kind]] ? "" : `:root.dark & { background: ${alpha(theme.colors.primary, primaryTintAmounts[kind][1])}; }`;
 /**
 * 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, fill = "other") => fill === "primary" && theme.colors.onPrimary ? theme.colors.onPrimary : theme.isDark ? theme.colors.dark : theme.colors.light;
+* `onPrimary` on a primary fill when it sets one, else the theme's
+* `onFilled`, else the palette's contrasting end, `light` in light mode and
+* `dark` in dark mode.
+*/ var filledTextColor = (theme, fill = "other") => fill === "primary" && theme.colors.onPrimary ? theme.colors.onPrimary : theme.colors.onFilled ?? (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. 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}; }`;
+* the palette's `dark`. Empty when the theme sets `onFilled`: its tokens
+* already follow the mode. Interpolate alongside `filledTextColor`.
+*/ var darkFilledTextRule = (theme, fill = "other") => theme.colors.onFilled ? "" : `: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
@@ -108,4 +145,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 { accentColor, alpha, darkFilledTextRule, darkPrimaryTintRule, errorInteractiveStyles, filledTextColor, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, interactiveStyles, linkColor, primaryFillColor, primaryFillHoverColor, primaryTintColor, resetButton, resetInput, shade, statusBorderStyles, thinScrollbar, tint };

package/dist/utils/theme.d.ts

@@ -65,6 +65,48 @@ 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;
+    /**
+     * Hover and emphasis text on a surface (Prose links on hover, the
+     * ChatSources and ChatLauncher text, the ThemeToggle glyph on hover).
+     * Without it: `primaryDark` in light mode, `primaryLight` in dark mode.
+     */
+    accent?: TString;
+    /**
+     * The color of links in `GlobalStyles`. Without it: `primary` in light
+     * mode, `dark` in dark mode.
+     */
+    link?: TString;
+    /**
+     * The label on a filled control that is not primary (a secondary,
+     * tertiary or error Button, a colored Avatar), and on a primary fill when
+     * the theme sets no `onPrimary`. Without it: `light` in light mode,
+     * `dark` in dark mode.
+     */
+    onFilled?: TString;
+    /**
+     * The primary tint behind a hovered Dropzone or AvatarDropzone. Without
+     * it: `primary` at 4% in light mode, 10% in dark mode.
+     */
+    primaryTintHover?: TString;
+    /**
+     * The primary tint behind a Dropzone or AvatarDropzone while a file is
+     * dragged over it. Without it: `primary` at 5% in light mode, 12% in dark
+     * mode.
+     */
+    primaryTintDrop?: TString;
+    /**
+     * The primary tint behind an active (`$active`) IconButton. Without it:
+     * `primary` at 10% in light mode, 18% in dark mode.
+     */
+    primaryTintActive?: TString;
 }
 export interface Shadows<TString = string> {
     xs: TString;
@@ -72,6 +114,11 @@ export interface Shadows<TString = string> {
     md: TString;
     lg: TString;
     xl: TString;
+    /**
+     * Optional: the Toast's shadow. Without it: `xs` in light mode, `sm` in
+     * dark mode (see the mode tokens on `Colors`).
+     */
+    toast?: TString;
 }
 export interface Fonts<TString = string> {
     head: TString;
@@ -250,5 +297,11 @@ export interface Theme {
     fonts: Fonts;
     fontSizes: FontSizes;
     lineHeights: LineHeights;
-    isDark: boolean;
+    /**
+     * Whether this theme object holds the dark palette. Optional: a theme
+     * whose colors are CSS variables serves both modes and leaves it out,
+     * setting the mode tokens (`colors.accent`, `colors.onFilled`, ...)
+     * instead. Absent reads as light.
+     */
+    isDark?: boolean;
 }

package/package.json

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