@moderneinc/neo-styled-components 2.6.0-next.d5f203 → 2.6.0-next.e7eb6e

package/dist/ListItemButton/ListItemButton.d.ts

@@ -48,7 +48,7 @@ export interface NeoListItemButtonProps extends ListItemButtonProps {
  * - showIcon → Conditional rendering of ListItemIcon child
  *
  * Design Tokens Used:
- * - semanticColors.border.tabActive (#2f42ff) - Active border
+ * - semanticColors.buttons.primary.default (#2f42ff) - Active border
  * - semanticColors.border.primary (#d1d5db) - Default/disabled border
  * - semanticColors.icons.default (#1f2937) - Active icon color
  * - semanticColors.icons.disabled (#d1d5db) - Deselected/disabled icon color

package/dist/MarketplaceCard/MarketplaceCard.d.ts

@@ -68,8 +68,8 @@ export interface NeoMarketplaceCardProps extends Omit<CardProps, 'children' | 't
  * Design Tokens Used:
  * - semanticColors.surfaces.card (#FFFFFF) - Default card background
  * - semanticColors.status.info.light (#f2f3ff) - Active/focused card background
- * - semanticColors.border.card (#d1d5db) - Default border
- * - semanticColors.border.tabActive (#2f42ff) - Active/focused border
+ * - semanticColors.border.primary (#d1d5db) - Default border
+ * - semanticColors.buttons.primary.default (#2f42ff) - Active/focused border
  * - shadows.focusWhite1 - Inner white focus ring (2px spread)
  * - shadows.focusBlue2 - Outer blue focus ring (4px spread)
  * - colors.grey[800] (#1F2937) - Text color

package/dist/MarketplaceLargeCard/MarketplaceLargeCard.d.ts

@@ -77,8 +77,8 @@ export interface NeoMarketplaceLargeCardProps extends Omit<CardProps, 'children'
  * Design Tokens Used:
  * - semanticColors.surfaces.card (#ffffff) - Light theme background
  * - colors.grey[800] (#1f2937) - Dark theme background
- * - semanticColors.border.card (#d1d5db) - Default border (50% opacity on dark)
- * - semanticColors.border.tabActive (#2f42ff) - Active/focused border (light theme)
+ * - semanticColors.border.primary (#d1d5db) - Default border (50% opacity on dark)
+ * - semanticColors.buttons.primary.default (#2f42ff) - Active/focused border (light theme)
  * - colors.digitalGreen[300] (#88fe9b) - Active/focused border (dark theme)
  * - borderRadius.xS (4px) - Corner radius
  * - shadows.focusWhite1 + shadows.focusBlue2 - Focus ring

package/dist/StatusBanner/StatusBanner.d.ts

@@ -38,10 +38,10 @@ export interface NeoStatusBannerProps extends Omit<AlertProps, 'severity' | 'var
  * - Mode (Light|Dark) → variant ('outlined'|'filled')
  *
  * Design Tokens Used:
- * - status.success.light, status.success.medium
- * - status.error.light, status.error.medium
- * - status.neutral.light, status.neutral.medium
- * - status.info.light, status.info.medium
+ * - status.success.light, status.success.default
+ * - status.error.light, status.error.default
+ * - status.neutral.light, status.neutral.default
+ * - status.info.light, status.info.default
  * - typography.tooltip, typography.bodySecondary
  * - grey[800]
  * - fontSize.default, fontSize.sm

package/dist/index.d.ts

@@ -2167,10 +2167,10 @@ interface NeoStatusBannerProps extends Omit<AlertProps, 'severity' | 'variant'>
  * - Mode (Light|Dark) → variant ('outlined'|'filled')
  *
  * Design Tokens Used:
- * - status.success.light, status.success.medium
- * - status.error.light, status.error.medium
- * - status.neutral.light, status.neutral.medium
- * - status.info.light, status.info.medium
+ * - status.success.light, status.success.default
+ * - status.error.light, status.error.default
+ * - status.neutral.light, status.neutral.default
+ * - status.info.light, status.info.default
  * - typography.tooltip, typography.bodySecondary
  * - grey[800]
  * - fontSize.default, fontSize.sm
@@ -2606,7 +2606,7 @@ interface NeoListItemButtonProps extends ListItemButtonProps {
  * - showIcon → Conditional rendering of ListItemIcon child
  *
  * Design Tokens Used:
- * - semanticColors.border.tabActive (#2f42ff) - Active border
+ * - semanticColors.buttons.primary.default (#2f42ff) - Active border
  * - semanticColors.border.primary (#d1d5db) - Default/disabled border
  * - semanticColors.icons.default (#1f2937) - Active icon color
  * - semanticColors.icons.disabled (#d1d5db) - Deselected/disabled icon color
@@ -2767,8 +2767,8 @@ interface NeoMarketplaceCardProps extends Omit<CardProps, 'children' | 'title'>
  * Design Tokens Used:
  * - semanticColors.surfaces.card (#FFFFFF) - Default card background
  * - semanticColors.status.info.light (#f2f3ff) - Active/focused card background
- * - semanticColors.border.card (#d1d5db) - Default border
- * - semanticColors.border.tabActive (#2f42ff) - Active/focused border
+ * - semanticColors.border.primary (#d1d5db) - Default border
+ * - semanticColors.buttons.primary.default (#2f42ff) - Active/focused border
  * - shadows.focusWhite1 - Inner white focus ring (2px spread)
  * - shadows.focusBlue2 - Outer blue focus ring (4px spread)
  * - colors.grey[800] (#1F2937) - Text color

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { shadows, semanticColors, colors, spacing, typography, borderRadius } from '@moderneinc/neo-design';
+import { semanticColors, colors, spacing, typography, borderRadius, shadows } from '@moderneinc/neo-design';
 import Box from '@mui/material/Box';
 import { styled, alpha } from '@mui/material/styles';
 import Avatar from '@mui/material/Avatar';
@@ -63,14 +63,14 @@ import { TreeItem, treeItemClasses } from '@mui/x-tree-view/TreeItem';
 import { RichTreeViewPro } from '@mui/x-tree-view-pro/RichTreeViewPro';
 
 /**
- * Outline-based focus ring styles derived from Neo shadow tokens.
+ * Outline-based focus ring styles derived from Neo border tokens.
  * Uses CSS outline (not box-shadow) so focus rings are never clipped by overflow:hidden.
  *
- * Produces a double-ring effect: a white inner gap (via outline-offset) and a blue outer ring.
+ * Produces a double-ring effect: a white inner gap (via outline-offset) and a colored outer ring.
  */
 const focusRingStyles = {
-    outline: `${shadows.focusBlue2.spread - shadows.focusWhite1.spread}px solid ${shadows.focusBlue2.shadow}`,
-    outlineOffset: `${shadows.focusWhite1.spread}px`,
+    outline: `2px solid ${semanticColors.border.focus}`,
+    outlineOffset: '2px',
 };
 
 // biome-ignore lint/suspicious/noExplicitAny: Type cast required to override MUI Avatar variant type without global augmentation
@@ -218,7 +218,7 @@ const StyledChip$2 = styled(Chip)(({ theme }) => ({
     [`&.${chipClasses.colorDefault}`]: {
         backgroundColor: semanticColors.status.neutral.light,
         color: semanticColors.status.neutral.dark,
-        border: `1px solid ${semanticColors.status.neutral.medium}80`,
+        border: `1px solid ${semanticColors.status.neutral.default}80`,
         [`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {
             color: semanticColors.status.neutral.dark,
         },
@@ -227,7 +227,7 @@ const StyledChip$2 = styled(Chip)(({ theme }) => ({
     [`&.${chipClasses.colorError}`]: {
         backgroundColor: semanticColors.status.error.light,
         color: semanticColors.status.error.dark,
-        border: `1px solid ${semanticColors.status.error.medium}80`,
+        border: `1px solid ${semanticColors.status.error.default}80`,
         [`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {
             color: semanticColors.status.error.dark,
         },
@@ -236,7 +236,7 @@ const StyledChip$2 = styled(Chip)(({ theme }) => ({
     [`&.${chipClasses.colorWarning}`]: {
         backgroundColor: semanticColors.status.warning.light,
         color: semanticColors.status.warning.dark,
-        border: `1px solid ${semanticColors.status.warning.medium}80`,
+        border: `1px solid ${semanticColors.status.warning.default}80`,
         [`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {
             color: semanticColors.status.warning.dark,
         },
@@ -245,7 +245,7 @@ const StyledChip$2 = styled(Chip)(({ theme }) => ({
     [`&.${chipClasses.colorSuccess}`]: {
         backgroundColor: semanticColors.status.success.light,
         color: semanticColors.status.success.dark,
-        border: `1px solid ${semanticColors.status.success.medium}80`,
+        border: `1px solid ${semanticColors.status.success.default}80`,
         [`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {
             color: semanticColors.status.success.dark,
         },
@@ -254,7 +254,7 @@ const StyledChip$2 = styled(Chip)(({ theme }) => ({
     [`&.${chipClasses.colorInfo}`]: {
         backgroundColor: semanticColors.status.info.light,
         color: semanticColors.status.info.dark,
-        border: `1px solid ${semanticColors.status.info.medium}80`,
+        border: `1px solid ${semanticColors.status.info.default}80`,
         [`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {
             color: semanticColors.status.info.dark,
         },
@@ -1065,13 +1065,13 @@ const NeoBanner = ({ variant = 'light', message, messagePosition = 'left', linkT
             return semanticColors.surfaces.white;
         }
         if (variant === 'success') {
-            return semanticColors.status.success.medium;
+            return semanticColors.status.success.default;
         }
         if (variant === 'error') {
-            return semanticColors.status.error.medium;
+            return semanticColors.status.error.default;
         }
         if (variant === 'warning') {
-            return semanticColors.status.warning.medium;
+            return semanticColors.status.warning.default;
         }
         return colors.grey['800'];
     };
@@ -1103,7 +1103,7 @@ const StyledBreadcrumbLink = styled(Link, {
         color: current ? semanticColors.buttons.tertiary.hover : semanticColors.icons.hover,
     },
     '&:focus-visible': {
-        outline: `2px solid ${semanticColors.buttons.primary.focus}`,
+        outline: `2px solid ${semanticColors.border.focus}`,
         outlineOffset: 2,
     },
 }));
@@ -1193,7 +1193,7 @@ const StyledButtonBase$1 = styled(ButtonBase, {
         },
         // Focus visible for keyboard navigation
         [`&.${buttonBaseClasses.focusVisible}`]: {
-            outline: `2px solid ${semanticColors.buttons.primary.focus}`,
+            outline: `2px solid ${semanticColors.border.focus}`,
             outlineOffset: 2,
         },
     };
@@ -1233,7 +1233,7 @@ const StyledButtonBase$1 = styled(ButtonBase, {
                 : {
                     [`&.${buttonBaseClasses.disabled}`]: {
                         backgroundColor: semanticColors.buttons.secondary.disabledBackground,
-                        borderColor: semanticColors.buttons.secondary.disabledBorder,
+                        borderColor: semanticColors.border.secondary,
                         color: semanticColors.typography.button.disabled,
                     },
                 }),
@@ -1378,7 +1378,7 @@ const StyledButtonTab = styled(MuiToggleButton)(({ theme }) => ({
         color: semanticColors.typography.tab.active,
     },
     '&.Mui-focusVisible': {
-        outline: `2px solid ${semanticColors.buttons.primary.focus}`,
+        outline: `2px solid ${semanticColors.border.focus}`,
         outlineOffset: -2,
         borderRadius: borderRadius.xXS,
     },
@@ -1479,7 +1479,7 @@ const StyledButtonTabGroup = styled(MuiToggleButtonGroup)(({ theme, size = 'medi
             },
             // Focus visible for keyboard navigation
             '&.Mui-focusVisible': {
-                outline: `2px solid ${semanticColors.buttons.primary.focus}`,
+                outline: `2px solid ${semanticColors.border.focus}`,
                 outlineOffset: -2,
                 zIndex: 1,
             },
@@ -1599,7 +1599,7 @@ const StyledCheckbox = styled(Checkbox, {
         height: config.size,
         padding: 0,
         marginTop: size === 'xs' ? 3 : 2,
-        color: semanticColors.border.input,
+        color: semanticColors.border.primary,
         flexShrink: 0,
         // Root element
         [`&.${checkboxClasses.root}`]: {
@@ -1622,20 +1622,20 @@ const StyledCheckbox = styled(Checkbox, {
         },
         // Disabled state
         [`&.${checkboxClasses.disabled}`]: {
-            color: semanticColors.border.input,
+            color: semanticColors.border.primary,
             cursor: 'not-allowed',
             // When checked and disabled
             [`&.${checkboxClasses.checked}`]: {
-                color: semanticColors.border.input,
+                color: semanticColors.border.primary,
             },
             // When indeterminate and disabled
             [`&.${checkboxClasses.indeterminate}`]: {
-                color: semanticColors.border.input,
+                color: semanticColors.border.primary,
             },
         },
         // Focus visible for keyboard navigation
         '&.Mui-focusVisible': {
-            outline: `2px solid ${semanticColors.buttons.primary.focus}`,
+            outline: `2px solid ${semanticColors.border.focus}`,
             outlineOffset: 2,
             borderRadius: config.borderRadius,
         },
@@ -1765,7 +1765,7 @@ const StyledButtonBase = styled(ButtonBase, {
         cursor: 'text',
         // Focus visible for keyboard navigation
         [`&.${buttonBaseClasses.focusVisible}`]: {
-            outline: `2px solid ${semanticColors.buttons.primary.focus}`,
+            outline: `2px solid ${semanticColors.border.focus}`,
             outlineOffset: 2,
         },
     };
@@ -1836,7 +1836,7 @@ const StyledSearchField = styled(TextField)(({ theme }) => ({
         fontSize: theme.typography.pxToRem(typography.fontSize.default),
         borderRadius: borderRadius.input,
         backgroundColor: semanticColors.input.background,
-        border: `1px solid ${semanticColors.border.input}`,
+        border: `1px solid ${semanticColors.border.primary}`,
         paddingTop: spacing.spacing_1,
         paddingBottom: spacing.spacing_1,
         paddingLeft: spacing.spacing_1_1_2,
@@ -2093,11 +2093,11 @@ const ChevronDownIcon = (props) => (jsx(ChevronDown, { ...props, size: spacing.s
 const StyledSelect = styled(MuiSelect)({
     minHeight: spacing.spacing_5,
     backgroundColor: semanticColors.input.background,
-    border: `1px solid ${semanticColors.border.input}`,
+    border: `1px solid ${semanticColors.border.primary}`,
     borderRadius: `${borderRadius.input}px`,
     '&:hover': {
         backgroundColor: semanticColors.input.hoverBackground,
-        borderColor: semanticColors.border.input,
+        borderColor: semanticColors.border.primary,
     },
     '&.Mui-focused': {
         backgroundColor: semanticColors.input.background,
@@ -2213,7 +2213,7 @@ const StyledGridFilterPanel = styled(GridFilterPanel)({
         position: 'relative',
         minHeight: spacing.spacing_5,
         backgroundColor: semanticColors.input.background,
-        border: `1px solid ${semanticColors.border.input}`,
+        border: `1px solid ${semanticColors.border.primary}`,
         borderRadius: `${borderRadius.input}px`,
         fontSize: typography.fontSize.default,
         fontWeight: typography.fontWeight.regular,
@@ -2221,11 +2221,11 @@ const StyledGridFilterPanel = styled(GridFilterPanel)({
     },
     [`& .${gridClasses.filterForm} .${inputBaseClasses.root}:hover`]: {
         backgroundColor: semanticColors.input.hoverBackground,
-        borderColor: semanticColors.border.input,
+        borderColor: semanticColors.border.primary,
     },
     [`& .${gridClasses.filterForm} .${inputBaseClasses.root}.${inputBaseClasses.focused}`]: {
         backgroundColor: semanticColors.input.background,
-        borderColor: semanticColors.border.input,
+        borderColor: semanticColors.border.primary,
     },
     [`& .${gridClasses.filterForm} .${inputBaseClasses.root}::before`]: {
         display: 'none',
@@ -2649,11 +2649,11 @@ const outlinedColorStyles = {
     },
 };
 const filledColorStyles = {
-    default: semanticColors.status.neutral.medium,
-    error: semanticColors.status.error.medium,
-    warning: semanticColors.status.warning.medium,
-    success: semanticColors.status.success.medium,
-    info: semanticColors.status.info.medium,
+    default: semanticColors.status.neutral.default,
+    error: semanticColors.status.error.default,
+    warning: semanticColors.status.warning.default,
+    success: semanticColors.status.success.default,
+    info: semanticColors.status.info.default,
     violet: colors.violet[500],
     beta: colors.digitalBlue[300],
 };
@@ -3261,7 +3261,7 @@ const StyledIconButton = styled(IconButton, {
         },
         // Focus visible for keyboard navigation
         '&:focus-visible': {
-            outline: `2px solid ${semanticColors.buttons.primary.focus}`,
+            outline: `2px solid ${semanticColors.border.focus}`,
             outlineOffset: 2,
         },
     };
@@ -3601,7 +3601,7 @@ const sizeMap = {
 };
 const StyledBadge = styled(Badge)(({ ownerState }) => {
     const size = sizeMap[ownerState.size];
-    const color = semanticColors.status[ownerState.color].medium;
+    const color = semanticColors.status[ownerState.color].default;
     return {
         [`& .${badgeClasses.badge}`]: {
             width: size,
@@ -3629,7 +3629,7 @@ const StyledBadge = styled(Badge)(({ ownerState }) => {
  */
 const NeoDot = ({ size = 'medium', variant = 'solid', color = 'neutral', ...props }) => {
     const dotSize = sizeMap[size];
-    const mediumColor = semanticColors.status[color].medium;
+    const mediumColor = semanticColors.status[color].default;
     const lightColor = semanticColors.status[color].light;
     // For outline variant, use SVG for precise control
     const renderDot = () => {
@@ -4223,9 +4223,9 @@ const StyledInputBase = styled(InputBase, {
         },
         medium: {
             height: spacing.spacing_5_1_2,
-            padding: `${spacing.spacing_2}px ${spacing.spacing_3}px ${spacing.spacing_2}px ${startAdornment ? 0 : spacing.spacing_2}px`,
+            padding: `${spacing.spacing_1_1_4}px ${spacing.spacing_2}px ${spacing.spacing_1_1_4}px ${startAdornment ? 0 : spacing.spacing_2}px`,
             fontSize: theme.typography.pxToRem(typography.fontSize.default),
-            borderRadius: borderRadius.input,
+            borderRadius: spacing.spacing_8,
         },
     };
     const sizeStyles = sizeConfig[size];
@@ -4234,7 +4234,7 @@ const StyledInputBase = styled(InputBase, {
         fontSize: sizeStyles.fontSize,
         borderRadius: sizeStyles.borderRadius,
         backgroundColor: semanticColors.input.background,
-        border: `1px solid ${destructive ? semanticColors.status.error.medium : semanticColors.border.input}`,
+        border: `1px solid ${destructive ? semanticColors.status.error.default : semanticColors.border.primary}`,
         transition: theme.transitions.create(['border-color', 'background-color'], {
             duration: theme.transitions.duration.short,
         }),
@@ -4248,19 +4248,21 @@ const StyledInputBase = styled(InputBase, {
         // Hover state
         '&:hover': {
             backgroundColor: semanticColors.input.hoverBackground,
-            borderColor: destructive ? semanticColors.status.error.medium : semanticColors.border.input,
+            borderColor: destructive
+                ? semanticColors.status.error.default
+                : semanticColors.border.primary,
         },
         // Focused state
         [`&.${inputBaseClasses.focused}`]: {
             backgroundColor: semanticColors.input.background,
             borderColor: destructive
-                ? semanticColors.status.error.medium
+                ? semanticColors.status.error.default
                 : semanticColors.buttons.primary.default,
         },
         // Disabled state
         [`&.${inputBaseClasses.disabled}`]: {
             backgroundColor: semanticColors.input.disabledBackground,
-            borderColor: semanticColors.border.input,
+            borderColor: semanticColors.border.primary,
             color: semanticColors.icons.disabled,
             [`& .${inputBaseClasses.input}`]: {
                 WebkitTextFillColor: semanticColors.icons.disabled,
@@ -4268,11 +4270,11 @@ const StyledInputBase = styled(InputBase, {
         },
         // Error state
         [`&.${inputBaseClasses.error}`]: {
-            borderColor: semanticColors.status.error.medium,
+            borderColor: semanticColors.status.error.default,
         },
         // Adornment styling
         [`& .${inputAdornmentClasses.root}`]: {
-            color: destructive ? semanticColors.status.error.medium : semanticColors.icons.placeholder,
+            color: destructive ? semanticColors.status.error.default : semanticColors.icons.placeholder,
         },
     };
 });
@@ -4286,7 +4288,7 @@ const StyledFormHelperText = styled(FormHelperText, {
         fontSize: theme.typography.pxToRem(typography.fontSize.sm),
         color: semanticColors.typography.input.helper,
         [`&.${formHelperTextClasses.error}`]: {
-            color: semanticColors.status.error.medium,
+            color: semanticColors.status.error.default,
         },
         [`&.${formHelperTextClasses.disabled}`]: {
             color: semanticColors.icons.disabled,
@@ -4586,7 +4588,7 @@ const StyledListItemButton = styled(ListItemButton)(({ theme }) => ({
     transition: theme.transitions.create(['border', 'background-color']),
     // Active (selected) state
     [`&.${listItemButtonClasses.selected}`]: {
-        border: `2px solid ${semanticColors.border.tabActive}`,
+        border: `2px solid ${semanticColors.buttons.primary.default}`,
         backgroundColor: theme.palette.common.white,
         '&:hover': {
             backgroundColor: theme.palette.common.white,
@@ -4620,9 +4622,9 @@ const StyledListItemButton = styled(ListItemButton)(({ theme }) => ({
     },
     // Focus state
     [`&.${listItemButtonClasses.focusVisible}`]: {
-        outline: `2px solid ${semanticColors.border.tabActive}`,
+        outline: `2px solid ${semanticColors.buttons.primary.default}`,
         outlineOffset: 2,
-        border: `2px solid ${semanticColors.border.tabActive}`,
+        border: `2px solid ${semanticColors.buttons.primary.default}`,
         backgroundColor: theme.palette.common.white,
         [`& .${listItemIconClasses.root}`]: {
             color: semanticColors.icons.default,
@@ -4681,7 +4683,7 @@ const StyledListItemButton = styled(ListItemButton)(({ theme }) => ({
  * - showIcon → Conditional rendering of ListItemIcon child
  *
  * Design Tokens Used:
- * - semanticColors.border.tabActive (#2f42ff) - Active border
+ * - semanticColors.buttons.primary.default (#2f42ff) - Active border
  * - semanticColors.border.primary (#d1d5db) - Default/disabled border
  * - semanticColors.icons.default (#1f2937) - Active icon color
  * - semanticColors.icons.disabled (#d1d5db) - Deselected/disabled icon color
@@ -4714,17 +4716,17 @@ const StyledCard = styled(MuiCard, {
     flexDirection: 'column',
     gap: theme.spacing(2), // 16px
     backgroundColor: semanticColors.surfaces.card,
-    border: `1px solid ${selected ? semanticColors.border.tabActive : semanticColors.border.card}`,
+    border: `1px solid ${selected ? semanticColors.buttons.primary.default : semanticColors.border.primary}`,
     borderRadius: borderRadius.xS,
     boxShadow: selected ? activeShadow$1 : 'none',
     transition: theme.transitions.create(['border-color', 'background-color', 'box-shadow']),
     cursor: 'pointer',
     '&:hover': {
-        borderColor: semanticColors.border.tabActive,
+        borderColor: semanticColors.buttons.primary.default,
         boxShadow: activeShadow$1,
     },
     '&:focus-visible': {
-        borderColor: semanticColors.border.tabActive,
+        borderColor: semanticColors.buttons.primary.default,
         ...focusRingStyles,
     },
     ...(disabled && {
@@ -4828,8 +4830,8 @@ const Description$1 = styled('p')(({ theme }) => ({
  * Design Tokens Used:
  * - semanticColors.surfaces.card (#FFFFFF) - Default card background
  * - semanticColors.status.info.light (#f2f3ff) - Active/focused card background
- * - semanticColors.border.card (#d1d5db) - Default border
- * - semanticColors.border.tabActive (#2f42ff) - Active/focused border
+ * - semanticColors.border.primary (#d1d5db) - Default border
+ * - semanticColors.buttons.primary.default (#2f42ff) - Active/focused border
  * - shadows.focusWhite1 - Inner white focus ring (2px spread)
  * - shadows.focusBlue2 - Outer blue focus ring (4px spread)
  * - colors.grey[800] (#1F2937) - Text color
@@ -4852,10 +4854,12 @@ const StyledLargeCard = styled(MuiCard, {
     const isActive = cardState === 'active';
     const isDisabled = cardState === 'disabled';
     const isFocused = cardState === 'focused';
-    const activeBorderColor = isLight ? semanticColors.border.tabActive : colors.digitalGreen[300];
+    const activeBorderColor = isLight
+        ? semanticColors.buttons.primary.default
+        : colors.digitalGreen[300];
     const defaultBorderColor = isLight
-        ? semanticColors.border.card
-        : `${semanticColors.border.card}80`;
+        ? semanticColors.border.primary
+        : `${semanticColors.border.primary}80`;
     return {
         width: 340,
         height: 162,
@@ -4871,7 +4875,7 @@ const StyledLargeCard = styled(MuiCard, {
         overflow: 'hidden',
         ...(isFocused && focusRingStyles),
         '&:focus-visible': {
-            borderColor: isLight ? semanticColors.border.tabActive : colors.digitalGreen[300],
+            borderColor: isLight ? semanticColors.buttons.primary.default : colors.digitalGreen[300],
             ...focusRingStyles,
         },
         ...(isDisabled && {
@@ -4951,8 +4955,8 @@ const ButtonsRow = styled('div')({
  * Design Tokens Used:
  * - semanticColors.surfaces.card (#ffffff) - Light theme background
  * - colors.grey[800] (#1f2937) - Dark theme background
- * - semanticColors.border.card (#d1d5db) - Default border (50% opacity on dark)
- * - semanticColors.border.tabActive (#2f42ff) - Active/focused border (light theme)
+ * - semanticColors.border.primary (#d1d5db) - Default border (50% opacity on dark)
+ * - semanticColors.buttons.primary.default (#2f42ff) - Active/focused border (light theme)
  * - colors.digitalGreen[300] (#88fe9b) - Active/focused border (dark theme)
  * - borderRadius.xS (4px) - Corner radius
  * - shadows.focusWhite1 + shadows.focusBlue2 - Focus ring
@@ -5024,7 +5028,7 @@ NeoMenu.displayName = 'NeoMenu';
 const StyledDialog = styled(Dialog)({
     [`& .${dialogClasses.paper}`]: {
         borderRadius: borderRadius.card,
-        border: `1px solid ${semanticColors.border.card}`,
+        border: `1px solid ${semanticColors.border.primary}`,
         boxShadow: 'none',
     },
     [`& .${dialogClasses.container}`]: {
@@ -5571,7 +5575,7 @@ const StyledLinearProgress$1 = styled(LinearProgress, {
     // Cancelled variant uses warning color
     '&[data-variant="cancelled"]': {
         [`& .${linearProgressClasses.bar}`]: {
-            backgroundColor: semanticColors.status.warning.medium,
+            backgroundColor: semanticColors.status.warning.default,
         },
     },
 }));
@@ -5636,7 +5640,7 @@ const StyledTextField = styled(TextField)(({ theme }) => ({
         fontSize: theme.typography.pxToRem(typography.fontSize.default),
         borderRadius: borderRadius.input,
         backgroundColor: semanticColors.input.background,
-        border: `1px solid ${semanticColors.border.input}`,
+        border: `1px solid ${semanticColors.border.primary}`,
         paddingTop: spacing.spacing_1,
         paddingBottom: spacing.spacing_1,
         paddingLeft: spacing.spacing_1_1_2,
@@ -5731,7 +5735,7 @@ NeoQuickFilter.displayName = 'NeoQuickFilter';
 const UncheckedIcon = ({ size }) => {
     const dimensions = size === 'small' ? 16 : 20;
     const radius = size === 'small' ? 8 : 10;
-    return (jsxs("svg", { width: dimensions, height: dimensions, viewBox: `0 0 ${dimensions} ${dimensions}`, fill: "none", "aria-hidden": "true", children: [jsx("title", { children: "Unchecked radio button" }), jsx("circle", { cx: dimensions / 2, cy: dimensions / 2, r: radius - 0.5, stroke: semanticColors.border.input, strokeWidth: "1", fill: "transparent" })] }));
+    return (jsxs("svg", { width: dimensions, height: dimensions, viewBox: `0 0 ${dimensions} ${dimensions}`, fill: "none", "aria-hidden": "true", children: [jsx("title", { children: "Unchecked radio button" }), jsx("circle", { cx: dimensions / 2, cy: dimensions / 2, r: radius - 0.5, stroke: semanticColors.border.primary, strokeWidth: "1", fill: "transparent" })] }));
 };
 const CheckedIcon = ({ size }) => {
     const dimensions = size === 'small' ? 16 : 20;
@@ -5987,19 +5991,19 @@ const StyledAlert$1 = styled(Alert, {
     const colorMap = {
         success: {
             light: semanticColors.status.success.light,
-            medium: semanticColors.status.success.medium,
+            medium: semanticColors.status.success.default,
         },
         error: {
             light: semanticColors.status.error.light,
-            medium: semanticColors.status.error.medium,
+            medium: semanticColors.status.error.default,
         },
         neutral: {
             light: semanticColors.status.neutral.light,
-            medium: semanticColors.status.neutral.medium,
+            medium: semanticColors.status.neutral.default,
         },
         info: {
             light: semanticColors.status.info.light,
-            medium: semanticColors.status.info.medium,
+            medium: semanticColors.status.info.default,
         },
     };
     const severityColors = colorMap[severity];
@@ -6070,10 +6074,10 @@ const StyledAlert$1 = styled(Alert, {
  * - Mode (Light|Dark) → variant ('outlined'|'filled')
  *
  * Design Tokens Used:
- * - status.success.light, status.success.medium
- * - status.error.light, status.error.medium
- * - status.neutral.light, status.neutral.medium
- * - status.info.light, status.info.medium
+ * - status.success.light, status.success.default
+ * - status.error.light, status.error.default
+ * - status.neutral.light, status.neutral.default
+ * - status.info.light, status.info.default
  * - typography.tooltip, typography.bodySecondary
  * - grey[800]
  * - fontSize.default, fontSize.sm
@@ -6110,7 +6114,7 @@ NeoStatusBanner.displayName = 'NeoStatusBanner';
 const NeoTabs = styled(MuiTabs)(() => ({
     minHeight: spacing.spacing_5,
     [`& .${tabsClasses.indicator}`]: {
-        backgroundColor: semanticColors.border.tabActive,
+        backgroundColor: semanticColors.buttons.primary.default,
         height: 2,
     },
     [`& .${tabsClasses.flexContainer}`]: {
@@ -6132,7 +6136,7 @@ const StyledTab = styled(MuiTab)(({ theme }) => ({
         fontWeight: typography.fontWeight.semiBold,
     },
     [`&.${buttonBaseClasses.focusVisible}`]: {
-        outline: `2px solid ${semanticColors.buttons.primary.focus}`,
+        outline: `2px solid ${semanticColors.border.focus}`,
         outlineOffset: -2,
     },
     [`&.${tabClasses.disabled}`]: {
@@ -6212,17 +6216,17 @@ const StyledAlert = styled(Alert, {
         error: {
             backgroundColor: semanticColors.status.error.light,
             color: semanticColors.status.error.dark,
-            border: `1px solid ${semanticColors.status.error.medium}`,
+            border: `1px solid ${semanticColors.status.error.default}`,
         },
         success: {
             backgroundColor: semanticColors.status.success.light,
             color: semanticColors.status.success.dark,
-            border: `1px solid ${semanticColors.status.success.medium}`,
+            border: `1px solid ${semanticColors.status.success.default}`,
         },
         info: {
             backgroundColor: semanticColors.status.info.light,
             color: semanticColors.status.info.dark,
-            border: `1px solid ${semanticColors.status.info.medium}`,
+            border: `1px solid ${semanticColors.status.info.default}`,
         },
         download: {
             backgroundColor: semanticColors.surfaces.snackbarDarkMode,
@@ -6450,7 +6454,7 @@ const StyledSwitch = styled(Switch, {
             // Focus visible for keyboard navigation
             '&.Mui-focusVisible': {
                 [`& + .${switchClasses.track}`]: {
-                    outline: `2px solid ${semanticColors.buttons.primary.focus}`,
+                    outline: `2px solid ${semanticColors.border.focus}`,
                     outlineOffset: 2,
                 },
             },
@@ -6791,7 +6795,7 @@ const StyledTreeView = styled(RichTreeViewPro)({
         backgroundColor: semanticColors.surfaces.listHover,
     },
     [`& .${treeItemClasses.content}.Mui-focused`]: {
-        boxShadow: `inset 0 0 0 2px ${semanticColors.buttons.primary.focus}`,
+        boxShadow: `inset 0 0 0 2px ${semanticColors.border.focus}`,
         backgroundColor: 'transparent',
     },
     [`& .${treeItemClasses.content}.Mui-selected`]: {
@@ -6802,7 +6806,7 @@ const StyledTreeView = styled(RichTreeViewPro)({
     },
     [`& .${treeItemClasses.content}.Mui-selected.Mui-focused`]: {
         backgroundColor: semanticColors.surfaces.listHover,
-        boxShadow: `inset 0 0 0 2px ${semanticColors.buttons.primary.focus}`,
+        boxShadow: `inset 0 0 0 2px ${semanticColors.border.focus}`,
     },
     [`& .${treeItemClasses.label}`]: {
         fontSize: typography.fontSize.xs,