@beydesign/storybook 0.1.21 → 0.2.0

package/dist/stories/Navigation/NavItem.js

@@ -20,14 +20,14 @@ const StyledNavItem = styled.div `
   &:hover {
     .nav-item-icon {
       color: ${({ $state }) => $state === NavItemState.Disabled
-    ? 'var(--primitives-desktop-primary-gray-500)'
-    : 'var(--colors-light-background-bg-brand-hover)'} !important;
+    ? 'var(--color-text-text-subtle)'
+    : 'var(--color-background-bg-brand-primary-hover)'} !important;
     }
 
     .nav-item-text {
       color: ${({ $state }) => $state === NavItemState.Disabled
-    ? 'var(--primitives-desktop-primary-gray-500)'
-    : 'var(--colors-light-background-bg-brand-hover)'} !important;
+    ? 'var(--color-text-text-subtle)'
+    : 'var(--color-background-bg-brand-primary-hover)'} !important;
     }
   }
 `;
@@ -35,8 +35,8 @@ const StyledNavItem = styled.div `
 const IconWrapper = styled.span `
   display: inline-flex;
   color: ${({ $state }) => $state === NavItemState.Active
-    ? 'var(--colors-light-background-bg-brand)'
-    : 'var(--colors-light-text-text-paragraph)'};
+    ? 'var(--color-background-bg-brand-primary)'
+    : 'var(--color-text-text-paragraph)'};
   transition: color 0.3s ease-in-out;
 `;
 const TextWrapper = styled.span `
@@ -51,7 +51,7 @@ export const NavItem = ({ text, icon, state = NavItemState.Default, size = NavIt
     };
     const isCollapsed = size === NavItemSize.Collapsed;
     return (_jsxs(StyledNavItem, { "$state": state, "$size": size, onClick: handleClick, className: className, title: isCollapsed ? text : undefined, children: [_jsx("svg", { width: "5", height: "36", viewBox: "0 0 5 36", fill: state === NavItemState.Active
-                    ? 'var(--colors-light-background-bg-brand)'
+                    ? 'var(--color-background-bg-brand-primary)'
                     : 'transparent', xmlns: "http://www.w3.org/2000/svg", style: {
                     transition: 'fill 0.3s ease-in-out',
                     position: 'absolute',
@@ -61,6 +61,6 @@ export const NavItem = ({ text, icon, state = NavItemState.Default, size = NavIt
                         }) }), !isCollapsed && (_jsx(TextWrapper, { className: "nav-item-text", children: _jsx(Typography, { size: TypographySize.TextS, weight: state === NavItemState.Active
                                 ? TypographyWeight.SemiBold
                                 : TypographyWeight.Medium, className: "nav-item-text", color: state === NavItemState.Active
-                                ? 'var(--colors-light-background-bg-brand)'
-                                : 'var(--colors-light-text-text-paragraph)', children: text }) })), showBadge && !isCollapsed && (_jsx(Badge, { size: BadgeSize.xs, icon: "ClockCountdown", showIcon: true, text: "Coming Soon", color: BadgeColor.Default }))] })] }));
+                                ? 'var(--color-background-bg-brand-primary)'
+                                : 'var(--color-text-text-paragraph)', children: text }) })), showBadge && !isCollapsed && (_jsx(Badge, { size: BadgeSize.xs, icon: "ClockCountdown", showIcon: true, text: "Coming Soon", color: BadgeColor.Default }))] })] }));
 };

package/dist/stories/Navigation/NavItem.stories.js

@@ -80,7 +80,7 @@ export const SidebarExpanded = {
             flexDirection: 'column',
             gap: '8px',
             padding: '16px',
-            backgroundColor: 'var(--colors-light-background-bg-white)',
+            backgroundColor: 'var(--color-background-bg-white)',
             borderRadius: '8px',
             boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
         }, children: [_jsx(NavItem, { text: "Home", icon: "House", size: NavItemSize.Expanded, state: NavItemState.Active }), _jsx(NavItem, { text: "Settings", icon: "Gear", size: NavItemSize.Expanded }), _jsx(NavItem, { text: "Notifications", icon: "Bell", size: NavItemSize.Expanded }), _jsx(NavItem, { text: "Messages", icon: "ChatText", size: NavItemSize.Expanded }), _jsx(NavItem, { text: "Profile", icon: "User", size: NavItemSize.Expanded }), _jsx(NavItem, { text: "Analytics", icon: "ChartBar", size: NavItemSize.Expanded, showBadge: true, state: NavItemState.Disabled })] })),
@@ -90,7 +90,7 @@ export const SidebarCollapsed = {
             display: 'flex',
             flexDirection: 'column',
             gap: '8px',
-            backgroundColor: 'var(--colors-light-background-bg-white)',
+            backgroundColor: 'var(--color-background-bg-white)',
             borderRadius: '8px',
             boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
         }, children: [_jsx(NavItem, { text: "Home", icon: "House", size: NavItemSize.Collapsed, state: NavItemState.Active }), _jsx(NavItem, { text: "Settings", icon: "Gear", size: NavItemSize.Collapsed }), _jsx(NavItem, { text: "Notifications", icon: "Bell", size: NavItemSize.Collapsed }), _jsx(NavItem, { text: "Messages", icon: "ChatText", size: NavItemSize.Collapsed }), _jsx(NavItem, { text: "Profile", icon: "User", size: NavItemSize.Collapsed }), _jsx(NavItem, { text: "Analytics", icon: "ChartBar", state: NavItemState.Disabled, size: NavItemSize.Collapsed })] })),

package/dist/stories/Navigation/Sidebar.js

