@beydesign/storybook 0.1.21 → 0.2.0

package/dist/stories/Form/Dropdown.js

@@ -112,14 +112,14 @@ export const Dropdown = ({ disabled = false, placeholder = 'Select an option', l
         return Array.isArray(props.value) && props.value.includes(option);
     };
     return (_jsx(ClickAwayListener, { onClickAway: () => setOpen(false), children: _jsxs(Box, { display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', position: 'relative', width: "100%", minWidth: '300px', children: [label && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, textStyle: { textAlign: 'left' }, required: required, children: label })), _jsxs(Box, { ref: anchorRef, display: 'flex', flexDirection: 'row', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', alignItems: 'center', justifyContent: 'space-between', border: `1px solid ${open
-                        ? 'var(--colors-light-border-border-component-active)'
-                        : 'var(--colors-light-border-border-component)'}`, borderRadius: '4px', bgcolor: disabled
-                        ? 'var(--primitives-desktop-primary-gray-25)'
-                        : 'var(--primitives-desktop-primary-white-100)', position: 'relative', onClick: () => !disabled && setOpen((prev) => !prev), onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, "aria-haspopup": "listbox", "aria-expanded": open, "aria-disabled": disabled, role: "combobox", children: [_jsx(Box, { display: "flex", alignItems: "center", flexShrink: 0, children: showLeadingIcon &&
+                        ? 'var(--color-border-border-component-active)'
+                        : 'var(--color-border-border-component)'}`, borderRadius: '4px', bgcolor: disabled
+                        ? 'var(--color-background-bg-component-disabled)'
+                        : 'var(--color-background-bg-component)', position: 'relative', onClick: () => !disabled && setOpen((prev) => !prev), onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, "aria-haspopup": "listbox", "aria-expanded": open, "aria-disabled": disabled, role: "combobox", children: [_jsx(Box, { display: "flex", alignItems: "center", flexShrink: 0, children: showLeadingIcon &&
                                 getIconComponent(leadingIcon, {
                                     width: '24px',
                                     height: '24px',
-                                    color: 'var(--colors-light-foreground-fg-secondary)',
+                                    color: 'var(--color-foreground-fg-secondary)',
                                     'aria-hidden': 'true',
                                 }) }), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, textStyle: {
                                 flexGrow: 1,
@@ -130,14 +130,14 @@ export const Dropdown = ({ disabled = false, placeholder = 'Select an option', l
                                 whiteSpace: 'nowrap',
                                 maxWidth: '100%',
                             }, color: value
-                                ? 'var(--colors-light-text-text-title)'
-                                : 'var(--colors-light-text-text-placeholder)', children: value || placeholder }), _jsxs(Box, { display: "flex", alignItems: "center", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-sm)", flexShrink: 0, children: [!disabled &&
+                                ? 'var(--color-text-text-title)'
+                                : 'var(--color-text-text-placeholder)', children: value || placeholder }), _jsxs(Box, { display: "flex", alignItems: "center", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-sm)", flexShrink: 0, children: [!disabled &&
                                     showClear &&
                                     value &&
                                     getIconComponent('X', {
                                         width: '24px',
                                         height: '24px',
-                                        color: 'var(--colors-light-foreground-fg-secondary)',
+                                        color: 'var(--color-foreground-fg-secondary)',
                                         onClick: handleClear,
                                         'aria-label': 'Clear selection',
                                         role: 'button',
@@ -152,23 +152,23 @@ export const Dropdown = ({ disabled = false, placeholder = 'Select an option', l
                                     getIconComponent(open ? 'CaretUp' : 'CaretDown', {
                                         width: '24px',
                                         height: '24px',
-                                        color: 'var(--colors-light-foreground-fg-secondary)',
+                                        color: 'var(--color-foreground-fg-secondary)',
                                         'aria-hidden': 'true',
-                                    })] })] }), _jsx(Popper, { open: open, anchorEl: anchorRef.current, placement: "bottom-start", style: { width: anchorRef.current?.offsetWidth, zIndex: 1300 }, children: _jsx(Box, { ref: optionsContainerRef, bgcolor: 'var(--primitives-desktop-primary-white-100)', borderRadius: '4px', width: '100%', maxHeight: '200px', overflow: 'auto', boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)', mt: '4px', role: "listbox", sx: {
-                            border: '1px solid var(--colors-light-border-border-component)',
+                                    })] })] }), _jsx(Popper, { open: open, anchorEl: anchorRef.current, placement: "bottom-start", style: { width: anchorRef.current?.offsetWidth, zIndex: 1300 }, children: _jsx(Box, { ref: optionsContainerRef, bgcolor: 'var(--color-background-bg-component)', borderRadius: '4px', width: '100%', maxHeight: '200px', overflow: 'auto', boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)', mt: '4px', role: "listbox", sx: {
+                            border: '1px solid var(--color-border-border-component)',
                         }, children: options.length === 0 ? (_jsx(Box, { display: 'flex', flexDirection: 'row', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, children: "No options found" }) })) : (options.map((option, index) => (_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', onClick: () => handleOptionSelect(option), onMouseEnter: () => setHighlightedIndex(index), sx: {
                                 cursor: 'pointer',
                                 backgroundColor: highlightedIndex === index
-                                    ? 'var(--primitives-desktop-primary-gray-25)'
+                                    ? 'var(--color-background-bg-page)'
                                     : isOptionSelected(option)
-                                        ? 'var(--primitives-desktop-primary-gray-10)'
+                                        ? 'var(--color-background-bg-element)'
                                         : 'transparent',
                                 '&:hover': {
-                                    backgroundColor: 'var(--colors-light-background-bg-card-highlight)',
+                                    backgroundColor: 'var(--color-background-bg-card-highlight)',
                                 },
                                 width: '100%',
                                 boxSizing: 'border-box',
-                            }, role: "option", "aria-selected": isOptionSelected(option), children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', width: "calc(100% - 24px)", overflow: "hidden", children: [showCheckboxes && (_jsx(Box, { flexShrink: 0, children: _jsx(Checkbox, { checked: isOptionSelected(option), onChange: () => handleOptionSelect(option), style: { margin: 0, padding: 0 } }) })), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: "var(--colors-light-text-text-title)", textStyle: {
+                            }, role: "option", "aria-selected": isOptionSelected(option), children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', width: "calc(100% - 24px)", overflow: "hidden", children: [showCheckboxes && (_jsx(Box, { flexShrink: 0, children: _jsx(Checkbox, { checked: isOptionSelected(option), onChange: () => handleOptionSelect(option), style: { margin: 0, padding: 0 } }) })), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: "var(--color-text-text-title)", textStyle: {
                                                 overflow: 'hidden',
                                                 textOverflow: 'ellipsis',
                                                 whiteSpace: 'nowrap',
@@ -178,6 +178,6 @@ export const Dropdown = ({ disabled = false, placeholder = 'Select an option', l
                                         getIconComponent('Check', {
                                             width: '16px',
                                             height: '16px',
-                                            color: 'var(--colors-light-foreground-fg-brand-primary)',
+                                            color: 'var(--color-foreground-fg-brand-primary)',
                                         }) })] }, option)))) }) })] }) }));
 };

package/dist/stories/Form/FileUpload/FileUpload.js

@@ -107,22 +107,22 @@ export const FileUpload = ({ disabled, sx, acceptedFileTypes = '.pdf,.doc,.docx,
         height: '20px',
         width: '20px',
         color: disabled
-            ? 'var(--colors-light-text-text-subtle)'
-            : 'var(--colors-light-text-text-paragraph)',
+            ? 'var(--color-text-text-subtle)'
+            : 'var(--color-text-text-paragraph)',
     };
-    return (_jsxs(Box, { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', border: `1.5px dashed ${isDragging ? 'var(--colors-light-background-bg-brand-hover)' : 'var(--colors-light-background-bg-brand)'}`, bgcolor: disabled
-            ? 'var(--colors-light-background-bg-component-contrast-subtle)'
+    return (_jsxs(Box, { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', border: `1.5px dashed ${isDragging ? 'var(--color-background-bg-brand-primary-hover)' : 'var(--color-background-bg-brand-primary)'}`, bgcolor: disabled
+            ? 'var(--color-background-bg-component-contrast-subtle)'
             : isDragging
-                ? 'var(--colors-light-background-bg-element-hover)'
-                : 'var(--colors-light-background-bg-element)', sx: { cursor: disabled ? 'not-allowed' : 'pointer', ...sx }, onClick: handleClick, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [_jsx("input", { type: "file", ref: fileInputRef, style: { display: 'none' }, accept: acceptedFileTypes, onChange: handleInputChange, disabled: disabled }), _jsx(Box, { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', border: `2px solid ${disabled
-                    ? 'var(--colors-light-border-border-component)'
+                ? 'var(--color-background-bg-component-hover)'
+                : 'var(--color-background-bg-element)', sx: { cursor: disabled ? 'not-allowed' : 'pointer', ...sx }, onClick: handleClick, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, children: [_jsx("input", { type: "file", ref: fileInputRef, style: { display: 'none' }, accept: acceptedFileTypes, onChange: handleInputChange, disabled: disabled }), _jsx(Box, { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', border: `2px solid ${disabled
+                    ? 'var(--color-border-border-component)'
                     : isDragging
-                        ? 'var(--colors-light-background-bg-brand-hover)'
-                        : 'var(--colors-light-background-bg-brand)'}`, borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', bgcolor: 'var(--primitives-desktop-primary-white-100)', children: _jsx(UploadSimple, { height: '20px', width: '20px', weight: "bold", color: disabled
-                        ? 'var(--colors-light-foreground-fg-disabled)'
-                        : 'var(--colors-light-foreground-fg-brand-primary)' }) }), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', children: [_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: disabled
-                            ? 'var(--colors-light-text-text-disabled)'
-                            : 'var(--colors-light-text-text-accent)', textStyle: { cursor: disabled ? 'not-allowed' : 'pointer' }, children: "Click to upload" }), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: disabled
-                            ? 'var(--colors-light-text-text-subtle)'
-                            : 'var(--colors-light-text-text-paragraph)', children: "or drag and drop" }), _jsxs(Box, { display: 'flex', flexDirection: 'row', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', children: [fileIcons.map((Icon, index) => (_jsx(Icon, { ...iconProps }, index))), fileIcons.length === 0 && _jsx(FileCode, { ...iconProps })] })] })] }));
+                        ? 'var(--color-background-bg-brand-primary-hover)'
+                        : 'var(--color-background-bg-brand-primary)'}`, borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', bgcolor: 'var(--color-background-bg-component)', children: _jsx(UploadSimple, { height: '20px', width: '20px', weight: "bold", color: disabled
+                        ? 'var(--color-foreground-fg-disabled)'
+                        : 'var(--color-foreground-fg-brand-primary)' }) }), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', children: [_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.SemiBold, color: disabled
+                            ? 'var(--color-text-text-disabled)'
+                            : 'var(--color-text-text-accent)', textStyle: { cursor: disabled ? 'not-allowed' : 'pointer' }, children: "Click to upload" }), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: disabled
+                            ? 'var(--color-text-text-subtle)'
+                            : 'var(--color-text-text-paragraph)', children: "or drag and drop" }), _jsxs(Box, { display: 'flex', flexDirection: 'row', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', children: [fileIcons.map((Icon, index) => (_jsx(Icon, { ...iconProps }, index))), fileIcons.length === 0 && _jsx(FileCode, { ...iconProps })] })] })] }));
 };

package/dist/stories/Form/FileUpload/FileUploading.js

@@ -23,27 +23,27 @@ export const FileUploading = ({ uploadProgress, uploadingStatus, progressMode =
             return 'FileTxt';
         return 'File';
     };
-    return (_jsxs(Box, { display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', border: `1px solid ${isError ? 'var(--colors-light-border-border-error)' : 'var(--colors-light-border-border-component)'}`, bgcolor: 'var(--colors-light-background-bg-component-contrast-subtle)', minWidth: '300px', sx: { ...sx }, children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [getIconComponent(getFileIcon(), {
+    return (_jsxs(Box, { display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-xl)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', border: `1px solid ${isError ? 'var(--color-border-border-error)' : 'var(--color-border-border-component)'}`, bgcolor: 'var(--color-background-bg-component-contrast-subtle)', minWidth: '300px', sx: { ...sx }, children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [getIconComponent(getFileIcon(), {
                                 width: '24px',
                                 height: '24px',
                                 color: isError
-                                    ? 'var(--colors-light-text-text-error)'
-                                    : 'var(--colors-light-foreground-fg-primary)',
+                                    ? 'var(--color-text-text-error)'
+                                    : 'var(--color-foreground-fg-primary)',
                             }), _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Regular, color: isError
-                                    ? 'var(--colors-light-text-text-error)'
-                                    : 'var(--primitives-desktop-primary-gray-950)', children: fileName })] }), _jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [showCancel &&
+                                    ? 'var(--color-text-text-error)'
+                                    : 'var(--color-text-text-title)', children: fileName })] }), _jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [showCancel &&
                                 onCancel &&
                                 isUploading &&
                                 getIconComponent('X', {
                                     width: '24px',
                                     height: '24px',
-                                    color: 'var(--colors-light-text-text-title)',
+                                    color: 'var(--color-text-text-title)',
                                     onClick: onCancel,
                                     style: { cursor: 'pointer' },
                                 }), isSuccess &&
                                 getIconComponent('Check', {
                                     width: '24px',
                                     height: '24px',
-                                    color: 'var(--colors-light-foreground-fg-success)',
-                                })] })] }), _jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', width: '100%', children: [isUploading && isAnimationProgress && (_jsx(Player, { autoplay: true, loop: true, src: loadingAnimation, style: { height: '100%', width: '100%' } })), isUploading && isPercentageProgress && (_jsx(ProgressIndicator, { currentValue: uploadProgress || 0, maxValue: 100, mode: ProgressIndicatorMode.Percentage, style: { width: '100%', height: '100%' } })), isError && (_jsxs(Fragment, { children: [_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-error)', children: "Upload failed, please try again." }), showRetry && onRetry && (_jsx(Box, { onClick: onRetry, style: { cursor: 'pointer' }, children: _jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.SemiBold, color: 'var(--colors-light-text-text-error)', children: "Try again" }) }))] }))] })] }));
+                                    color: 'var(--color-foreground-fg-success)',
+                                })] })] }), _jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', width: '100%', children: [isUploading && isAnimationProgress && (_jsx(Player, { autoplay: true, loop: true, src: loadingAnimation, style: { height: '100%', width: '100%' } })), isUploading && isPercentageProgress && (_jsx(ProgressIndicator, { currentValue: uploadProgress || 0, maxValue: 100, mode: ProgressIndicatorMode.Percentage, style: { width: '100%', height: '100%' } })), isError && (_jsxs(Fragment, { children: [_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-error)', children: "Upload failed, please try again." }), showRetry && onRetry && (_jsx(Box, { onClick: onRetry, style: { cursor: 'pointer' }, children: _jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.SemiBold, color: 'var(--color-text-text-error)', children: "Try again" }) }))] }))] })] }));
 };

