Core: Avoid crash when theme contains non-color strings

code/addons/actions/src/components/ActionLogger/style.tsx

@@ -1,6 +1,4 @@
-import { styled } from 'storybook/internal/theming';
-
-import { opacify } from 'polished';
+import { opacify, styled } from 'storybook/internal/theming';
 
 export const Action = styled.div({
   display: 'flex',

code/addons/docs/template/stories/docspage/theming.stories.ts

@@ -0,0 +1,26 @@
+import { create } from 'storybook/internal/theming';
+
+import { global as globalThis } from '@storybook/global';
+import { fn } from '@storybook/test';
+
+export default {
+  component: globalThis.Components.Button,
+  tags: ['autodocs'],
+  args: { label: 'Click Me!', onClick: fn() },
+  parameters: { chromatic: { disable: true } },
+};
+
+// Using strings not supported by Polished should not crash
+// https://github.com/storybookjs/storybook/issues/28781
+// https://github.com/storybookjs/storybook/discussions/25092#discussioncomment-10533731
+export const Customization = {
+  parameters: {
+    docs: {
+      theme: create({
+        base: 'dark',
+        appContentBg: 'var(--unset-css-var, #225)',
+        textColor: 'var(--another-unset-var, tomato)',
+      }),
+    },
+  },
+};

code/addons/interactions/src/components/Interaction.tsx

@@ -1,13 +1,11 @@
 import * as React from 'react';
 
 import { IconButton, TooltipNote, WithTooltip } from 'storybook/internal/components';
-import { styled, typography } from 'storybook/internal/theming';
+import { styled, transparentize, typography } from 'storybook/internal/theming';
 
 import { ListUnorderedIcon } from '@storybook/icons';
 import { type Call, CallStates, type ControlStates } from '@storybook/instrumenter';
 
-import { transparentize } from 'polished';
-
 import { isChaiError, isJestError } from '../utils';
 import type { Controls } from './InteractionsPanel';
 import { MatcherResult } from './MatcherResult';

code/addons/interactions/src/components/InteractionsPanel.tsx

@@ -1,11 +1,9 @@
 import * as React from 'react';
 
-import { styled } from 'storybook/internal/theming';
+import { styled, transparentize } from 'storybook/internal/theming';
 
 import { type Call, CallStates, type ControlStates } from '@storybook/instrumenter';
 
-import { transparentize } from 'polished';
-
 import { isTestAssertionError } from '../utils';
 import { Empty } from './EmptyState';
 import { Interaction } from './Interaction';

code/addons/interactions/src/components/StatusIcon.tsx

@@ -1,12 +1,10 @@
 import React from 'react';
 
-import { styled, useTheme } from 'storybook/internal/theming';
+import { styled, transparentize, useTheme } from 'storybook/internal/theming';
 
 import { CheckIcon, CircleIcon, PlayIcon, StopAltIcon } from '@storybook/icons';
 import { type Call, CallStates } from '@storybook/instrumenter';
 
-import { transparentize } from 'polished';
-
 export interface StatusIconProps {
   status: Call['status'];
 }

code/core/src/components/components/Badge/Badge.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
 
-import { styled } from '@storybook/core/theming';
-
-import { transparentize } from 'polished';
+import { styled, transparentize } from '@storybook/core/theming';
 
 const BadgeWrapper = styled.div<BadgeProps>(
   ({ theme }) => ({

code/core/src/components/components/Button/Button.tsx

@@ -1,12 +1,12 @@
 import type { ButtonHTMLAttributes, SyntheticEvent } from 'react';
 import React, { forwardRef, useEffect, useState } from 'react';
 
-import { isPropValid, styled } from '@storybook/core/theming';
+import { darken, isPropValid, lighten, styled, transparentize } from '@storybook/core/theming';
 
 import { deprecate } from '@storybook/core/client-logger';
 
 import { Slot } from '@radix-ui/react-slot';
-import { darken, lighten, rgba, transparentize } from 'polished';
+import { rgba } from 'polished';
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   asChild?: boolean;

code/core/src/components/components/Loader/Loader.tsx

@@ -1,10 +1,8 @@
 import React from 'react';
 
-import { keyframes, styled } from '@storybook/core/theming';
+import { keyframes, styled, transparentize } from '@storybook/core/theming';
 import { LightningOffIcon } from '@storybook/icons';
 
-import { transparentize } from 'polished';
-
 import { rotate360 } from '../shared/animation';
 
 const LoaderWrapper = styled.div<{ size?: number }>(({ size = 32 }) => ({

code/core/src/components/components/tooltip/ListItem.tsx

@@ -1,10 +1,9 @@
 import type { ComponentProps, ReactNode, SyntheticEvent } from 'react';
 import React from 'react';
 
-import { styled } from '@storybook/core/theming';
+import { styled, transparentize } from '@storybook/core/theming';
 
 import memoize from 'memoizerific';
-import { transparentize } from 'polished';
 
 export interface TitleProps {
   children?: ReactNode;

code/core/src/components/components/typography/lib/common.tsx

@@ -1,6 +1,5 @@
 import type { CSSObject, FunctionInterpolation } from '@storybook/core/theming';
-
-import { transparentize } from 'polished';
+import { transparentize } from '@storybook/core/theming';
 
 export const headerCommon: FunctionInterpolation = ({ theme }) => ({
   margin: '20px 0 8px',

code/core/src/components/components/typography/link/link.tsx

@@ -1,11 +1,9 @@
 import type { AnchorHTMLAttributes, MouseEvent } from 'react';
 import React from 'react';
 
-import { styled } from '@storybook/core/theming';
+import { darken, styled } from '@storybook/core/theming';
 import { ChevronRightIcon } from '@storybook/icons';
 
-import { darken } from 'polished';
-
 // Cmd/Ctrl/Shift/Alt + Click should trigger default browser behavior. Same applies to non-left clicks
 const LEFT_BUTTON = 0;
 

code/core/src/manager/components/notifications/NotificationItem.tsx

@@ -4,13 +4,11 @@ import React, { useCallback, useEffect, useRef } from 'react';
 import type { IconsProps } from '@storybook/core/components';
 import { IconButton, Icons } from '@storybook/core/components';
 import { Link } from '@storybook/core/router';
-import { keyframes, styled, useTheme } from '@storybook/core/theming';
+import { keyframes, styled, transparentize, useTheme } from '@storybook/core/theming';
 import { CloseAltIcon } from '@storybook/icons';
 
 import { type State } from '@storybook/core/manager-api';
 
-import { transparentize } from 'polished';
-
 const slideIn = keyframes({
   '0%': {
     opacity: 0,

code/core/src/manager/components/sidebar/HighlightStyles.tsx

@@ -1,9 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { Global } from '@storybook/core/theming';
-
-import { transparentize } from 'polished';
+import { Global, transparentize } from '@storybook/core/theming';
 
 import type { Highlight } from './types';
 

code/core/src/manager/components/sidebar/Menu.tsx

@@ -3,11 +3,9 @@ import React, { useMemo, useState } from 'react';
 
 import type { Button, TooltipLinkListLink } from '@storybook/core/components';
 import { IconButton, TooltipLinkList, WithTooltip } from '@storybook/core/components';
-import { styled } from '@storybook/core/theming';
+import { styled, transparentize } from '@storybook/core/theming';
 import { CloseIcon, CogIcon } from '@storybook/icons';
 
-import { transparentize } from 'polished';
-
 import { useLayout } from '../layout/LayoutProvider';
 
 export type MenuList = ComponentProps<typeof TooltipLinkList>['links'];

code/core/src/manager/components/sidebar/RefIndicator.tsx

@@ -3,7 +3,7 @@ import React, { forwardRef, useCallback, useMemo } from 'react';
 
 import type { TooltipLinkListLink } from '@storybook/core/components';
 import { Spaced, TooltipLinkList, WithTooltip } from '@storybook/core/components';
-import { styled, useTheme } from '@storybook/core/theming';
+import { styled, transparentize, useTheme } from '@storybook/core/theming';
 import { global } from '@storybook/global';
 import {
   AlertIcon,
@@ -18,8 +18,6 @@ import {
 
 import { useStorybookApi } from '@storybook/core/manager-api';
 
-import { transparentize } from 'polished';
-
 import type { getStateType } from '../../utils/tree';
 import type { RefType } from './types';
 

code/core/src/manager/components/sidebar/Refs.tsx

@@ -1,13 +1,11 @@
 import type { FC, MutableRefObject } from 'react';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { styled } from '@storybook/core/theming';
+import { styled, transparentize } from '@storybook/core/theming';
 
 import type { State } from '@storybook/core/manager-api';
 import { useStorybookApi, useStorybookState } from '@storybook/core/manager-api';
 
-import { transparentize } from 'polished';
-
 import { getStateType } from '../../utils/tree';
 import { AuthBlock, EmptyBlock, ErrorBlock, LoaderBlock } from './RefBlocks';
 import { RefIndicator } from './RefIndicator';

code/core/src/manager/components/sidebar/SearchResults.tsx

@@ -2,15 +2,14 @@ import type { FC, MouseEventHandler, PropsWithChildren, ReactNode } from 'react'
 import React, { useCallback, useEffect } from 'react';
 
 import { Button, IconButton } from '@storybook/core/components';
-import { styled } from '@storybook/core/theming';
+import { styled, transparentize } from '@storybook/core/theming';
 import { global } from '@storybook/global';
 import { TrashIcon } from '@storybook/icons';
 
 import { PRELOAD_ENTRIES } from '@storybook/core/core-events';
 import { useStorybookApi } from '@storybook/core/manager-api';
 
 import type { ControllerStateAndHelpers } from 'downshift';
-import { transparentize } from 'polished';
 
 import { matchesKeyCode, matchesModifiers } from '../../keybinding';
 import { statusMapping } from '../../utils/status';

code/core/src/manager/components/sidebar/StatusButton.tsx

@@ -1,9 +1,8 @@
 import { IconButton } from '@storybook/core/components';
-import { styled } from '@storybook/core/theming';
+import { styled, transparentize } from '@storybook/core/theming';
 import type { API_StatusValue } from '@storybook/types';
 
 import type { Theme } from '@emotion/react';
-import { transparentize } from 'polished';
 
 const withStatusColor = ({ theme, status }: { theme: Theme; status: API_StatusValue }) => {
   const defaultColor =

code/core/src/manager/components/sidebar/Tree.tsx

@@ -2,7 +2,7 @@ import type { ComponentProps, MutableRefObject } from 'react';
 import React, { useCallback, useMemo, useRef } from 'react';
 
 import { Button, IconButton, TooltipLinkList, WithTooltip } from '@storybook/core/components';
-import { styled, useTheme } from '@storybook/core/theming';
+import { styled, transparentize, useTheme } from '@storybook/core/theming';
 import {
   CollapseIcon as CollapseIconSvg,
   ExpandAltIcon,
@@ -24,8 +24,6 @@ import type {
 } from '@storybook/core/manager-api';
 import { useStorybookApi } from '@storybook/core/manager-api';
 
-import { transparentize } from 'polished';
-
 import { getGroupStatus, getHighestStatus, statusMapping } from '../../utils/status';
 import {
   createId,

code/core/src/manager/components/sidebar/TreeNode.tsx

@@ -3,8 +3,6 @@ import React from 'react';
 
 import { styled } from '@storybook/core/theming';
 
-import { transparentize } from 'polished';
-
 import { UseSymbol } from './IconSymbols';
 import { CollapseIcon } from './components/CollapseIcon';
 

code/core/src/manager/components/sidebar/components/CollapseIcon.tsx

@@ -1,9 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { styled } from '@storybook/core/theming';
-
-import { transparentize } from 'polished';
+import { styled, transparentize } from '@storybook/core/theming';
 
 interface CollapseIconProps {
   isExpanded: boolean;

code/core/src/manager/globals/exports.ts

@@ -676,8 +676,10 @@ export default {
     'jsx',
     'keyframes',
     'lighten',
+    'opacify',
     'styled',
     'themes',
+    'transparentize',
     'typography',
     'useTheme',
     'withTheme',
@@ -702,8 +704,10 @@ export default {
     'jsx',
     'keyframes',
     'lighten',
+    'opacify',
     'styled',
     'themes',
+    'transparentize',
     'typography',
     'useTheme',
     'withTheme',
@@ -728,8 +732,10 @@ export default {
     'jsx',
     'keyframes',
     'lighten',
+    'opacify',
     'styled',
     'themes',
+    'transparentize',
     'typography',
     'useTheme',
     'withTheme',

code/core/src/theming/base.ts

@@ -1,4 +1,4 @@
-import { transparentize } from 'polished';
+import { transparentize } from './utils';
 
 export const color = {
   // Official color palette

code/core/src/theming/convert.ts

@@ -1,11 +1,9 @@
-import { opacify } from 'polished';
-
 import { animation, easing } from './animation';
 import { background, color, typography } from './base';
 import { themes } from './create';
 import { chromeDark, chromeLight, create as createSyntax } from './modules/syntax';
 import type { Color, StorybookTheme, ThemeVars, ThemeVarsColors } from './types';
-import { getPreferredColorScheme } from './utils';
+import { getPreferredColorScheme, opacify } from './utils';
 
 const lightSyntaxColors = {
   green1: '#008000',

code/core/src/theming/index.ts

@@ -40,7 +40,7 @@ export * from './create';
 export * from './convert';
 export * from './ensure';
 
-export { lightenColor as lighten, darkenColor as darken } from './utils';
+export { lightenColor as lighten, darkenColor as darken, transparentize, opacify } from './utils';
 
 export const ignoreSsrWarning =
   '/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */';