cherry-styled-components 0.2.11 → 0.2.12

package/dist/avatar-dropzone.js

@@ -1,12 +1,11 @@
 "use client";
 "use client";
-import { resetButton } from "./utils/mixins.js";
+import { alpha, resetButton } from "./utils/mixins.js";
 import { Icon } from "./icon.js";
 import { matchesAccept } from "./dropzone.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
 import styled, { css } from "styled-components";
-import { rgba } from "polished";
 //#region src/lib/avatar-dropzone.tsx
 var avatarSizes = {
 	small: {
@@ -115,7 +114,7 @@ function LocalAvatarDropzone({ $size, $icon = "User", $maxBytes, "aria-label": a
 var AvatarDropzone = /*#__PURE__*/ forwardRef(LocalAvatarDropzone);
 var StyledAvatarDropzoneWrapper = styled.span.withConfig({
 	displayName: "avatar-dropzone__StyledAvatarDropzoneWrapper",
-	componentId: "sc-38b0b6de-0"
+	componentId: "sc-758cb640-0"
 })([
 	`position:relative;display:inline-flex;width:`,
 	`px;height:`,
@@ -123,7 +122,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-38b0b6de-1"
+	componentId: "sc-758cb640-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,16 +141,17 @@ 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:`,
-	`;`
-], theme.colors.primary, rgba(theme.colors.primary, theme.isDark ? .12 : .05)), ({ theme }) => theme.colors.primary, ({ theme }) => rgba(theme.colors.primary, theme.isDark ? .1 : .04), ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primaryLight);
+	`;: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);
 var StyledAvatarRemove = styled.button.withConfig({
 	displayName: "avatar-dropzone__StyledAvatarRemove",
-	componentId: "sc-38b0b6de-2"
+	componentId: "sc-758cb640-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:`,
 	`;transition:background 0.3s ease;& svg{width:14px;height:14px;}&:hover:not(:disabled){background:`,
 	`;}&:disabled{cursor:not-allowed;opacity:0.6;}`
-], resetButton, ({ theme }) => rgba(theme.colors.dark, .6), ({ theme }) => theme.colors.error);
+], resetButton, ({ theme }) => alpha(theme.colors.dark, 60), ({ theme }) => theme.colors.error);
 //#endregion
 export { AvatarDropzone };

package/dist/button.js

@@ -1,11 +1,12 @@
 "use client";
 "use client";
-import { formElementHeightStyles, resetButton } from "./utils/mixins.js";
+import { formElementHeightStyles, resetButton, shade, tint } from "./utils/mixins.js";
 import { jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import styled, { css } from "styled-components";
-import { darken, lighten } from "polished";
 //#region src/lib/button.tsx
+var filledText = (theme) => theme.isDark ? theme.colors.dark : theme.colors.light;
+var darkFilledText = (theme) => `:root.dark & { color: ${theme.colors.dark}; }`;
 var buttonStyles = (theme, $variant, $size, $outline, $fullWidth, $error, disabled) => css([
 	``,
 	`;font-family:inherit;display:inline-flex;padding:15px 30px;border-radius:100px;font-weight:600;white-space:nowrap;hyphens:auto;color:`,
@@ -18,9 +19,10 @@ var buttonStyles = (theme, $variant, $size, $outline, $fullWidth, $error, disabl
 	` `,
 	` `,
 	``
-], resetButton, theme.isDark ? theme.colors.dark : theme.colors.light, !disabled && $variant === "primary" && css([
+], resetButton, filledText(theme), !disabled && $variant === "primary" && css([
 	`color:`,
-	`;background:`,
+	`;`,
+	` background:`,
 	`;border:solid 2px `,
 	`;box-shadow:0 0 0 0px `,
 	`;&:hover{background:`,
@@ -29,9 +31,10 @@ 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 : theme.isDark ? theme.colors.dark : theme.colors.light, $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 : filledText(theme), !$outline && darkFilledText(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([
 	`color:`,
-	`;background:`,
+	`;`,
+	` background:`,
 	`;border:solid 2px `,
 	`;box-shadow:0 0 0 0px `,
 	`;&:hover{background:`,
@@ -40,9 +43,10 @@ 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.secondary : theme.isDark ? theme.colors.dark : theme.colors.light, $outline ? "transparent" : theme.colors.secondary, theme.colors.secondary, theme.colors.secondary, $outline ? "transparent" : theme.colors.secondaryDark, theme.colors.secondaryDark, $outline && `color: ${theme.colors.secondaryDark}`, theme.colors.secondaryLight, theme.colors.secondaryLight), !disabled && $variant === "tertiary" && css([
+], $outline ? theme.colors.secondary : filledText(theme), !$outline && darkFilledText(theme), $outline ? "transparent" : theme.colors.secondary, theme.colors.secondary, theme.colors.secondary, $outline ? "transparent" : theme.colors.secondaryDark, theme.colors.secondaryDark, $outline && `color: ${theme.colors.secondaryDark}`, theme.colors.secondaryLight, theme.colors.secondaryLight), !disabled && $variant === "tertiary" && css([
 	`color:`,
-	`;background:`,
+	`;`,
+	` background:`,
 	`;border:solid 2px `,
 	`;box-shadow:0 0 0 0px `,
 	`;&:hover{background:`,
@@ -51,9 +55,10 @@ 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.tertiary : theme.isDark ? theme.colors.dark : theme.colors.light, $outline ? "transparent" : theme.colors.tertiary, theme.colors.tertiary, theme.colors.tertiary, $outline ? "transparent" : theme.colors.tertiaryDark, theme.colors.tertiaryDark, $outline && `color: ${theme.colors.tertiaryDark}`, theme.colors.tertiaryLight, theme.colors.tertiaryLight), !disabled && $error && css([
+], $outline ? theme.colors.tertiary : filledText(theme), !$outline && darkFilledText(theme), $outline ? "transparent" : theme.colors.tertiary, theme.colors.tertiary, theme.colors.tertiary, $outline ? "transparent" : theme.colors.tertiaryDark, theme.colors.tertiaryDark, $outline && `color: ${theme.colors.tertiaryDark}`, theme.colors.tertiaryLight, theme.colors.tertiaryLight), !disabled && $error && css([
 	`color:`,
-	`;background:`,
+	`;`,
+	` background:`,
 	`;border:solid 2px `,
 	`;box-shadow:0 0 0 0px `,
 	`;&:hover{background:`,
@@ -62,7 +67,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.error : theme.isDark ? theme.colors.dark : theme.colors.light, $outline ? "transparent" : theme.colors.error, theme.colors.error, theme.colors.error, $outline ? "transparent" : darken(.1, theme.colors.error), darken(.1, theme.colors.error), $outline && `color: ${darken(.1, theme.colors.error)}`, lighten(.1, theme.colors.error), lighten(.1, theme.colors.error)), formElementHeightStyles($size), $size === "big" ? `font-size: ${theme.fontSizes.buttonBig.lg};
+], $outline ? theme.colors.error : filledText(theme), !$outline && darkFilledText(theme), $outline ? "transparent" : theme.colors.error, theme.colors.error, theme.colors.error, $outline ? "transparent" : shade(theme.colors.error, 10), shade(theme.colors.error, 10), $outline && `color: ${shade(theme.colors.error, 10)}`, tint(theme.colors.error, 10), tint(theme.colors.error, 10)), formElementHeightStyles($size), $size === "big" ? `font-size: ${theme.fontSizes.buttonBig.lg};
 			line-height: ${theme.lineHeights.buttonBig.lg};
       padding: 18px 30px;
 	` : $size === "small" ? `font-size: ${theme.fontSizes.buttonSmall.lg};
@@ -77,7 +82,7 @@ var buttonStyles = (theme, $variant, $size, $outline, $fullWidth, $error, disabl
 	`, $fullWidth && `width: 100%;`);
 var StyledButton = styled.button.withConfig({
 	displayName: "button__StyledButton",
-	componentId: "sc-2f3ba034-0"
+	componentId: "sc-7cf4a3b1-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/dropzone.js

@@ -1,12 +1,11 @@
 "use client";
 "use client";
 import { mq } from "./utils/theme.js";
-import { resetButton } from "./utils/mixins.js";
+import { alpha, resetButton } from "./utils/mixins.js";
 import { Icon } from "./icon.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
 import styled, { css } from "styled-components";
-import { rgba } from "polished";
 //#region src/lib/dropzone.tsx
 /** Matches a file against an `accept` string (".pdf,image/*,text/plain"),
 mirroring the native file-picker filter for dropped files. */ var matchesAccept = (file, accept) => {
@@ -155,11 +154,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-4b43e6a9-0"
+	componentId: "sc-a5a0875f-0"
 })([`display:flex;flex-direction:column;gap:12px;width:100%;`]);
 var StyledDropzone = styled.button.withConfig({
 	displayName: "dropzone__StyledDropzone",
-	componentId: "sc-4b43e6a9-1"
+	componentId: "sc-a5a0875f-1"
 })([
 	``,
 	`;font-family:inherit;display:flex;flex-direction:`,
@@ -179,11 +178,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:`,
-	`;`
-], theme.colors.primary, rgba(theme.colors.primary, theme.isDark ? .12 : .05)), ({ theme }) => theme.colors.primary, ({ theme }) => rgba(theme.colors.primary, theme.isDark ? .1 : .04), ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primaryLight);
+	`;: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);
 var StyledDropIcon = styled.span.withConfig({
 	displayName: "dropzone__StyledDropIcon",
-	componentId: "sc-4b43e6a9-2"
+	componentId: "sc-a5a0875f-2"
 })([
 	`display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:`,
 	`;height:`,
@@ -197,7 +197,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-4b43e6a9-3"
+	componentId: "sc-a5a0875f-3"
 })([
 	`display:flex;flex-direction:`,
 	`;flex-wrap:wrap;align-items:baseline;gap:`,
@@ -209,7 +209,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-4b43e6a9-4"
+	componentId: "sc-a5a0875f-4"
 })([
 	`font-family:inherit;font-size:`,
 	`;line-height:`,
@@ -219,11 +219,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-4b43e6a9-5"
+	componentId: "sc-a5a0875f-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-4b43e6a9-6"
+	componentId: "sc-a5a0875f-6"
 })([
 	`position:relative;width:72px;height:72px;border-radius:`,
 	`;overflow:hidden;border:solid 1px `,
@@ -233,7 +233,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-4b43e6a9-7"
+	componentId: "sc-a5a0875f-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:`,
@@ -241,12 +241,12 @@ var StyledThumbFile = styled.span.withConfig({
 ], ({ theme }) => theme.colors.grayDark, ({ theme }) => theme.colors.primary);
 var StyledThumbRemove = styled.button.withConfig({
 	displayName: "dropzone__StyledThumbRemove",
-	componentId: "sc-4b43e6a9-8"
+	componentId: "sc-a5a0875f-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:`,
 	`;transition:background 0.3s ease;& svg{width:14px;height:14px;}&:hover:not(:disabled){background:`,
 	`;}&:disabled{cursor:not-allowed;opacity:0.6;}`
-], resetButton, ({ theme }) => rgba(theme.colors.dark, .6), ({ theme }) => theme.colors.error);
+], resetButton, ({ theme }) => alpha(theme.colors.dark, 60), ({ theme }) => theme.colors.error);
 //#endregion
 export { Dropzone, matchesAccept };

package/dist/icon-button.js

@@ -1,10 +1,9 @@
 "use client";
 "use client";
-import { resetButton } from "./utils/mixins.js";
+import { alpha, resetButton, shade, tint } from "./utils/mixins.js";
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import styled, { css } from "styled-components";
-import { darken, lighten, rgba } from "polished";
 //#region src/lib/icon-button.tsx
 var iconButtonSizes = {
 	small: {
@@ -36,14 +35,14 @@ var iconButtonStyles = (theme, $size, $error, disabled, $active) => {
 		` `,
 		` `,
 		``
-	], resetButton, box, box, theme.colors.light, theme.colors.grayLight, $error ? theme.colors.error : theme.colors.grayDark, $error ? lighten(.1, theme.colors.error) : theme.colors.primaryLight, icon, icon, !disabled && ($error ? css([
+	], resetButton, box, box, theme.colors.light, theme.colors.grayLight, $error ? theme.colors.error : theme.colors.grayDark, $error ? tint(theme.colors.error, 10) : theme.colors.primaryLight, icon, icon, !disabled && ($error ? css([
 		`border-color:`,
 		`;&:hover{border-color:`,
 		`;color:`,
 		`;}&:focus{box-shadow:0 0 0 4px `,
 		`;}&:active{box-shadow:0 0 0 2px `,
 		`;}`
-	], theme.colors.error, darken(.1, theme.colors.error), darken(.1, theme.colors.error), lighten(.1, theme.colors.error), lighten(.1, theme.colors.error)) : css([
+	], theme.colors.error, shade(theme.colors.error, 10), shade(theme.colors.error, 10), tint(theme.colors.error, 10), tint(theme.colors.error, 10)) : css([
 		`&:hover{border-color:`,
 		`;color:`,
 		`;}&:focus{box-shadow:0 0 0 4px `,
@@ -54,8 +53,9 @@ var iconButtonStyles = (theme, $size, $error, disabled, $active) => {
 		`border-color:`,
 		`;background:`,
 		`;color:`,
-		`;`
-	], theme.colors.primary, rgba(theme.colors.primary, theme.isDark ? .18 : .1), theme.colors.primary), disabled && css([
+		`;:root.dark &{background:`,
+		`;}`
+	], theme.colors.primary, alpha(theme.colors.primary, theme.isDark ? 18 : 10), theme.colors.primary, alpha(theme.colors.primary, 18)), disabled && css([
 		`cursor:not-allowed;background:`,
 		`;border-color:`,
 		`;color:`,
@@ -64,7 +64,7 @@ var iconButtonStyles = (theme, $size, $error, disabled, $active) => {
 };
 var StyledIconButton = styled.button.withConfig({
 	displayName: "icon-button__StyledIconButton",
-	componentId: "sc-e26e58e2-0"
+	componentId: "sc-3df98d32-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 { errorInteractiveStyles, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, interactiveStyles, resetButton, resetInput, statusBorderStyles } from "./utils/mixins.js";
+import { alpha, errorInteractiveStyles, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, interactiveStyles, resetButton, resetInput, shade, statusBorderStyles, 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 { useOnClickOutside } from "./utils/use-on-click-outside.js";
 import { CherryThemeProvider, ThemeContext } from "./styled-components/theme-provider.js";
@@ -30,4 +30,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, AvatarDropzone, Box, Button, CherryThemeProvider, ClientThemeProvider, Col, Container, Dropzone, Flex, GlobalStyles, Grid, Icon, IconButton, Input, MaxWidth, Modal, Password, Range, Select, Space, StyledComponentsRegistry, StyledIconWrapper, StyledInputWrapper, StyledLabel, StyledNotificationItem, StyledNotifications, TabContent, Tabs, Textarea, ThemeContext, ThemeToggle, ToastNotifications, ToastNotificationsContext, ToastNotificationsProvider, Toggle, breakpoints, buttonStyles, colors, colorsDark, createThemeInitScript, createTypographyStyle, errorInteractiveStyles, fontSizes, fonts, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, iconButtonStyles, interactiveStyles, lineHeights, matchesAccept, mq, resetButton, resetInput, resolveTheme, shadows, shadowsDark, spacing, statusBorderStyles, styledBlockquote, styledButton, styledButtonBig, styledCode, styledH1, styledH2, styledH3, styledH4, styledH5, styledH6, styledHero1, styledHero2, styledHero3, styledInput, styledInputBig, styledSmall, styledStrong, styledText, theme, themeDark, themeInitScript, useOnClickOutside, useToastNotifications };
+export { Accordion, AvatarDropzone, Box, Button, CherryThemeProvider, ClientThemeProvider, Col, Container, Dropzone, Flex, GlobalStyles, Grid, Icon, IconButton, Input, MaxWidth, Modal, Password, Range, Select, Space, StyledComponentsRegistry, StyledIconWrapper, StyledInputWrapper, StyledLabel, StyledNotificationItem, StyledNotifications, TabContent, Tabs, Textarea, ThemeContext, ThemeToggle, ToastNotifications, ToastNotificationsContext, ToastNotificationsProvider, Toggle, alpha, breakpoints, buttonStyles, colors, colorsDark, createThemeInitScript, createTypographyStyle, errorInteractiveStyles, fontSizes, fonts, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, iconButtonStyles, interactiveStyles, lineHeights, matchesAccept, mq, resetButton, resetInput, resolveTheme, shade, shadows, shadowsDark, spacing, statusBorderStyles, styledBlockquote, styledButton, styledButtonBig, styledCode, styledH1, styledH2, styledH3, styledH4, styledH5, styledH6, styledHero1, styledHero2, styledHero3, styledInput, styledInputBig, styledSmall, styledStrong, styledText, theme, themeDark, themeInitScript, tint, useOnClickOutside, useToastNotifications };

package/dist/input.js

@@ -8,7 +8,7 @@ import styled, { css } from "styled-components";
 //#region src/lib/input.tsx
 var StyledInputWrapper = styled.span.withConfig({
 	displayName: "input__StyledInputWrapper",
-	componentId: "sc-f294a26b-0"
+	componentId: "sc-5352dea9-0"
 })([
 	`display:inline-flex;flex-wrap:`,
 	`;align-items:center;`,
@@ -20,7 +20,7 @@ var StyledInputWrapper = styled.span.withConfig({
 ], ({ type }) => type === "checkbox" || type === "radio" ? "nowrap" : "wrap", ({ $label }) => $label && css([`gap:5px;align-items:flex-start;align-content:flex-start;`]), ({ $size }) => $size === "small" ? "14px" : "17px", ({ $size }) => $size === "small" ? "18px" : "24px", ({ $size }) => $size === "small" ? "18px" : "24px", ({ $fullWidth }) => fullWidthStyles($fullWidth));
 var StyledLabel = styled.label.withConfig({
 	displayName: "input__StyledLabel",
-	componentId: "sc-f294a26b-1"
+	componentId: "sc-5352dea9-1"
 })([
 	`display:inline-block;color:`,
 	`;font-size:`,
@@ -29,7 +29,7 @@ var StyledLabel = styled.label.withConfig({
 ], ({ theme }) => theme.colors.grayDark, ({ theme }) => theme.fontSizes.small.lg, ({ theme }) => theme.lineHeights.small.lg);
 var StyledInput = styled.input.withConfig({
 	displayName: "input__StyledInput",
-	componentId: "sc-f294a26b-2"
+	componentId: "sc-5352dea9-2"
 })([
 	``,
 	`;`,
@@ -85,7 +85,7 @@ var StyledInput = styled.input.withConfig({
 	`, ({ $fullWidth }) => fullWidthStyles($fullWidth));
 var StyledIconWrapper = styled.span.withConfig({
 	displayName: "input__StyledIconWrapper",
-	componentId: "sc-f294a26b-3"
+	componentId: "sc-5352dea9-3"
 })([
 	`display:inline-flex;position:relative;line-height:0;min-width:fit-content;& em{display:block;border-radius:50%;background:`,
 	`;}& svg,& em{object-fit:contain;position:absolute;top:50%;left:50%;color:`,
@@ -93,7 +93,7 @@ var StyledIconWrapper = styled.span.withConfig({
 ], ({ theme }) => theme.colors.primary, ({ theme }) => theme.colors.primary);
 var StyledRadioCheckboxInput = styled.input.withConfig({
 	displayName: "input__StyledRadioCheckboxInput",
-	componentId: "sc-f294a26b-4"
+	componentId: "sc-5352dea9-4"
 })([
 	``,
 	`;display:inline-block;background:`,
@@ -178,7 +178,7 @@ var StyledRadioCheckboxInput = styled.input.withConfig({
 });
 var StyledCustomIconWrapper = styled.span.withConfig({
 	displayName: "input__StyledCustomIconWrapper",
-	componentId: "sc-f294a26b-5"
+	componentId: "sc-5352dea9-5"
 })([
 	`position:relative;`,
 	`;& svg{position:absolute;top:50%;transform:translateY(-50%);pointer-events:none;width:24px;height:24px;object-fit:contain;color:`,

package/dist/modal.js

@@ -1,6 +1,7 @@
 "use client";
 "use client";
 import { mq } from "./utils/theme.js";
+import { alpha } from "./utils/mixins.js";
 import { styledH5, styledText } from "./utils/typography.js";
 import { useOnClickOutside } from "./utils/use-on-click-outside.js";
 import { Icon } from "./icon.js";
@@ -8,7 +9,6 @@ import { IconButton } from "./icon-button.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from "react";
 import styled, { css, keyframes } from "styled-components";
-import { rgba } from "polished";
 import { createPortal } from "react-dom";
 //#region src/lib/modal.tsx
 var emptySubscribe = () => () => {};
@@ -21,7 +21,7 @@ var innerRiseIn = keyframes([`from{transform:translateY(40px);}to{transform:tran
 var innerSinkOut = keyframes([`from{transform:translateY(0);}to{transform:translateY(40px);}`]);
 var StyledModal = styled.div.withConfig({
 	displayName: "modal__StyledModal",
-	componentId: "sc-14a8d5c-0"
+	componentId: "sc-1bbfce8-0"
 })([
 	`position:fixed;top:0;left:0;width:100%;height:100%;background:`,
 	`;display:flex;justify-content:center;align-items:center;z-index:1010;animation:`,
@@ -32,14 +32,14 @@ var StyledModal = styled.div.withConfig({
 	` 0.3s ease both;`,
 	`{max-width:500px;`,
 	`}}`
-], ({ theme }) => rgba(theme.colors.primary, .5), ({ $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 }) => $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));
 var StyledModalClose = styled(IconButton).withConfig({
 	displayName: "modal__StyledModalClose",
-	componentId: "sc-14a8d5c-1"
+	componentId: "sc-1bbfce8-1"
 })([`position:absolute;top:20px;right:20px;z-index:10;`]);
 var StyledModalTitle = styled.h2.withConfig({
 	displayName: "modal__StyledModalTitle",
-	componentId: "sc-14a8d5c-2"
+	componentId: "sc-1bbfce8-2"
 })([
 	`--divider-color:`,
 	`;margin:0 0 15px 0;padding:0 0 15px 0;color:`,
@@ -48,7 +48,7 @@ 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-14a8d5c-3"
+	componentId: "sc-1bbfce8-3"
 })([
 	`max-height:calc(100svh - 200px);overflow-y:auto;padding:5px;margin:-5px;--divider-color:`,
 	`;`,

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

@@ -22,6 +22,11 @@ function removeThemeInitStyle() {
 	const el = document.getElementById("__theme-init");
 	if (el) el.remove();
 }
+function resolveColor(value) {
+	const match = /^var\(\s*(--[^,)\s]+)\s*(?:,([^)]*))?\)$/.exec(value.trim());
+	if (!match) return value;
+	return getComputedStyle(document.documentElement).getPropertyValue(match[1]).trim() || match[2]?.trim() || value;
+}
 /**
 * SSR-aware theme provider. Renders with the server-resolved theme on the
 * first paint (no dark-mode flash), reconciles it against the `theme` cookie
@@ -32,9 +37,11 @@ function removeThemeInitStyle() {
 */ function ClientThemeProvider({ children, theme, themeDark, $initial = "light", $themeColor = "light", $globalStyles = true }) {
 	const initialTheme = $initial === "dark" && themeDark ? themeDark : theme;
 	const [overrideTheme, setOverrideTheme] = useState(null);
+	const [reconciled, setReconciled] = useState(false);
 	const effectiveTheme = useMemo(() => overrideTheme ?? initialTheme, [overrideTheme, initialTheme]);
 	useEffect(() => {
 		if (!themeDark) {
+			setReconciled(true);
 			removeThemeInitStyle();
 			return;
 		}
@@ -54,20 +61,23 @@ function removeThemeInitStyle() {
 			const wantDark = cookieValue === "dark";
 			if (initialTheme.isDark !== wantDark) {
 				setOverrideTheme(wantDark ? themeDark : theme);
+				setReconciled(true);
 				return;
 			}
 		} catch {}
+		setReconciled(true);
 		removeThemeInitStyle();
 	}, []);
 	useEffect(() => {
 		if (overrideTheme) removeThemeInitStyle();
 	}, [overrideTheme]);
 	useEffect(() => {
+		if (!reconciled) return;
 		document.documentElement.classList.toggle("dark", effectiveTheme.isDark);
-	}, [effectiveTheme.isDark]);
+	}, [effectiveTheme.isDark, reconciled]);
 	useEffect(() => {
 		if (!$themeColor) return;
-		const background = effectiveTheme.colors[$themeColor];
+		const background = resolveColor(effectiveTheme.colors[$themeColor]);
 		let meta = document.querySelector("meta[name=\"theme-color\"]");
 		if (!meta) {
 			meta = document.createElement("meta");

package/dist/tabs.js

@@ -1,19 +1,18 @@
 "use client";
 "use client";
-import { resetButton } from "./utils/mixins.js";
+import { alpha, resetButton } from "./utils/mixins.js";
 import { styledText } from "./utils/typography.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React, { useId, useRef, useState } from "react";
 import styled, { css } from "styled-components";
-import { rgba } from "polished";
 //#region src/lib/tabs.tsx
 var StyledTabs = styled.div.withConfig({
 	displayName: "tabs__StyledTabs",
-	componentId: "sc-a3686838-0"
+	componentId: "sc-60ef8245-0"
 })([`width:100%;`]);
 var StyledTabsList = styled.div.withConfig({
 	displayName: "tabs__StyledTabsList",
-	componentId: "sc-a3686838-1"
+	componentId: "sc-60ef8245-1"
 })([
 	`display:flex;overflow-x:auto;border-radius:`,
 	` `,
@@ -23,7 +22,7 @@ var StyledTabsList = styled.div.withConfig({
 ], ({ theme }) => theme.spacing.radius.lg, ({ theme }) => theme.spacing.radius.lg, ({ theme }) => theme.colors.light, ({ theme }) => theme.colors.grayLight);
 var StyledTabButton = styled.button.withConfig({
 	displayName: "tabs__StyledTabButton",
-	componentId: "sc-a3686838-2"
+	componentId: "sc-60ef8245-2"
 })([
 	``,
 	`;flex:1;min-width:fit-content;padding:12px 20px;`,
@@ -41,10 +40,10 @@ var StyledTabButton = styled.button.withConfig({
 	`&:hover{color:`,
 	`;background:`,
 	`;}`
-], theme.colors.primary, rgba(theme.colors.primaryLight, .1)));
+], theme.colors.primary, alpha(theme.colors.primaryLight, 10)));
 var StyledTabPanel = styled.div.withConfig({
 	displayName: "tabs__StyledTabPanel",
-	componentId: "sc-a3686838-3"
+	componentId: "sc-60ef8245-3"
 })([
 	``,
 	`;color:`,

package/dist/theme-toggle.js

@@ -1,16 +1,15 @@
 "use client";
 "use client";
-import { interactiveStyles, resetButton } from "./utils/mixins.js";
+import { 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";
 import { forwardRef, useContext, useEffect } from "react";
 import styled, { css } from "styled-components";
-import { rgba } from "polished";
 //#region src/lib/theme-toggle.tsx
 var StyledThemeToggle = styled.button.withConfig({
 	displayName: "theme-toggle__StyledThemeToggle",
-	componentId: "sc-b64afa35-0"
+	componentId: "sc-f8700a2a-0"
 })([
 	``,
 	` `,
@@ -18,11 +17,12 @@ var StyledThemeToggle = styled.button.withConfig({
 	`;border-color:`,
 	`;&::after{content:"";position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:`,
 	`;transition:all 0.3s ease;z-index:1;`,
-	`}`,
+	`}: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 }) => rgba(theme.colors.primaryLight, .2), ({ 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);
+], 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);
 function LocalThemeToggle({ onClick, $shortcut = false, ...props }, ref) {
 	const { toggleTheme } = useContext(ThemeContext);
 	useEffect(() => {

package/dist/utils/mixins.d.ts

@@ -1,4 +1,14 @@
 import { Breakpoints, Theme } from './theme';
+/**
+ * Fades a color toward transparent. Native CSS rather than a JS color library
+ * so the input can be any valid CSS color value, including a `var(--token)`
+ * reference that only the browser can resolve.
+ */
+export declare const alpha: (color: string, percent: number) => string;
+/** Darkens a color by mixing it toward black. See `alpha` for why it is CSS. */
+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;
 /**
  * Hover/focus/active affordance for interactive surfaces (cards, tiles,
  * links-as-blocks): a transparent 1px border that picks up the primary color

package/dist/utils/mixins.js

@@ -2,9 +2,15 @@
 "use client";
 import { mq } from "./theme.js";
 import { css } from "styled-components";
-import { rgba } from "polished";
 //#region src/lib/utils/mixins.tsx
 /**
+* Fades a color toward transparent. Native CSS rather than a JS color library
+* so the input can be any valid CSS color value, including a `var(--token)`
+* reference that only the browser can resolve.
+*/ 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)`;
+/**
 * Hover/focus/active affordance for interactive surfaces (cards, tiles,
 * links-as-blocks): a transparent 1px border that picks up the primary color
 * on hover, with a soft focus ring. Pair with resetButton for clickable
@@ -28,7 +34,7 @@ import { rgba } from "polished";
 	`;box-shadow:0 0 0 4px `,
 	`;}&:active{box-shadow:0 0 0 2px `,
 	`;}`
-], ({ theme }) => theme.colors.error, ({ theme }) => theme.colors.error, ({ theme }) => theme.colors.error, ({ theme }) => rgba(theme.colors.error, .3), ({ theme }) => rgba(theme.colors.error, .3));
+], ({ theme }) => theme.colors.error, ({ theme }) => theme.colors.error, ({ theme }) => theme.colors.error, ({ theme }) => alpha(theme.colors.error, 30), ({ theme }) => alpha(theme.colors.error, 30));
 var resetButton = css([`box-sizing:border-box;appearance:none;border:none;background:none;padding:0;margin:0;cursor:pointer;outline:none;`]);
 var resetInput = css([`cursor:text;min-width:100px;`]);
 var fullWidthStyles = (fullWidth) => {
@@ -84,4 +90,4 @@ var generateDirectionStyles = (size, direction) => css([
 	`;}`
 ], mq(size), direction && `${direction}`);
 //#endregion
-export { errorInteractiveStyles, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, interactiveStyles, resetButton, resetInput, statusBorderStyles };
+export { alpha, errorInteractiveStyles, formElementHeightStyles, fullWidthStyles, generateAlignContentStyles, generateAlignItemsStyles, generateColSpanStyles, generateColsStyles, generateDirectionStyles, generateGapStyles, generateJustifyContentStyles, generatePaddingStyles, interactiveStyles, resetButton, resetInput, shade, statusBorderStyles, tint };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cherry-styled-components",
-  "version": "0.2.11",
+  "version": "0.2.12",
   "description": "Cherry is a design system for the modern web. Designed in Figma, built in React using Typescript.",
   "private": false,
   "type": "module",
@@ -43,8 +43,7 @@
     "screenshots": "node scripts/screenshot-previews.cjs"
   },
   "dependencies": {
-    "lucide-react": "^1.24.0",
-    "polished": "^4.3.1"
+    "lucide-react": "^1.28.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -53,23 +52,23 @@
   },
   "devDependencies": {
     "@swc/plugin-styled-components": "^12.15.0",
-    "@types/node": "^26.1.1",
+    "@types/node": "^26.1.2",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@typescript/typescript6": "^6.0.2",
-    "@vitejs/plugin-react-swc": "^4.3.1",
+    "@vitejs/plugin-react-swc": "^4.3.3",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.3",
-    "next": "^16.2.10",
-    "playwright-core": "^1.61.1",
-    "prettier": "^3.9.5",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
+    "next": "^16.2.12",
+    "playwright-core": "^1.62.0",
+    "prettier": "^3.9.6",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
     "rollup-plugin-preserve-directives": "^0.4.0",
     "sharp": "^0.35.3",
-    "styled-components": "^6.4.3",
+    "styled-components": "^6.4.4",
     "typescript": "^7.0.2",
-    "vite": "^8.1.4",
+    "vite": "^8.1.5",
     "vite-plugin-dts": "^5.0.3"
   }
 }