package/dist/stories/Form/FileUpload/UploadedFile.js

@@ -7,6 +7,6 @@ import { ButtonDisplayMode, ButtonHierarchy, ButtonSize, MainButton, } from '../
 export const UploadedFile = ({ type = FileType.Default, showDelete = true, onDelete, showDownload = true, onDownload, fileName, sx, }) => {
     const isSampleFile = type === FileType.Sample;
     return (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', paddingLeft: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', bgcolor: isSampleFile
-            ? 'var(--colors-light-background-bg-card-highlight)'
-            : 'var(--colors-light-background-bg-component-contrast-subtle)', minWidth: '240px', minHeight: '36px', sx: { ...sx }, children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(File, { width: '24px', height: '24px', color: 'var(--colors-light-foreground-fg-primary)' }), _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: 'var(--colors-light-foreground-fg-primary)', children: fileName })] }), _jsxs(Box, { display: 'flex', flexDirection: 'row', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [showDownload && onDownload && (_jsx(MainButton, { hierarchy: ButtonHierarchy.Secondary, size: ButtonSize.xs, displayIconMode: ButtonDisplayMode.Only, displayIcon: "DownloadSimple", onClick: onDownload })), showDelete && onDelete && (_jsx(MainButton, { hierarchy: ButtonHierarchy.Secondary, size: ButtonSize.xs, displayIconMode: ButtonDisplayMode.Only, displayIcon: "X", onClick: onDelete }))] })] }));
+            ? 'var(--color-background-bg-card-highlight)'
+            : 'var(--color-background-bg-component-contrast-subtle)', minWidth: '240px', minHeight: '36px', sx: { ...sx }, children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(File, { width: '24px', height: '24px', color: 'var(--color-foreground-fg-primary)' }), _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: 'var(--color-foreground-fg-primary)', children: fileName })] }), _jsxs(Box, { display: 'flex', flexDirection: 'row', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [showDownload && onDownload && (_jsx(MainButton, { hierarchy: ButtonHierarchy.Secondary, size: ButtonSize.xs, displayIconMode: ButtonDisplayMode.Only, displayIcon: "DownloadSimple", onClick: onDownload })), showDelete && onDelete && (_jsx(MainButton, { hierarchy: ButtonHierarchy.Secondary, size: ButtonSize.xs, displayIconMode: ButtonDisplayMode.Only, displayIcon: "X", onClick: onDelete }))] })] }));
 };