@@ -11,8 +11,8 @@ import { MainButton, ButtonDisplayMode, ButtonHierarchy, ButtonShape, ButtonSize
 const StyledSidebar = styled.div `
   display: flex;
   flex-direction: column;
-  background-color: var(--colors-light-background-bg-surface);
-  border-right: 1px solid var(--colors-light-border-border-default);
+  background-color: var(--color-background-bg-component);
+  border-right: 1px solid var(--color-border-border-component);
   height: 100vh;
   width: ${({ $size }) => ($size === SidebarSize.Expanded ? '280px' : '80px')};
   transition: width 0.3s ease-in-out;
@@ -59,7 +59,7 @@ const NavSection = styled.div `
   transition: all 0.3s ease-in-out;
 `;
 const SectionTitle = styled.div `
-  color: var(--colors-light-text-text-subtle);
+  color: var(--color-text-text-subtle);
   padding: ${({ $size }) => $size === SidebarSize.Expanded ? '0px 28px' : '0px'};
   display: ${({ $size }) => $size === SidebarSize.Collapsed ? 'flex' : 'block'};
   opacity: ${({ $size }) => ($size === SidebarSize.Collapsed ? 0 : 0.5)};
@@ -67,11 +67,10 @@ const SectionTitle = styled.div `
   transition: all 0.3s ease-in-out;
 `;
 const Separator = styled.div `
-  height: 0.1px;
-  background-color: var(--primitives-desktop-primary-brand-violet-950);
+  height: 1px;
+  background-color: var(--color-border-border-divider);
   padding: ${({ $size }) => $size === SidebarSize.Collapsed ? '0px 8px' : '0px 28px'};
   margin: ${({ $size }) => $size === SidebarSize.Collapsed ? '16px 12px' : '16px 18px'};
-  opacity: 0.05;
   transition: all 0.3s ease-in-out;
 `;
 const BottomContainer = styled.div `
@@ -90,7 +89,7 @@ const NavItemWrapper = ({ item, isCollapsed, }) => {
     };
     return (_jsx(NavItem, { text: item.text, icon: item.icon, state: item.state || NavItemState.Default, size: isCollapsed ? NavItemSize.Collapsed : NavItemSize.Expanded, showBadge: isCollapsed ? false : item.showBadge, onClick: handleClick }));
 };
-export const Sidebar = ({ size = SidebarSize.Expanded, className = '', navSections, bottomNavItems = [], credits, loadingCredits = false, onToggle, logoProps = { color: 'var(--primitives-desktop-primary-brand-violet-950)' }, }) => {
+export const Sidebar = ({ size = SidebarSize.Expanded, className = '', navSections, bottomNavItems = [], credits, loadingCredits = false, onToggle, logoProps = { color: 'var(--color-foreground-fg-brand-logo)' }, }) => {
     const [sidebarSize, setSidebarSize] = useState(size);
     const handleToggle = () => {
         const newSize = sidebarSize === SidebarSize.Expanded
@@ -105,7 +104,7 @@ export const Sidebar = ({ size = SidebarSize.Expanded, className = '', navSectio
     const cardSize = isCollapsed
         ? CreditsCardSize.Collapsed
         : CreditsCardSize.Expanded;
-    return (_jsxs(SidebarContainer, { className: className, children: [_jsxs(StyledSidebar, { "$size": sidebarSize, children: [_jsx(LogoContainer, { "$size": sidebarSize, children: _jsx(Logo, { variant: isCollapsed ? LogoVariant.Icon : LogoVariant.Horizontal, color: logoProps.color, gradient: logoProps.gradient }) }), _jsx(NavItemsContainer, { children: navSections.map((section, sectionIndex) => (_jsxs(React.Fragment, { children: [_jsxs(NavSection, { children: [section.title && (_jsx(SectionTitle, { "$size": sidebarSize, children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-paragraph)", className: isCollapsed ? 'hidden' : '', children: isCollapsed
+    return (_jsxs(SidebarContainer, { className: className, children: [_jsxs(StyledSidebar, { "$size": sidebarSize, children: [_jsx(LogoContainer, { "$size": sidebarSize, children: _jsx(Logo, { variant: isCollapsed ? LogoVariant.Icon : LogoVariant.Horizontal, color: logoProps.color, gradient: logoProps.gradient }) }), _jsx(NavItemsContainer, { children: navSections.map((section, sectionIndex) => (_jsxs(React.Fragment, { children: [_jsxs(NavSection, { children: [section.title && (_jsx(SectionTitle, { "$size": sidebarSize, children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--color-text-text-paragraph)", className: isCollapsed ? 'hidden' : '', children: isCollapsed
                                                     ? section.title.split(' ')[0]
                                                     : section.title }) })), section.items.map((item, itemIndex) => (_jsx(NavItemWrapper, { item: item, isCollapsed: isCollapsed }, `${item.text}-${itemIndex}`)))] }), sectionIndex < navSections.length - 1 &&
                                     section.showSeparator && _jsx(Separator, { "$size": sidebarSize })] }, `section-${sectionIndex}`))) }), _jsx(BottomContainer, { children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: "16px", children: [_jsx(Box, { display: 'flex', justifyContent: 'center', padding: isCollapsed ? '8px' : '0px 12px', children: loadingCredits ? (_jsx(CreditsCardSkeleton, { size: cardSize })) : credits ? (_jsx(CreditsCard, { size: cardSize, maxCredits: credits.maxCredits, usedCredits: credits.usedCredits, managedAgentsInfoText: credits.managedAgentsInfoText, speechToVideoInfoText: credits.speechToVideoInfoText, onUpgradeClick: credits.onUpgradeClick, overUsageEnabled: credits.overUsageEnabled, overUsedCredits: credits.overUsedCredits })) : null }), bottomNavItems.map((item, index) => (_jsx(NavItemWrapper, { item: item, isCollapsed: isCollapsed }, `bottom-${item.text}-${index}`)))] }) })] }), _jsx(ToggleButtonWrapper, { children: isCollapsed ? (_jsx(MainButton, { text: "Expand", size: ButtonSize.xxs, displayIconMode: ButtonDisplayMode.Only, displayIcon: "CaretRight", onClick: handleToggle, shape: ButtonShape.Circle, hierarchy: ButtonHierarchy.Tertiary, style: {

package/dist/stories/Navigation/Sidebar.stories.js

@@ -114,7 +114,7 @@ const defaultBottomNavItems = [
 ];
 export const InBoxContainer = {
     render: (args) => (_jsxs(Stack, { direction: 'row', height: '100%', width: '100%', children: [_jsx(Box, { height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', sx: {
-                    border: '1px solid var(--colors-light-border-border-default)',
+                    border: '1px solid var(--color-border-border-component)',
                     borderRadius: '8px',
                     boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
                     maxWidth: '280px',

package/dist/stories/PlanCard/PlanCard.js

@@ -6,8 +6,8 @@ import { Badge, BadgeColor, BadgeSize, CheckIcon, CheckIconColor, CheckIconSize,
 export const PlanCard = ({ title, description, price, priceSuffix = '/month', badgeText, badgeColor = BadgeColor.Lemon, highlighted = false, featuresTitle = 'This includes:', features = [], buttonText = 'Upgrade', onButtonClick, buttonDisabled = false, buttonHierarchy = ButtonHierarchy.Primary, buttonLoading = false, width = '286px', style, testId, }) => {
     const planKey = title?.toLowerCase()?.replace(/\s+/g, '-');
     return (_jsxs(Box, { width: width, display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-2xl)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', bgcolor: highlighted
-            ? 'var(--colors-light-background-bg-card-highlight)'
-            : 'var(--colors-light-background-bg-white)', border: `1px solid ${highlighted
-            ? 'var(--colors-light-border-border-brand)'
-            : 'var(--colors-light-border-border-subtle)'}`, boxSizing: 'border-box', style: style, "data-testid": testId ?? `${planKey}-plan-card`, children: [_jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', minHeight: '24px', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.Bold, color: 'var(--colors-light-text-text-title)', children: title }), badgeText && (_jsx(Badge, { text: badgeText, color: badgeColor, size: BadgeSize.xs, fill: true }))] }), description && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-paragraph)', textStyle: { textAlign: 'left' }, children: description })), price && (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'baseline', gap: '2px', children: [_jsx(Typography, { size: TypographySize.HeadingL, weight: TypographyWeight.Bold, color: 'var(--colors-light-text-text-title)', children: price }), priceSuffix && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-paragraph)', children: priceSuffix }))] }))] }), buttonText && (_jsx(MainButton, { text: buttonText, hierarchy: buttonHierarchy, size: ButtonSize.md, disabled: buttonDisabled, loading: buttonLoading, onClick: onButtonClick, style: { width: '100%' }, testId: `${planKey}-plan-button` })), features.length > 0 && (_jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', alignItems: 'flex-start', children: [_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: 'var(--colors-light-text-text-paragraph)', children: featuresTitle }), features.map((feature, index) => (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', width: '100%', children: [_jsx(CheckIcon, { color: CheckIconColor.Violet, size: CheckIconSize.xs, type: CheckIconType.Duotone }), _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-title)', textStyle: { textAlign: 'left' }, children: feature })] }, `${index}-${feature}`)))] }))] }));
+            ? 'var(--color-background-bg-card-highlight)'
+            : 'var(--color-background-bg-component)', border: `1px solid ${highlighted
+            ? 'var(--color-border-border-brand)'
+            : 'var(--color-border-border-subtle)'}`, boxSizing: 'border-box', style: style, "data-testid": testId ?? `${planKey}-plan-card`, children: [_jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', minHeight: '24px', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.Bold, color: 'var(--color-text-text-title)', children: title }), badgeText && (_jsx(Badge, { text: badgeText, color: badgeColor, size: BadgeSize.xs, fill: true }))] }), description && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-paragraph)', textStyle: { textAlign: 'left' }, children: description })), price && (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'baseline', gap: '2px', children: [_jsx(Typography, { size: TypographySize.HeadingL, weight: TypographyWeight.Bold, color: 'var(--color-text-text-title)', children: price }), priceSuffix && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-paragraph)', children: priceSuffix }))] }))] }), buttonText && (_jsx(MainButton, { text: buttonText, hierarchy: buttonHierarchy, size: ButtonSize.md, disabled: buttonDisabled, loading: buttonLoading, onClick: onButtonClick, style: { width: '100%' }, testId: `${planKey}-plan-button` })), features.length > 0 && (_jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', alignItems: 'flex-start', children: [_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: 'var(--color-text-text-paragraph)', children: featuresTitle }), features.map((feature, index) => (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', width: '100%', children: [_jsx(CheckIcon, { color: CheckIconColor.Violet, size: CheckIconSize.xs, type: CheckIconType.Duotone }), _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Regular, color: 'var(--color-text-text-title)', textStyle: { textAlign: 'left' }, children: feature })] }, `${index}-${feature}`)))] }))] }));
 };

package/dist/stories/PlanCard/PlanCardSkeleton.js

@@ -2,5 +2,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { SkeletonLoader } from '../UI';
 export const PlanCardSkeleton = ({ showBadge = true, showButton = true, showFeatures = true, featuresCount = 4, width = '286px', style, testId, }) => {
-    return (_jsxs(Box, { width: width, display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-2xl)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', bgcolor: 'var(--colors-light-background-bg-white)', border: '1px solid var(--colors-light-border-border-subtle)', boxSizing: 'border-box', style: style, "data-testid": testId, children: [_jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(SkeletonLoader, { width: '40%', height: '24px', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)' }), showBadge && (_jsx(SkeletonLoader, { width: '88px', height: '24px', borderRadius: 'var(--spacing-tokens-size-in-px-radius-radius-full)' }))] }), _jsx(SkeletonLoader, { width: '100%', height: '20px', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)' }), _jsx(SkeletonLoader, { width: '50%', height: '32px', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)' })] }), showButton && (_jsx(SkeletonLoader, { width: '100%', height: '36px', borderRadius: 'var(--spacing-tokens-size-in-px-radius-radius-xs)' })), showFeatures && (_jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', alignItems: 'flex-start', children: [_jsx(SkeletonLoader, { width: '96px', height: '20px', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)' }), Array.from({ length: featuresCount }).map((_, index) => (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', width: '100%', children: [_jsx(SkeletonLoader, { width: '20px', height: '20px', borderRadius: 'var(--spacing-tokens-size-in-px-radius-radius-full)' }), _jsx(SkeletonLoader, { width: index % 2 === 0 ? '80%' : '60%', height: '18px', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)' })] }, index)))] }))] }));
+    return (_jsxs(Box, { width: width, display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-2xl)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', bgcolor: 'var(--color-background-bg-component)', border: '1px solid var(--color-border-border-subtle)', boxSizing: 'border-box', style: style, "data-testid": testId, children: [_jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(SkeletonLoader, { width: '40%', height: '24px', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)' }), showBadge && (_jsx(SkeletonLoader, { width: '88px', height: '24px', borderRadius: 'var(--spacing-tokens-size-in-px-radius-radius-full)' }))] }), _jsx(SkeletonLoader, { width: '100%', height: '20px', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)' }), _jsx(SkeletonLoader, { width: '50%', height: '32px', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)' })] }), showButton && (_jsx(SkeletonLoader, { width: '100%', height: '36px', borderRadius: 'var(--spacing-tokens-size-in-px-radius-radius-xs)' })), showFeatures && (_jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', alignItems: 'flex-start', children: [_jsx(SkeletonLoader, { width: '96px', height: '20px', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)' }), Array.from({ length: featuresCount }).map((_, index) => (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', width: '100%', children: [_jsx(SkeletonLoader, { width: '20px', height: '20px', borderRadius: 'var(--spacing-tokens-size-in-px-radius-radius-full)' }), _jsx(SkeletonLoader, { width: index % 2 === 0 ? '80%' : '60%', height: '18px', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)' })] }, index)))] }))] }));
 };

package/dist/stories/StripeProduct/StripeProduct.js

@@ -7,12 +7,10 @@ import React from 'react';
 import { Badge, BadgeColor, BadgeSize } from '../UI';
 export const StripeProduct = ({ className, description, features, isMostPopular, isEnterprisePlan, style, title, duration, price, buttonProps, bubbleText, bubbleTooltip, bubbleTopOffset, testId, }) => {
     return (_jsxs(Box, { display: 'flex', flexDirection: 'column', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-2xl)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', bgcolor: isMostPopular
-            ? 'var(--primitives-desktop-primary-brand-violet-50)'
-            : 'var(--colors-light-background-bg-white)', border: isMostPopular
-            ? '1.5px solid var(--colors-light-border-border-brand)'
-            : 'none', position: 'relative', boxShadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.1)', style: style, className: className, "data-testid": testId, children: [bubbleText && (_jsx(Box, { position: 'absolute', top: bubbleTopOffset || '-4%', right: 0, left: 0, children: _jsx(Badge, { text: bubbleText, color: BadgeColor.Yellow, children: bubbleTooltip, size: BadgeSize.xs, fill: true }) })), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', children: [_jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.Bold, color: 'var(--colors-light-text-text-title)', children: title }), isMostPopular && (_jsx(Box, { display: 'flex', justifyContent: 'center', alignItems: 'center', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', bgcolor: 'var(--primitives-desktop-primary-brand-violet-200)', borderRadius: 'var(--spacing-tokens-size-in-px-radius-radius-sm)', children: _jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-accent)', children: "Most popular" }) }))] }), _jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-paragraph)', textStyle: { textAlign: 'left', minHeight: '100px' }, children: description }), _jsx(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'end', children: isEnterprisePlan ? (_jsx(Typography, { size: TypographySize.HeadingL, weight: TypographyWeight.Bold, color: 'var(--colors-light-text-text-title)', children: "Custom" })) : (_jsxs(React.Fragment, { children: [_jsx(Typography, { size: TypographySize.HeadingL, weight: TypographyWeight.Bold, color: 'var(--colors-light-text-text-title)', children: price }), _jsxs(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-paragraph)', children: ["/", duration] })] })) }), buttonProps && (_jsx(MainButton, { disabled: buttonProps?.disabled, loading: buttonProps?.loading, onClick: buttonProps?.onClick, text: buttonProps?.text, size: buttonProps?.size || ButtonSize.lg, hierarchy: buttonProps?.hierarchy || ButtonHierarchy.Primary, style: {
+            ? 'var(--color-background-bg-card-highlight)'
+            : 'var(--color-background-bg-component)', border: isMostPopular ? '1.5px solid var(--color-border-border-brand)' : 'none', position: 'relative', boxShadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.1)', style: style, className: className, "data-testid": testId, children: [bubbleText && (_jsx(Box, { position: 'absolute', top: bubbleTopOffset || '-4%', right: 0, left: 0, children: _jsx(Badge, { text: bubbleText, color: BadgeColor.Yellow, children: bubbleTooltip, size: BadgeSize.xs, fill: true }) })), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', children: [_jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.Bold, color: 'var(--color-text-text-title)', children: title }), isMostPopular && (_jsx(Box, { display: 'flex', justifyContent: 'center', alignItems: 'center', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', bgcolor: 'var(--color-background-bg-badge-accent-brand-violet)', borderRadius: 'var(--spacing-tokens-size-in-px-radius-radius-sm)', children: _jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-accent)', children: "Most popular" }) }))] }), _jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.Regular, color: 'var(--color-text-text-paragraph)', textStyle: { textAlign: 'left', minHeight: '100px' }, children: description }), _jsx(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'end', children: isEnterprisePlan ? (_jsx(Typography, { size: TypographySize.HeadingL, weight: TypographyWeight.Bold, color: 'var(--color-text-text-title)', children: "Custom" })) : (_jsxs(React.Fragment, { children: [_jsx(Typography, { size: TypographySize.HeadingL, weight: TypographyWeight.Bold, color: 'var(--color-text-text-title)', children: price }), _jsxs(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-paragraph)', children: ["/", duration] })] })) }), buttonProps && (_jsx(MainButton, { disabled: buttonProps?.disabled, loading: buttonProps?.loading, onClick: buttonProps?.onClick, text: buttonProps?.text, size: buttonProps?.size || ButtonSize.lg, hierarchy: buttonProps?.hierarchy || ButtonHierarchy.Primary, style: {
                     margin: 'var(--spacing-tokens-size-in-px-spacing-spacing-3xl) 0',
-                } })), features && features?.length > 0 && (_jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', alignItems: 'flex-start', children: [_jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: 'var(--colors-light-text-text-title)', children: "This includes:" }), features.map((feature, index) => {
+                } })), features && features?.length > 0 && (_jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', alignItems: 'flex-start', children: [_jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: 'var(--color-text-text-title)', children: "This includes:" }), features.map((feature, index) => {
                         const isHeading = feature?.startsWith('-');
                         return (_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [!isHeading && (_jsx(Box, { width: '18px', height: '18px', bgcolor: 'var(--primitives-desktop-primary-brand-violet-100)', borderRadius: 'var(--spacing-tokens-size-in-px-radius-radius-full)', display: 'flex', justifyContent: 'center', alignItems: 'center', children: getIconComponent('Check', {
                                         size: '12px',
@@ -20,7 +18,7 @@ export const StripeProduct = ({ className, description, features, isMostPopular,
                                     }) })), _jsx(Typography, { size: TypographySize.TextS, weight: isHeading
                                         ? TypographyWeight.Medium
                                         : TypographyWeight.Regular, color: isHeading
-                                        ? 'var(--colors-light-text-text-title)'
-                                        : 'var(--colors-light-text-text-paragraph)', textStyle: { textAlign: 'left' }, children: isHeading ? feature?.slice(1)?.trim() : feature })] }, `${index}`));
+                                        ? 'var(--color-text-text-title)'
+                                        : 'var(--color-text-text-paragraph)', textStyle: { textAlign: 'left' }, children: isHeading ? feature?.slice(1)?.trim() : feature })] }, `${index}`));
                     })] }))] }));
 };

package/dist/stories/StripeProduct/StripeProductCardSkeleton.js

@@ -2,5 +2,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { SkeletonLoader } from '../UI';
 export const StripeProductCardSkeleton = ({ width = 'auto', showMostPopular = false, showBubble = false, showButton = true, showFeatures = true, featuresCount = 5, style, testId, }) => {
-    return (_jsxs(Box, { width: width, display: "flex", flexDirection: "column", borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-2xl)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', bgcolor: "var(--colors-light-background-bg-white)", position: "relative", boxShadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.1)', style: style, "data-testid": testId, children: [showBubble && (_jsx(Box, { position: "absolute", top: "-4%", left: "50%", sx: { transform: 'translateX(-50%)' }, width: "50%", children: _jsx(SkeletonLoader, { height: "24px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }) })), _jsxs(Box, { display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: "center", children: [_jsx(SkeletonLoader, { width: "40%", height: "28px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), showMostPopular && (_jsx(SkeletonLoader, { width: "100px", height: "28px", borderRadius: "var(--spacing-tokens-size-in-px-radius-radius-sm)" }))] }), _jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-sm)", minHeight: "100px", children: [_jsx(SkeletonLoader, { width: "100%", height: "20px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), _jsx(SkeletonLoader, { width: "95%", height: "20px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), _jsx(SkeletonLoader, { width: "80%", height: "20px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" })] }), _jsxs(Box, { display: "flex", flexDirection: "row", alignItems: "end", gap: "4px", children: [_jsx(SkeletonLoader, { width: "80px", height: "36px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), _jsx(SkeletonLoader, { width: "60px", height: "20px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" })] }), showButton && (_jsx(Box, { margin: 'var(--spacing-tokens-size-in-px-spacing-spacing-3xl) 0', children: _jsx(SkeletonLoader, { width: "100%", height: "44px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-md)" }) })), showFeatures && (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-xl)", alignItems: "flex-start", children: [_jsx(SkeletonLoader, { width: "120px", height: "20px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), Array.from({ length: featuresCount }).map((_, index) => (_jsxs(Box, { display: "flex", flexDirection: "row", alignItems: "flex-start", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", width: "100%", children: [_jsx(SkeletonLoader, { width: "18px", height: "18px", borderRadius: "var(--spacing-tokens-size-in-px-radius-radius-full)" }), _jsx(SkeletonLoader, { width: index % 3 === 0 ? '85%' : index % 3 === 1 ? '75%' : '90%', height: "18px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" })] }, index)))] }))] }));
+    return (_jsxs(Box, { width: width, display: "flex", flexDirection: "column", borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-2xl)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', bgcolor: "var(--color-background-bg-component)", position: "relative", boxShadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.1)', style: style, "data-testid": testId, children: [showBubble && (_jsx(Box, { position: "absolute", top: "-4%", left: "50%", sx: { transform: 'translateX(-50%)' }, width: "50%", children: _jsx(SkeletonLoader, { height: "24px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }) })), _jsxs(Box, { display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: "center", children: [_jsx(SkeletonLoader, { width: "40%", height: "28px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), showMostPopular && (_jsx(SkeletonLoader, { width: "100px", height: "28px", borderRadius: "var(--spacing-tokens-size-in-px-radius-radius-sm)" }))] }), _jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-sm)", minHeight: "100px", children: [_jsx(SkeletonLoader, { width: "100%", height: "20px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), _jsx(SkeletonLoader, { width: "95%", height: "20px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), _jsx(SkeletonLoader, { width: "80%", height: "20px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" })] }), _jsxs(Box, { display: "flex", flexDirection: "row", alignItems: "end", gap: "4px", children: [_jsx(SkeletonLoader, { width: "80px", height: "36px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), _jsx(SkeletonLoader, { width: "60px", height: "20px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" })] }), showButton && (_jsx(Box, { margin: 'var(--spacing-tokens-size-in-px-spacing-spacing-3xl) 0', children: _jsx(SkeletonLoader, { width: "100%", height: "44px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-md)" }) })), showFeatures && (_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-xl)", alignItems: "flex-start", children: [_jsx(SkeletonLoader, { width: "120px", height: "20px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" }), Array.from({ length: featuresCount }).map((_, index) => (_jsxs(Box, { display: "flex", flexDirection: "row", alignItems: "flex-start", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", width: "100%", children: [_jsx(SkeletonLoader, { width: "18px", height: "18px", borderRadius: "var(--spacing-tokens-size-in-px-radius-radius-full)" }), _jsx(SkeletonLoader, { width: index % 3 === 0 ? '85%' : index % 3 === 1 ? '75%' : '90%', height: "18px", borderRadius: "var(--spacing-tokens-size-in-px-spacing-spacing-xs)" })] }, index)))] }))] }));
 };

package/dist/stories/Typography/Typography.js

@@ -5,7 +5,7 @@ export const Typography = ({ text, color, size = TypographySize.HeadingL, weight
     const sizeToken = getTypographySizeToken(size);
     const weightToken = getTypographyWeightToken(weight);
     const { fontSize, fontWeight, fontFamily, lineHeight, letterSpacing, paragraphIndent, paragraphSpacing, textDecoration, textTransform, } = getTextStyles(sizeToken, weightToken);
-    const requiredColor = 'var(--colors-light-text-text-error)';
+    const requiredColor = 'var(--color-text-text-error)';
     return (_jsxs("span", { className: className, style: {
             fontSize: fontSize,
             fontWeight: fontWeight,

package/dist/stories/UI/Avatar.js

@@ -26,13 +26,13 @@ export const Avatar = ({ avatarStyle = AvatarStyle.Placeholder, border = false,
     const getColor = (avatarStyle) => {
         switch (avatarStyle) {
             case AvatarStyle.Letters:
-                return 'var(--colors-light-foreground-fg-primary)';
+                return 'var(--color-foreground-fg-primary)';
             case AvatarStyle.Placeholder:
-                return 'var(--colors-light-foreground-fg-tertiary)';
+                return 'var(--color-foreground-fg-tertiary)';
             case AvatarStyle.Picture:
-                return 'var(--colors-light-foreground-fg-secondary)';
+                return 'var(--color-foreground-fg-secondary)';
             default:
-                return 'var(--colors-light-foreground-fg-tertiary)';
+                return 'var(--color-foreground-fg-tertiary)';
         }
     };
     const getTextSize = () => {
@@ -55,9 +55,9 @@ export const Avatar = ({ avatarStyle = AvatarStyle.Placeholder, border = false,
             width: dimensions,
             height: dimensions,
             border: border
-                ? '1px solid var(--colors-light-border-border-component)'
+                ? '1px solid var(--color-border-border-component)'
                 : 'none',
-            backgroundColor: 'var(--colors-light-background-bg-card-highlight)',
+            backgroundColor: 'var(--color-background-bg-card-highlight)',
             color: getColor(avatarStyle),
             fontSize: getTextSize(),
             borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-11xl)',

package/dist/stories/UI/Badge.js

@@ -7,7 +7,7 @@ export const Badge = ({ color = BadgeColor.Default, size = BadgeSize.md, text, c
     const getBackgroundColor = (color) => {
         switch (color) {
             case BadgeColor.Default:
-                return 'var(--primitives-desktop-primary-gray-50)';
+                return 'var(--color-background-bg-badge-accent-gray)';
             case BadgeColor.Violet:
                 return 'var(--primitives-desktop-primary-brand-violet-100)';
             case BadgeColor.Lemon:
@@ -31,7 +31,7 @@ export const Badge = ({ color = BadgeColor.Default, size = BadgeSize.md, text, c
     const getTextColor = () => {
         switch (color) {
             case BadgeColor.Default:
-                return 'var(--colors-light-text-text-title)';
+                return 'var(--color-text-text-title)';
             case BadgeColor.Violet:
                 return 'var(--primitives-desktop-primary-brand-violet-800)';
             case BadgeColor.Lemon:
@@ -49,7 +49,7 @@ export const Badge = ({ color = BadgeColor.Default, size = BadgeSize.md, text, c
             case BadgeColor.Pink:
                 return 'var(--primitives-desktop-secondary-pink-800)';
             case BadgeColor.DarkTransparent:
-                return 'var(--colors-light-text-text-white)';
+                return 'var(--color-text-text-white)';
         }
     };
     const getBorder = (color) => {
@@ -73,7 +73,7 @@ export const Badge = ({ color = BadgeColor.Default, size = BadgeSize.md, text, c
             case BadgeColor.Pink:
                 return '1px solid var(--primitives-desktop-secondary-pink-300)';
             case BadgeColor.DarkTransparent:
-                return '1px solid rgba(var(--colors-light-background-bg-component-dark), 0.9)';
+                return '1px solid rgba(var(--color-background-bg-component-dark), 0.9)';
         }
     };
     const getPadding = (size) => {

package/dist/stories/UI/CheckIcon.js

@@ -2,15 +2,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { CheckIconColor, CheckIconSize, CheckIconType, } from './types';
 import { getIconComponent } from '../../utils';
-const WHITE = 'var(--semantic-colors-light-foreground-fg-on-primary-accent-color)';
+const WHITE = 'var(--color-foreground-fg-on-primary-accent-color)';
 const COLOR_MAP = {
     [CheckIconColor.Violet]: {
-        accent: 'var(--semantic-colors-light-foreground-fg-accent-violet)',
-        subtle: 'var(--semantic-colors-light-background-bg-badge-accent-brand-violet)',
+        accent: 'var(--color-foreground-fg-accent-violet)',
+        subtle: 'var(--color-background-bg-badge-accent-brand-violet)',
     },
     [CheckIconColor.Green]: {
-        accent: 'var(--colors-light-foreground-fg-success)',
-        subtle: 'var(--semantic-colors-light-background-bg-badge-accent-success)',
+        accent: 'var(--color-foreground-fg-success)',
+        subtle: 'var(--color-background-bg-badge-accent-success)',
     },
 };
 const SIZE_MAP = {

package/dist/stories/UI/CheckIcon.stories.js

@@ -43,6 +43,6 @@ export const AllVariants = {
     render: () => (_jsx(Box, { display: "flex", flexDirection: "column", gap: 3, children: Object.values(CheckIconType).map((type) => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 1, children: [_jsx("span", { style: {
                         fontFamily: 'Figtree, sans-serif',
                         fontSize: 12,
-                        color: 'var(--colors-light-text-text-subtle)',
+                        color: 'var(--color-text-text-subtle)',
                     }, children: type }), Object.values(CheckIconColor).map((color) => (_jsx(Box, { display: "flex", alignItems: "center", gap: 2, children: Object.values(CheckIconSize).map((size) => (_jsx(CheckIcon, { color: color, type: type, size: size }, `${color}-${type}-${size}`))) }, color)))] }, type))) })),
 };

package/dist/stories/UI/FeatureBanner.js

@@ -13,7 +13,7 @@ export const FeatureBanner = ({ title, description, actions = [], media = Featur
             : ButtonHierarchy.SecondaryColor, onClick: action.onClick, style: action.primary
             ? undefined
             : {
-                border: '1px solid var(--colors-light-border-border-component)',
+                border: '1px solid var(--color-border-border-component)',
             }, testId: testId ? `${testId}-action-${index}` : undefined }, `${action.text}-${index}`));
     const renderMedia = () => {
         if (media === FeatureBannerMedia.None || !mediaImage)
@@ -30,5 +30,5 @@ export const FeatureBanner = ({ title, description, actions = [], media = Featur
             background: bannerBackground,
             boxSizing: 'border-box',
             ...customStyle,
-        }, "data-testid": testId, children: [_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-xl)", flex: 1, minWidth: 0, children: [_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", children: [title && (_jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.Bold, color: "var(--colors-light-text-text-title)", children: title })), description && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--colors-light-text-text-label)", children: description }))] }), actions.length > 0 && (_jsx(Box, { display: "flex", alignItems: "center", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", children: actions.map(renderAction) }))] }), renderMedia()] }));
+        }, "data-testid": testId, children: [_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-xl)", flex: 1, minWidth: 0, children: [_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", children: [title && (_jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.Bold, color: "var(--color-text-text-title)", children: title })), description && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--color-text-text-label)", children: description }))] }), actions.length > 0 && (_jsx(Box, { display: "flex", alignItems: "center", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", children: actions.map(renderAction) }))] }), renderMedia()] }));
 };

package/dist/stories/UI/HintBubble.js

@@ -21,8 +21,8 @@ export const HintBubble = ({ text, size = HintBubbleSize.md, type = HintBubbleTy
     };
     const getTypographyColor = () => {
         if (type === HintBubbleType.Error)
-            return 'var(--colors-light-text-text-error)';
-        return 'var(--colors-light-text-text-title)';
+            return 'var(--color-text-text-error)';
+        return 'var(--color-text-text-title)';
     };
-    return (_jsx(Box, { borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', bgcolor: 'var(--colors-light-background-bg-card-highlight)', padding: getPadding(), gap: '10px', sx: style, children: _jsx(Typography, { size: getTypographySize(), weight: getTypographyWeight(), color: getTypographyColor(), children: text }) }));
+    return (_jsx(Box, { borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', bgcolor: 'var(--color-background-bg-card-highlight)', padding: getPadding(), gap: '10px', sx: style, children: _jsx(Typography, { size: getTypographySize(), weight: getTypographyWeight(), color: getTypographyColor(), children: text }) }));
 };

package/dist/stories/UI/Logo.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { LogoVariant } from './types';
-export const Logo = ({ variant = LogoVariant.Horizontal, color = 'var(--colors-light-background-bg-brand)', gradient, className = '', svgUrl, }) => {
+export const Logo = ({ variant = LogoVariant.Horizontal, color = 'var(--color-background-bg-brand-primary)', gradient, className = '', svgUrl, }) => {
     const logoColor = gradient ? 'url(#gradient)' : color;
     if (svgUrl) {
         const maxDimensions = {

package/dist/stories/UI/Logo.stories.js

@@ -48,7 +48,7 @@ export const Icon = {
 export const CustomColor = {
     args: {
         variant: LogoVariant.Horizontal,
-        color: 'var(--colors-light-foreground-fg-success)',
+        color: 'var(--color-foreground-fg-success)',
     },
 };
 export const WithGradient = {

package/dist/stories/UI/Menu.js

@@ -21,8 +21,8 @@ export const Menu = ({ icon = 'DotsThree', items, style, testKey, size = ButtonS
     };
     const getColor = (action) => {
         if (action?.destructive)
-            return 'var(--colors-light-text-text-error)';
-        return 'var(--colors-light-text-text-title)';
+            return 'var(--color-text-text-error)';
+        return 'var(--color-text-text-title)';
     };
     return (_jsxs(Fragment, { children: [_jsx(MainButton, { displayIcon: icon, onClick: handleClick, type: ButtonType.Button, displayIconMode: ButtonDisplayMode.Only, hierarchy: hierarchy, size: size, style: style, testId: `${testKey}-menu-button` }), _jsx(MuiMenu, { id: "basic-menu", "data-testid": `${testKey}-menu`, anchorEl: anchorEl, open: open, onClose: handleClose, MenuListProps: {
                     'aria-labelledby': 'basic-button',
@@ -33,12 +33,19 @@ export const Menu = ({ icon = 'DotsThree', items, style, testKey, size = ButtonS
                     paper: {
                         style: {
                             borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)',
+                            backgroundColor: 'var(--color-background-bg-component)',
+                            border: '1px solid var(--color-border-border-component)',
                         },
                     },
                     root: { style: { gap: '4px' } },
                 }, children: items?.map((action, index) => {
                     if (action) {
-                        return (_jsxs(MuiMenuItem, { onClick: (e) => handleMenuItemClick(action, e), sx: { gap: '8px' }, disableRipple: true, "data-testid": `${testKey}-menu-item-${index}`, children: [action?.icon &&
+                        return (_jsxs(MuiMenuItem, { onClick: (e) => handleMenuItemClick(action, e), sx: {
+                                gap: '8px',
+                                '&:hover': {
+                                    backgroundColor: 'var(--color-background-bg-component-hover)',
+                                },
+                            }, disableRipple: true, "data-testid": `${testKey}-menu-item-${index}`, children: [action?.icon &&
                                     getIconComponent(action.icon, {
                                         width: '20px',
                                         height: '20px',

package/dist/stories/UI/ProgressIndicator.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ProgressIndicatorMode } from './types';
 import { Box } from '@mui/material';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
-export const ProgressIndicator = ({ mode = ProgressIndicatorMode.Value, overriddenText = null, currentValue = 40, maxValue = 100, fillColor = 'var(--colors-light-background-bg-brand)', backgroundColor = 'var(--colors-light-background-bg-white)', text = 'used', textColor = 'var(--colors-light-text-text-primary)', style, textStyle, testId, }) => {
+export const ProgressIndicator = ({ mode = ProgressIndicatorMode.Value, overriddenText = null, currentValue = 40, maxValue = 100, fillColor = 'var(--color-background-bg-brand-primary)', backgroundColor = 'var(--color-background-bg-component)', text = 'used', textColor = 'var(--color-text-text-title)', style, textStyle, testId, }) => {
     let errorText = '';
     const calculateFill = () => {
         if (currentValue > maxValue)

package/dist/stories/UI/PromoBanner.js

@@ -24,8 +24,11 @@ export const PromoBanner = ({ title = 'Real-time AI avatars for every conversati
             return null;
         return (_jsx(Box, { component: "img", src: image, alt: "", height: "100%", flexShrink: 0, sx: { objectFit: 'contain' } }));
     };
-    return (_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "center", gap: "40px", height: "220px", width: "100%", overflow: "hidden", borderRadius: "var(--spacing-tokens-size-in-px-radius-radius-lg)", paddingX: "var(--spacing-tokens-size-in-px-spacing-spacing-2xl)", sx: { background, boxSizing: 'border-box', ...customStyle }, "data-testid": testId, children: [renderSideImage(leftImage), _jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-2xl)", flex: 1, minWidth: 0, paddingY: "var(--spacing-tokens-size-in-px-spacing-spacing-3xl)", children: [_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", width: "100%", children: [title && (_jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.Bold, color: "var(--colors-light-text-text-title)", textStyle: { textAlign: 'center' }, children: title })), (description || featuresText) && (_jsxs(Box, { display: "flex", flexDirection: "column", children: [description && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--colors-light-text-text-title)", children: description })), featuresText && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Bold, color: "var(--colors-light-text-text-title)", children: featuresText }))] }))] }), (promoCode || ctaText) && (_jsxs(Box, { display: "flex", justifyContent: "center", alignItems: "stretch", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", children: [promoCode && (_jsxs(Box, { position: "relative", display: "flex", children: [_jsx(MainButton, { text: promoCode, size: ButtonSize.md, hierarchy: ButtonHierarchy.SecondaryColor, showTrailingIcon: true, trailingIcon: "Copy", onClick: handleCopyPromoCode, style: {
-                                            border: '1px dashed var(--colors-light-border-border-component)',
+    return (_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "center", gap: "40px", height: "220px", width: "100%", overflow: "hidden", borderRadius: "var(--spacing-tokens-size-in-px-radius-radius-lg)", paddingX: "var(--spacing-tokens-size-in-px-spacing-spacing-2xl)", sx: { background, boxSizing: 'border-box', ...customStyle }, "data-testid": testId, children: [renderSideImage(leftImage), _jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-2xl)", flex: 1, minWidth: 0, paddingY: "var(--spacing-tokens-size-in-px-spacing-spacing-3xl)", children: [_jsxs(Box, { display: "flex", flexDirection: "column", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", width: "100%", children: [title && (_jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.Bold, color: "var(--color-text-text-title)", textStyle: { textAlign: 'center' }, children: title })), (description || featuresText) && (_jsxs(Box, { display: "flex", flexDirection: "column", children: [description && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--color-text-text-title)", children: description })), featuresText && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Bold, color: "var(--color-text-text-title)", children: featuresText }))] }))] }), (promoCode || ctaText) && (_jsxs(Box, { display: "flex", justifyContent: "center", alignItems: "stretch", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-md)", children: [promoCode && (_jsxs(Box, { position: "relative", display: "flex", children: [_jsx(MainButton, { text: promoCode, size: ButtonSize.md, hierarchy: ButtonHierarchy.SecondaryColor, showTrailingIcon: true, trailingIcon: "Copy", onClick: handleCopyPromoCode, style: {
+                                            border: '1px dashed var(--color-border-border-component)',
                                             height: '100%',
-                                        }, testId: testId ? `${testId}-promo-code` : undefined }), promoCodeLabel && (_jsx(Box, { position: "absolute", top: "-13px", left: "-8px", bgcolor: "var(--primitives-desktop-primary-brand-violet-400)", borderRadius: "var(--spacing-tokens-size-in-px-radius-radius-xs)", padding: "var(--spacing-tokens-size-in-px-spacing-spacing-xxs) var(--spacing-tokens-size-in-px-spacing-spacing-sm)", whiteSpace: "nowrap", zIndex: 1, children: _jsx(Typography, { size: TypographySize.Text2XS, weight: TypographyWeight.SemiBold, color: "var(--colors-light-text-text-title)", children: promoCodeLabel }) }))] })), ctaText && (_jsx(MainButton, { text: ctaText, size: ButtonSize.md, hierarchy: ButtonHierarchy.Primary, onClick: onCtaClick, testId: testId ? `${testId}-cta` : undefined }))] })), footerText && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--colors-light-text-text-title)", textStyle: { width: '100%' }, children: footerText }))] }), renderSideImage(rightImage)] }));
+                                        }, testId: testId ? `${testId}-promo-code` : undefined }), promoCodeLabel && (_jsx(Box, { position: "absolute", top: "-13px", left: "-8px", bgcolor: "var(--color-background-bg-icon-badge)", borderRadius: "var(--spacing-tokens-size-in-px-radius-radius-xs)", padding: "var(--spacing-tokens-size-in-px-spacing-spacing-xxs) var(--spacing-tokens-size-in-px-spacing-spacing-sm)", whiteSpace: "nowrap", zIndex: 1, children: _jsx(Typography, { size: TypographySize.Text2XS, weight: TypographyWeight.SemiBold, 
+                                            // Invariant violet label (bg-icon-badge) -> pin to the
+                                            // invariant dark text so it stays legible in both themes.
+                                            color: "var(--color-text-text-dark)", children: promoCodeLabel }) }))] })), ctaText && (_jsx(MainButton, { text: ctaText, size: ButtonSize.md, hierarchy: ButtonHierarchy.Primary, onClick: onCtaClick, testId: testId ? `${testId}-cta` : undefined }))] })), footerText && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--color-text-text-title)", textStyle: { width: '100%' }, children: footerText }))] }), renderSideImage(rightImage)] }));
 };

package/dist/stories/UI/SkeletonLoader.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 export const SkeletonLoader = ({ width = '100%', height = '100%', borderRadius = 'var(--spacing-tokens-size-in-px-spacing-sm)', animationDuration = 1.5, style, }) => {
     return (_jsx(Box, { width: width, height: height, borderRadius: borderRadius, sx: {
-            background: 'linear-gradient(90deg, var(--colors-light-background-bg-element) 25%, var(--colors-light-background-bg-component) 50%, var(--colors-light-background-bg-element) 75%)',
+            background: 'linear-gradient(90deg, var(--color-background-bg-element) 25%, var(--color-background-bg-component) 50%, var(--color-background-bg-element) 75%)',
             backgroundSize: '200% 100%',
             animation: `shimmer ${animationDuration}s infinite linear`,
             ...style,

package/dist/stories/UI/Stepper.js

@@ -12,23 +12,23 @@ const Step = ({ currentStep, totalSteps, index, title, onClick, connectorWidth =
     const isCompleted = currentStep > thisStep;
     const getTextColor = () => {
         if (isDisabled)
-            return 'var(--colors-light-text-text-paragraph)';
+            return 'var(--color-text-text-paragraph)';
         else if (isCurrent)
-            return 'var(--colors-light-text-text-clicable)';
+            return 'var(--color-text-text-clicable)';
         else if (isCompleted)
-            return 'var(--colors-light-text-text-title)';
+            return 'var(--color-text-text-title)';
         else
-            return 'var(--colors-light-text-text-paragraph)';
+            return 'var(--color-text-text-paragraph)';
     };
     const getIconColor = () => {
         if (isDisabled)
-            return 'var(--colors-light-foreground-fg-disabled)';
+            return 'var(--color-foreground-fg-disabled)';
         else if (isCurrent)
-            return 'var(--colors-light-background-bg-brand)';
+            return 'var(--color-background-bg-brand-primary)';
         else if (isCompleted)
-            return 'var(--colors-light-background-bg-brand)';
+            return 'var(--color-background-bg-brand-primary)';
         else
-            return 'var(--colors-light-foreground-fg-secondary)';
+            return 'var(--color-foreground-fg-secondary)';
     };
     const IconComponent = getIconComponent('CheckCircle', {
         size: '24px',
@@ -42,17 +42,17 @@ const Step = ({ currentStep, totalSteps, index, title, onClick, connectorWidth =
             if (thisStep === 1)
                 return 'transparent';
             else if (thisStep <= currentStep)
-                return 'var(--colors-light-background-bg-brand)';
+                return 'var(--color-background-bg-brand-primary)';
             else
-                return 'var(--colors-light-foreground-fg-disabled)';
+                return 'var(--color-foreground-fg-disabled)';
         }
         else if (position === 'right') {
             if (thisStep === totalSteps)
                 return 'transparent';
             else if (thisStep < currentStep)
-                return 'var(--colors-light-background-bg-brand)';
+                return 'var(--color-background-bg-brand-primary)';
             else
-                return 'var(--colors-light-foreground-fg-disabled)';
+                return 'var(--color-foreground-fg-disabled)';
         }
     };
     return (_jsxs(Box, { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', onClick: onClick ? () => onClick() : undefined, sx: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@beydesign/storybook",
   "private": false,
-  "version": "0.1.21",
+  "version": "0.2.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -25,7 +25,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@beydesign/tokens": "^0.0.16",
+    "@beydesign/tokens": "^0.1.1",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@fortawesome/fontawesome-svg-core": "^6.7.2",