package/dist/stories/Form/TextArea.js

@@ -5,19 +5,19 @@ import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { HintBubble, HintBubbleSize } from '../UI';
 export const TextArea = ({ label, value, onChange, placeholder, hintText, errorText, disabled, allowMaxLength = false, maxLength = 256, showMaxLengthIndicator = false, numberOfRows = 5, style, hintBubbleProps, hintBubbleText, required, labelTrailingElement, labelContainerStyle, }) => {
     const [focused, setFocused] = useState(false);
-    return (_jsx(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: style, children: _jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', minWidth: '260px', children: [label && (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: labelContainerStyle, children: [_jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, required: required, children: label }), labelTrailingElement] })), hintBubbleText && (_jsx(HintBubble, { text: hintBubbleText, size: HintBubbleSize.sm, ...hintBubbleProps })), _jsx(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', bgcolor: 'var(--colors-light-background-bg-component)', border: `1px solid ${errorText
-                        ? 'var(--colors-light-border-border-error)'
+    return (_jsx(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: style, children: _jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', minWidth: '260px', children: [label && (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: labelContainerStyle, children: [_jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, required: required, children: label }), labelTrailingElement] })), hintBubbleText && (_jsx(HintBubble, { text: hintBubbleText, size: HintBubbleSize.sm, ...hintBubbleProps })), _jsx(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', bgcolor: 'var(--color-background-bg-component)', border: `1px solid ${errorText
+                        ? 'var(--color-border-border-error)'
                         : focused
-                            ? 'var(--colors-light-border-border-component-active)'
-                            : 'var(--colors-light-border-border-component)'}`, overflow: 'hidden', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', width: '100%', children: _jsx("textarea", { value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, disabled: disabled, rows: numberOfRows, style: {
+                            ? 'var(--color-border-border-component-active)'
+                            : 'var(--color-border-border-component)'}`, overflow: 'hidden', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', width: '100%', children: _jsx("textarea", { value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, disabled: disabled, rows: numberOfRows, style: {
                             border: 'none',
                             outline: 'none',
                             width: '100%',
                             height: '100%',
                             color: disabled
-                                ? 'var(--colors-light-text-text-disabled)'
-                                : 'var(--colors-light-text-text-title)',
+                                ? 'var(--color-text-text-disabled)'
+                                : 'var(--color-text-text-title)',
                             backgroundColor: 'transparent',
                             resize: 'none',
-                        }, maxLength: allowMaxLength ? maxLength : undefined, onFocus: () => setFocused(true), onBlur: () => setFocused(false), required: required }) }), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', children: [errorText ? (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-error)', children: errorText })) : hintText ? (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-subtle)', children: hintText })) : (_jsx(Box, { style: { flex: 1 } })), showMaxLengthIndicator && allowMaxLength && maxLength && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-subtle)', children: `${maxLength - value.length}` }))] })] }) }));
+                        }, maxLength: allowMaxLength ? maxLength : undefined, onFocus: () => setFocused(true), onBlur: () => setFocused(false), required: required }) }), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', children: [errorText ? (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-error)', children: errorText })) : hintText ? (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-subtle)', children: hintText })) : (_jsx(Box, { style: { flex: 1 } })), showMaxLengthIndicator && allowMaxLength && maxLength && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-subtle)', children: `${maxLength - value.length}` }))] })] }) }));
 };

package/dist/stories/Form/TextInput.js

@@ -22,21 +22,21 @@ export const TextInput = ({ label, value, onChange, placeholder, type = 'text',
             setShowPassword((prev) => !prev);
     };
     const iconColor = disabled
-        ? 'var(--colors-light-text-text-disabled)'
-        : 'var(--colors-light-foreground-fg-secondary)';
-    return (_jsx(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: style, children: _jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', minWidth: '260px', children: [label && (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: labelContainerStyle, children: [_jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, required: required, children: label }), labelTrailingElement] })), hintBubbleText && (_jsx(HintBubble, { text: hintBubbleText, size: HintBubbleSize.sm, ...hintBubbleProps })), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', bgcolor: 'var(--colors-light-background-bg-component)', border: errorText
+        ? 'var(--color-text-text-disabled)'
+        : 'var(--color-foreground-fg-secondary)';
+    return (_jsx(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: style, children: _jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', minWidth: '260px', children: [label && (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', sx: labelContainerStyle, children: [_jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.SemiBold, required: required, children: label }), labelTrailingElement] })), hintBubbleText && (_jsx(HintBubble, { text: hintBubbleText, size: HintBubbleSize.sm, ...hintBubbleProps })), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', bgcolor: 'var(--color-background-bg-component)', border: errorText
                         ? 'none'
-                        : '1px solid var(--colors-light-border-border-component)', overflow: 'hidden', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', width: '100%', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs) 0 0 var(--spacing-tokens-size-in-px-spacing-spacing-xs)', border: `${errorText
-                                ? '1px solid var(--colors-light-border-border-error)'
+                        : '1px solid var(--color-border-border-component)', overflow: 'hidden', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', width: '100%', borderRadius: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs) 0 0 var(--spacing-tokens-size-in-px-spacing-spacing-xs)', border: `${errorText
+                                ? '1px solid var(--color-border-border-error)'
                                 : focused
-                                    ? '1px solid var(--colors-light-border-border-component-active)'
+                                    ? '1px solid var(--color-border-border-component-active)'
                                     : 'transparent'}`, children: [_jsx("input", { type: inputType, value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, disabled: disabled, style: {
                                         border: 'none',
                                         outline: 'none',
                                         width: '100%',
                                         color: disabled
-                                            ? 'var(--colors-light-text-text-disabled)'
-                                            : 'var(--colors-light-text-text-title)',
+                                            ? 'var(--color-text-text-disabled)'
+                                            : 'var(--color-text-text-title)',
                                         backgroundColor: 'transparent',
                                     }, onFocus: () => setFocused(true), onBlur: () => setFocused(false), required: required }), enablePasswordToggle && (_jsx(Box, { component: 'button', type: 'button', onClick: togglePasswordVisibility, disabled: disabled, "aria-label": showPassword ? 'Hide password' : 'Show password', "aria-pressed": showPassword, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, sx: {
                                         padding: 0,
@@ -45,7 +45,7 @@ export const TextInput = ({ label, value, onChange, placeholder, type = 'text',
                                         backgroundColor: 'transparent',
                                         cursor: disabled ? 'not-allowed' : 'pointer',
                                         '&:focus-visible': {
-                                            outline: '2px solid var(--colors-light-border-border-component-active)',
+                                            outline: '2px solid var(--color-border-border-component-active)',
                                             outlineOffset: '2px',
                                         },
                                     }, children: getIconComponent(showPassword ? 'EyeSlash' : 'Eye', {
@@ -53,5 +53,5 @@ export const TextInput = ({ label, value, onChange, placeholder, type = 'text',
                                         height: '20px',
                                         color: iconColor,
                                         'aria-hidden': 'true',
-                                    }) }))] }), trailingText && (_jsx(Box, { display: 'flex', alignItems: 'center', height: '100%', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', borderLeft: '1px solid var(--colors-light-border-border-component)', children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-paragraph)', children: trailingText }) }))] }), errorText && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-error)', children: errorText })), hintText && !errorText && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--colors-light-text-text-subtle)', children: hintText }))] }) }));
+                                    }) }))] }), trailingText && (_jsx(Box, { display: 'flex', alignItems: 'center', height: '100%', padding: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', borderLeft: '1px solid var(--color-border-border-component)', children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-paragraph)', children: trailingText }) }))] }), errorText && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-error)', children: errorText })), hintText && !errorText && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-subtle)', children: hintText }))] }) }));
 };

package/dist/stories/Form/Toggle.js

@@ -30,7 +30,7 @@ const IOSSwitch = styled((props) => (_jsx(Switch, { focusVisibleClassName: ".Mui
             color: theme.palette.grey[100],
         },
         '&.Mui-disabled + .MuiSwitch-track': {
-            backgroundColor: 'var(--primitives-desktop-primary-gray-50)',
+            backgroundColor: 'var(--color-background-bg-element)',
             opacity: 0.7,
         },
     },
@@ -38,20 +38,20 @@ const IOSSwitch = styled((props) => (_jsx(Switch, { focusVisibleClassName: ".Mui
         boxSizing: 'border-box',
         width: 16,
         height: 16,
-        backgroundColor: 'var(--colors-light-foreground-fg-white)',
+        backgroundColor: 'var(--color-foreground-fg-white)',
     },
     '& .MuiSwitch-track': {
         borderRadius: 26 / 2,
-        backgroundColor: 'var(--primitives-desktop-primary-gray-100)',
+        backgroundColor: 'var(--color-background-bg-element)',
         opacity: 1,
         transition: theme.transitions.create(['background-color'], {
             duration: 500,
         }),
         '&:hover': {
-            backgroundColor: 'var(--primitives-desktop-primary-gray-200)',
+            backgroundColor: 'var(--color-border-border-component)',
         },
     },
 }));
-export const Toggle = ({ checked, onChange, text = 'Click me', title, disabled = false, togglePosition = TogglePosition.Left, style, textColor = 'var(--colors-light-text-text-title)', titleColor = '#475467', }) => {
+export const Toggle = ({ checked, onChange, text = 'Click me', title, disabled = false, togglePosition = TogglePosition.Left, style, textColor = 'var(--color-text-text-title)', titleColor = '#475467', }) => {
     return (_jsxs(Box, { display: "flex", alignItems: "flex-start", flexDirection: togglePosition === TogglePosition.Left ? 'row' : 'row-reverse', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', sx: style, children: [_jsx(IOSSwitch, { checked: checked, onChange: (e) => onChange(e.target.checked), disabled: disabled }), text && (_jsxs(Box, { display: "flex", flexDirection: "column", children: [_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: textColor, children: text }), title && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: titleColor, children: title }))] }))] }));
 };

package/dist/stories/Form/Toggle.stories.js

@@ -73,7 +73,7 @@ export const Default = {
         title: 'This is a toggle',
         disabled: false,
         togglePosition: TogglePosition.Right,
-        textColor: 'var(--colors-light-text-text-title)',
+        textColor: 'var(--color-text-text-title)',
         titleColor: '#475467',
     },
 };

package/dist/stories/Foundations/Colors.js

@@ -34,15 +34,15 @@ const ColorSwatch = ({ name, value }) => {
     return (_jsxs("div", { className: styles.swatch, children: [_jsx("div", { className: styles.color, style: {
                     background: isGradient ? displayValue : value,
                     backgroundSize: 'cover',
-                } }), _jsxs("div", { className: styles.details, children: [_jsxs("div", { className: styles.name, style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-label)", children: name }), _jsx(Copy, { size: 16, onClick: handleCopyName, style: {
+                } }), _jsxs("div", { className: styles.details, children: [_jsxs("div", { className: styles.name, style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--color-text-text-label)", children: name }), _jsx(Copy, { size: 16, onClick: handleCopyName, style: {
                                     cursor: 'pointer',
-                                    color: 'var(--colors-light-text-text-subtle)',
-                                } }), copiedName && (_jsx("div", { className: `${styles.copyIndicator} ${styles.visible}`, children: "Copied!" }))] }), _jsxs("div", { className: styles.value, style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--colors-light-text-text-subtle)", children: displayValue }), _jsx(Copy, { size: 16, onClick: handleCopyValue, style: {
+                                    color: 'var(--color-text-text-subtle)',
+                                } }), copiedName && (_jsx("div", { className: `${styles.copyIndicator} ${styles.visible}`, children: "Copied!" }))] }), _jsxs("div", { className: styles.value, style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--color-text-text-subtle)", children: displayValue }), _jsx(Copy, { size: 16, onClick: handleCopyValue, style: {
                                     cursor: 'pointer',
-                                    color: 'var(--colors-light-text-text-subtle)',
+                                    color: 'var(--color-text-text-subtle)',
                                 } }), copiedValue && (_jsx("div", { className: `${styles.copyIndicator} ${styles.visible}`, children: "Copied!" }))] })] })] }));
 };
-const ColorGroup = ({ title, colors }) => (_jsxs("div", { className: styles.group, children: [_jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-label)", children: title }), _jsx("div", { className: styles.swatchGrid, children: Object.entries(colors).map(([name, value]) => (_jsx(ColorSwatch, { name: name, value: value }, name))) })] }));
+const ColorGroup = ({ title, colors }) => (_jsxs("div", { className: styles.group, children: [_jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--color-text-text-label)", children: title }), _jsx("div", { className: styles.swatchGrid, children: Object.entries(colors).map(([name, value]) => (_jsx(ColorSwatch, { name: name, value: value }, name))) })] }));
 export const Colors = () => {
     // Group colors by their categories
     const primitives = {
@@ -184,77 +184,75 @@ export const Colors = () => {
     };
     const semanticColors = {
         Background: {
-            '--colors-light-background-bg-brand': 'var(--colors-light-background-bg-brand)',
-            '--colors-light-background-bg-brand-hover': 'var(--colors-light-background-bg-brand-hover)',
-            '--colors-light-background-bg-brand-lemon': 'var(--colors-light-background-bg-brand-lemon)',
-            '--colors-light-background-bg-brand-lemon-hover': 'var(--colors-light-background-bg-brand-lemon-hover)',
-            '--colors-light-background-bg-error': 'var(--colors-light-background-bg-error)',
-            '--colors-light-background-bg-error-solid': 'var(--colors-light-background-bg-error-solid)',
-            '--colors-light-background-bg-error-subtle': 'var(--colors-light-background-bg-error-subtle)',
-            '--colors-light-background-bg-success': 'var(--colors-light-background-bg-success)',
-            '--colors-light-background-bg-white': 'var(--colors-light-background-bg-white)',
-            '--colors-light-background-bg-page': 'var(--colors-light-background-bg-page)',
-            '--colors-light-background-bg-page-contrast': 'var(--colors-light-background-bg-page-contrast)',
-            '--colors-light-background-bg-element': 'var(--colors-light-background-bg-element)',
-            '--colors-light-background-bg-component': 'var(--colors-light-background-bg-component)',
-            '--colors-light-background-bg-component-hover': 'var(--colors-light-background-bg-component-hover)',
-            '--colors-light-background-bg-component-disabled': 'var(--colors-light-background-bg-component-disabled)',
-            '--colors-light-background-bg-component-dark': 'var(--colors-light-background-bg-component-dark)',
-            '--colors-light-background-bg-card-highlight': 'var(--colors-light-background-bg-card-highlight)',
-            '--colors-light-background-bg-card-highlight-hover': 'var(--colors-light-background-bg-card-highlight-hover)',
-            '--colors-light-background-bg-component-contrast-subtle': 'var(--colors-light-background-bg-component-contrast-subtle)',
-            '--colors-light-background-bg-component-contrast-subtle-hover': 'var(--colors-light-background-bg-component-contrast-subtle-hover)',
-            '--colors-light-background-bg-overlay-1': 'var(--colors-light-background-bg-overlay-1)',
-            '--colors-light-background-bg-badge-accent1': 'var(--colors-light-background-bg-badge-accent1)',
-            '--colors-light-background-bg-badge-accent2': 'var(--colors-light-background-bg-badge-accent2)',
-            '--colors-light-background-bg-badge-accent3': 'var(--colors-light-background-bg-badge-accent3)',
-            '--colors-light-background-bg-badge-accent4': 'var(--colors-light-background-bg-badge-accent4)',
-            '--colors-light-background-bg-badge-accent5': 'var(--colors-light-background-bg-badge-accent5)',
-            '--colors-light-background-bg-button-disabled': 'var(--colors-light-background-bg-button-disabled)',
-            '--colors-light-background-bg-overlay-2': 'var(--colors-light-background-bg-overlay-2)',
+            '--color-background-bg-brand-primary': 'var(--color-background-bg-brand-primary)',
+            '--color-background-bg-brand-primary-hover': 'var(--color-background-bg-brand-primary-hover)',
+            '--color-background-bg-brand-secondary-hover': 'var(--color-background-bg-brand-secondary-hover)',
+            '--color-background-bg-error': 'var(--color-background-bg-error)',
+            '--color-background-bg-error-solid': 'var(--color-background-bg-error-solid)',
+            '--color-background-bg-error-subtle': 'var(--color-background-bg-error-subtle)',
+            '--color-background-bg-success': 'var(--color-background-bg-success)',
+            '--color-background-bg-white': 'var(--color-background-bg-white)',
+            '--color-background-bg-page': 'var(--color-background-bg-page)',
+            '--color-background-bg-page-contrast': 'var(--color-background-bg-page-contrast)',
+            '--color-background-bg-element': 'var(--color-background-bg-element)',
+            '--color-background-bg-component': 'var(--color-background-bg-component)',
+            '--color-background-bg-component-hover': 'var(--color-background-bg-component-hover)',
+            '--color-background-bg-component-disabled': 'var(--color-background-bg-component-disabled)',
+            '--color-background-bg-component-dark': 'var(--color-background-bg-component-dark)',
+            '--color-background-bg-card-highlight': 'var(--color-background-bg-card-highlight)',
+            '--color-background-bg-card-highlight-hover': 'var(--color-background-bg-card-highlight-hover)',
+            '--color-background-bg-component-contrast-subtle': 'var(--color-background-bg-component-contrast-subtle)',
+            '--color-background-bg-component-contrast-subtle-hover': 'var(--color-background-bg-component-contrast-subtle-hover)',
+            '--color-background-bg-overlay-1': 'var(--color-background-bg-overlay-1)',
+            '--color-background-bg-badge-accent-success': 'var(--color-background-bg-badge-accent-success)',
+            '--color-background-bg-badge-accent-brand-violet': 'var(--color-background-bg-badge-accent-brand-violet)',
+            '--color-background-bg-badge-accent-red': 'var(--color-background-bg-badge-accent-red)',
+            '--color-background-bg-badge-accent-gray': 'var(--color-background-bg-badge-accent-gray)',
+            '--color-background-bg-badge-accent-yellow': 'var(--color-background-bg-badge-accent-yellow)',
+            '--color-background-bg-button-disabled': 'var(--color-background-bg-button-disabled)',
+            '--color-background-bg-overlay-2': 'var(--color-background-bg-overlay-2)',
         },
         Border: {
-            '--colors-light-border-border-brand': 'var(--colors-light-border-border-brand)',
-            '--colors-light-border-border-brand-hover': 'var(--colors-light-border-border-brand-hover)',
-            '--colors-light-border-border-divider': 'var(--colors-light-border-border-divider)',
-            '--colors-light-border-border-component': 'var(--colors-light-border-border-component)',
-            '--colors-light-border-border-component-active': 'var(--colors-light-border-border-component-active)',
-            '--colors-light-border-border-subtle': 'var(--colors-light-border-border-subtle)',
-            '--colors-light-border-border-error': 'var(--colors-light-border-border-error)',
-            '--colors-light-border-border-white': 'var(--colors-light-border-border-white)',
+            '--color-border-border-brand': 'var(--color-border-border-brand)',
+            '--color-border-border-brand-hover': 'var(--color-border-border-brand-hover)',
+            '--color-border-border-divider': 'var(--color-border-border-divider)',
+            '--color-border-border-component': 'var(--color-border-border-component)',
+            '--color-border-border-component-active': 'var(--color-border-border-component-active)',
+            '--color-border-border-subtle': 'var(--color-border-border-subtle)',
+            '--color-border-border-error': 'var(--color-border-border-error)',
+            '--color-border-border-white': 'var(--color-border-border-white)',
         },
         Text: {
-            '--colors-light-text-text-title': 'var(--colors-light-text-text-title)',
-            '--colors-light-text-text-label': 'var(--colors-light-text-text-label)',
-            '--colors-light-text-text-paragraph': 'var(--colors-light-text-text-paragraph)',
-            '--colors-light-text-text-accent': 'var(--colors-light-text-text-accent)',
-            '--colors-light-text-text-clicable': 'var(--colors-light-text-text-clicable)',
-            '--colors-light-text-text-clicable-hover': 'var(--colors-light-text-text-clicable-hover)',
-            '--colors-light-text-text-subtle': 'var(--colors-light-text-text-subtle)',
-            '--colors-light-text-text-white': 'var(--colors-light-text-text-white)',
-            '--colors-light-text-text-inactive': 'var(--colors-light-text-text-inactive)',
-            '--colors-light-text-text-disabled-white': 'var(--colors-light-text-text-disabled-white)',
-            '--colors-light-text-text-placeholder': 'var(--colors-light-text-text-placeholder)',
-            '--colors-light-text-text-error': 'var(--colors-light-text-text-error)',
-            '--colors-light-text-text-success': 'var(--colors-light-text-text-success)',
-            '--colors-light-text-text-warning': 'var(--colors-light-text-text-warning)',
-            '--colors-light-text-text-disabled': 'var(--colors-light-text-text-disabled)',
+            '--color-text-text-title': 'var(--color-text-text-title)',
+            '--color-text-text-label': 'var(--color-text-text-label)',
+            '--color-text-text-paragraph': 'var(--color-text-text-paragraph)',
+            '--color-text-text-accent': 'var(--color-text-text-accent)',
+            '--color-text-text-clicable': 'var(--color-text-text-clicable)',
+            '--color-text-text-clicable-hover': 'var(--color-text-text-clicable-hover)',
+            '--color-text-text-subtle': 'var(--color-text-text-subtle)',
+            '--color-text-text-white': 'var(--color-text-text-white)',
+            '--color-text-text-inactive': 'var(--color-text-text-inactive)',
+            '--color-text-text-placeholder': 'var(--color-text-text-placeholder)',
+            '--color-text-text-error': 'var(--color-text-text-error)',
+            '--color-text-text-success': 'var(--color-text-text-success)',
+            '--color-text-text-warning': 'var(--color-text-text-warning)',
+            '--color-text-text-disabled': 'var(--color-text-text-disabled)',
         },
         Foreground: {
-            '--colors-light-foreground-fg-white': 'var(--colors-light-foreground-fg-white)',
-            '--colors-light-foreground-fg-disabled': 'var(--colors-light-foreground-fg-disabled)',
-            '--colors-light-foreground-fg-primary': 'var(--colors-light-foreground-fg-primary)',
-            '--colors-light-foreground-fg-secondary': 'var(--colors-light-foreground-fg-secondary)',
-            '--colors-light-foreground-fg-secondary-hover': 'var(--colors-light-foreground-fg-secondary-hover)',
-            '--colors-light-foreground-fg-tertiary': 'var(--colors-light-foreground-fg-tertiary)',
-            '--colors-light-foreground-fg-tertiary-hover': 'var(--colors-light-foreground-fg-tertiary-hover)',
-            '--colors-light-foreground-fg-quaternary': 'var(--colors-light-foreground-fg-quaternary)',
-            '--colors-light-foreground-fg-quaternary-hover-brand': 'var(--colors-light-foreground-fg-quaternary-hover-brand)',
-            '--colors-light-foreground-fg-quaternary-hover': 'var(--colors-light-foreground-fg-quaternary-hover)',
-            '--colors-light-foreground-fg-error': 'var(--colors-light-foreground-fg-error)',
-            '--colors-light-foreground-fg-success': 'var(--colors-light-foreground-fg-success)',
-            '--colors-light-foreground-fg-warning': 'var(--colors-light-foreground-fg-warning)',
-            '--colors-light-foreground-fg-brand-primary': 'var(--colors-light-foreground-fg-brand-primary)',
+            '--color-foreground-fg-white': 'var(--color-foreground-fg-white)',
+            '--color-foreground-fg-disabled': 'var(--color-foreground-fg-disabled)',
+            '--color-foreground-fg-primary': 'var(--color-foreground-fg-primary)',
+            '--color-foreground-fg-secondary': 'var(--color-foreground-fg-secondary)',
+            '--color-foreground-fg-secondary-hover': 'var(--color-foreground-fg-secondary-hover)',
+            '--color-foreground-fg-tertiary': 'var(--color-foreground-fg-tertiary)',
+            '--color-foreground-fg-tertiary-hover': 'var(--color-foreground-fg-tertiary-hover)',
+            '--color-foreground-fg-quaternary': 'var(--color-foreground-fg-quaternary)',
+            '--color-foreground-fg-quaternary-hover-brand': 'var(--color-foreground-fg-quaternary-hover-brand)',
+            '--color-foreground-fg-quaternary-hover': 'var(--color-foreground-fg-quaternary-hover)',
+            '--color-foreground-fg-error': 'var(--color-foreground-fg-error)',
+            '--color-foreground-fg-success': 'var(--color-foreground-fg-success)',
+            '--color-foreground-fg-warning': 'var(--color-foreground-fg-warning)',
+            '--color-foreground-fg-brand-primary': 'var(--color-foreground-fg-brand-primary)',
         },
     };
     const gradients = {
@@ -264,5 +262,5 @@ export const Colors = () => {
             '--global-bp-gradient': 'var(--global-bp-gradient)',
         },
     };
-    return (_jsxs("div", { className: styles.container, children: [_jsx(Typography, { size: TypographySize.HeadingXL, weight: TypographyWeight.Bold, color: "var(--colors-light-text-text-title)", children: "Color System" }), _jsxs("section", { children: [_jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.SemiBold, color: "var(--colors-light-text-text-label)", children: "Gradients" }), Object.entries(gradients).map(([title, colors]) => (_jsx(ColorGroup, { title: title, colors: colors }, title)))] }), _jsxs("section", { children: [_jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.SemiBold, color: "var(--colors-light-text-text-label)", children: "Primitive Colors" }), Object.entries(primitives).map(([title, colors]) => (_jsx(ColorGroup, { title: title, colors: colors }, title)))] }), _jsxs("section", { children: [_jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.SemiBold, color: "var(--colors-light-text-text-label)", children: "Semantic Colors" }), Object.entries(semanticColors).map(([title, colors]) => (_jsx(ColorGroup, { title: title, colors: colors }, title)))] })] }));
+    return (_jsxs("div", { className: styles.container, children: [_jsx(Typography, { size: TypographySize.HeadingXL, weight: TypographyWeight.Bold, color: "var(--color-text-text-title)", children: "Color System" }), _jsxs("section", { children: [_jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.SemiBold, color: "var(--color-text-text-label)", children: "Gradients" }), Object.entries(gradients).map(([title, colors]) => (_jsx(ColorGroup, { title: title, colors: colors }, title)))] }), _jsxs("section", { children: [_jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.SemiBold, color: "var(--color-text-text-label)", children: "Primitive Colors" }), Object.entries(primitives).map(([title, colors]) => (_jsx(ColorGroup, { title: title, colors: colors }, title)))] }), _jsxs("section", { children: [_jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.SemiBold, color: "var(--color-text-text-label)", children: "Semantic Colors" }), Object.entries(semanticColors).map(([title, colors]) => (_jsx(ColorGroup, { title: title, colors: colors }, title)))] })] }));
 };

package/dist/stories/Navigation/ComplexHeader.js

@@ -13,7 +13,7 @@ export const ComplexHeader = ({ title = 'Title', badgeText = '22', newButtonText
         setLayoutType(type);
         onLayoutChange?.(type);
     };
-    return (_jsxs(Box, { className: className, display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid var(--primitives-desktop-primary-gray-200)', bgcolor: 'var(--colors-light-background-bg-white)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-4xl)', height: 'var( --spacing-tokens-size-in-px-spacing-spacing-7xl)', sx: sx, children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(Typography, { size: TypographySize.HeadingS, weight: TypographyWeight.Bold, children: title }), badgeText && (_jsx(Badge, { text: badgeText, size: BadgeSize.md, color: BadgeColor.Violet }))] }), onNewClick && (_jsx(MainButton, { text: newButtonText, hierarchy: ButtonHierarchy.Secondary, size: ButtonSize.xs, showTrailingIcon: true, trailingIcon: 'Plus', onClick: onNewClick }))] }), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', children: [_jsx(AutoComplete, { options: [], placeholder: "Search", onChange: () => { }, value: '' }), _jsx(MainButton, { text: 'Output File', hierarchy: ButtonHierarchy.SecondaryColor, size: ButtonSize.lg, showTrailingIcon: true, trailingIcon: 'DownloadSimple', onClick: onOutputFileClick }), _jsx(MainButton, { text: 'Download All', hierarchy: ButtonHierarchy.Primary, size: ButtonSize.lg, showTrailingIcon: true, trailingIcon: 'DownloadSimple', onClick: onDownloadAllClick }), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', children: [_jsx(MainButton, { hierarchy: layoutType === LayoutType.Grid
+    return (_jsxs(Box, { className: className, display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid var(--color-border-border-component)', bgcolor: 'var(--color-background-bg-page-contrast)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-4xl)', height: 'var( --spacing-tokens-size-in-px-spacing-spacing-7xl)', sx: sx, children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(Typography, { size: TypographySize.HeadingS, weight: TypographyWeight.Bold, children: title }), badgeText && (_jsx(Badge, { text: badgeText, size: BadgeSize.md, color: BadgeColor.Violet }))] }), onNewClick && (_jsx(MainButton, { text: newButtonText, hierarchy: ButtonHierarchy.Secondary, size: ButtonSize.xs, showTrailingIcon: true, trailingIcon: 'Plus', onClick: onNewClick }))] }), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)', children: [_jsx(AutoComplete, { options: [], placeholder: "Search", onChange: () => { }, value: '' }), _jsx(MainButton, { text: 'Output File', hierarchy: ButtonHierarchy.SecondaryColor, size: ButtonSize.lg, showTrailingIcon: true, trailingIcon: 'DownloadSimple', onClick: onOutputFileClick }), _jsx(MainButton, { text: 'Download All', hierarchy: ButtonHierarchy.Primary, size: ButtonSize.lg, showTrailingIcon: true, trailingIcon: 'DownloadSimple', onClick: onDownloadAllClick }), _jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', children: [_jsx(MainButton, { hierarchy: layoutType === LayoutType.Grid
                                     ? ButtonHierarchy.TertiaryColor
                                     : ButtonHierarchy.Tertiary, size: ButtonSize.sm, displayIconMode: ButtonDisplayMode.Only, displayIcon: "GridFour", onClick: () => handleLayoutChange(LayoutType.Grid) }), _jsx(MainButton, { hierarchy: layoutType === LayoutType.List
                                     ? ButtonHierarchy.TertiaryColor

package/dist/stories/Navigation/Header.js

@@ -5,5 +5,5 @@ import { ButtonHierarchy, ButtonSize } from '../Buttons';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { Avatar, AvatarSize } from '../UI';
 export const Header = ({ title = 'Beyond Presence', email, avatarProps, backButtonText = 'Back', onBackClick, onLogoutClick, className, }) => {
-    return (_jsxs(Box, { className: className, display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid var(--primitives-desktop-primary-gray-200)', bgcolor: 'var(--colors-light-background-bg-white)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-4xl)', height: 'var( --spacing-tokens-size-in-px-spacing-spacing-7xl)', children: [onBackClick ? (_jsx(MainButton, { text: backButtonText, hierarchy: ButtonHierarchy.Tertiary, showLeadingIcon: true, leadingIcon: 'ArrowLeft', onClick: onBackClick })) : (_jsx(Typography, { size: TypographySize.HeadingS, weight: TypographyWeight.SemiBold, children: title })), _jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '8px', children: [_jsxs(Box, { display: 'flex', flexDirection: 'column', alignItems: 'flex-end', justifyContent: 'space-between', children: [_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.SemiBold, children: email }), _jsx(MainButton, { text: 'Log Out', size: ButtonSize.sm, hierarchy: ButtonHierarchy.Tertiary, onClick: onLogoutClick, style: { paddingInline: '0px', paddingBlock: '0.1rem' } })] }), _jsx(Avatar, { ...avatarProps, size: AvatarSize.md })] })] }));
+    return (_jsxs(Box, { className: className, display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid var(--color-border-border-component)', bgcolor: 'var(--color-background-bg-page-contrast)', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-4xl)', height: 'var( --spacing-tokens-size-in-px-spacing-spacing-7xl)', children: [onBackClick ? (_jsx(MainButton, { text: backButtonText, hierarchy: ButtonHierarchy.Tertiary, showLeadingIcon: true, leadingIcon: 'ArrowLeft', onClick: onBackClick })) : (_jsx(Typography, { size: TypographySize.HeadingS, weight: TypographyWeight.SemiBold, children: title })), _jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '8px', children: [_jsxs(Box, { display: 'flex', flexDirection: 'column', alignItems: 'flex-end', justifyContent: 'space-between', children: [_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.SemiBold, children: email }), _jsx(MainButton, { text: 'Log Out', size: ButtonSize.sm, hierarchy: ButtonHierarchy.Tertiary, onClick: onLogoutClick, style: { paddingInline: '0px', paddingBlock: '0.1rem' } })] }), _jsx(Avatar, { ...avatarProps, size: AvatarSize.md })] })] }));
 };