@moderneinc/design-system-components 7.0.0-next.8282f1 → 7.0.0-next.e7c42e

package/dist/index.js

@@ -4711,29 +4711,19 @@ const variantConfig = {
 // `.MuiTooltip-tooltip` selectors below actually reach the portaled tooltip
 // (styled(Tooltip) alone applies to the anchor, not the popped content).
 const StyledTooltip = styles.styled(({ className, ...props }) => jsxRuntime.jsx(Tooltip, { ...props, classes: { popper: className } }), {
-    shouldForwardProp: prop => prop !== 'variant' && prop !== 'description',
-})(({ variant = 'light', description }) => {
-    const hasDescription = Boolean(description);
+    shouldForwardProp: prop => prop !== 'variant',
+})(({ variant = 'light' }) => {
     const variantStyles = variantConfig[variant];
     return {
-        // Style the tooltip content
+        // Style the tooltip content. Padding/line-height/radius are uniform
+        // regardless of whether a description is present — Figma defines a
+        // single tooltip treatment (title + optional content), not two.
         [`& .${Tooltip.tooltipClasses.tooltip}`]: {
             backgroundColor: variantStyles.backgroundColor,
             color: variantStyles.color,
-            fontSize: designSystemTokens.typography.fontSize.xs,
-            fontWeight: designSystemTokens.typography.fontWeight.medium,
-            lineHeight: hasDescription ? 1.5 : 1,
-            borderRadius: hasDescription ? designSystemTokens.borderRadius.s : designSystemTokens.borderRadius.xS,
-            padding: hasDescription ? designSystemTokens.spacing.spacing_1_1_2 : `0 ${designSystemTokens.spacing.spacing_1}px`,
-            ...(hasDescription && {
-                maxWidth: 296,
-            }),
-            ...(!hasDescription && {
-                height: designSystemTokens.spacing.spacing_3_1_4,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-            }),
+            ...designSystemTokens.semanticTypography.tooltip,
+            borderRadius: designSystemTokens.borderRadius.s,
+            padding: `${designSystemTokens.spacing.spacing_1}px ${designSystemTokens.spacing.spacing_1_1_2}px`,
             boxShadow: `${designSystemTokens.shadows.neutral.medium.x}px ${designSystemTokens.shadows.neutral.medium.y}px ${designSystemTokens.shadows.neutral.medium.blur}px ${designSystemTokens.shadows.neutral.medium.spread}px ${designSystemTokens.shadows.neutral.medium.shadow}`,
         },
         // Style the arrow
@@ -4753,18 +4743,17 @@ const StyledTooltip = styles.styled(({ className, ...props }) => jsxRuntime.jsx(
  * - Dark: surfaces.white, typography.body
  * - Brand: surfaces.snackbarBrand, typography.linkWhite (both fixed across modes)
  * - Shadow: neutralMedium (0px 8px 15px 0px rgba(31,41,55,0.1))
- * - Typography: fontSize.xs (12), fontSize.caption (13), fontWeight.medium (500), fontWeight.semiBold (600)
+ * - Typography: semanticTypography.tooltip (12px/1.5 line-height), fontWeight.semiBold (600) for the title
  */
 const ModTooltip = ({ variant = 'light', title, description, children, arrow = false, placement, ...props }) => {
-    // Build the title content
-    // If description is provided, create a structured layout with title + description
-    // Otherwise, just show the title text
-    const titleContent = description ? (jsxRuntime.jsxs(Stack, { sx: { gap: 0.5 }, children: [jsxRuntime.jsx(Typography, { sx: { fontSize: designSystemTokens.typography.fontSize.caption, fontWeight: designSystemTokens.typography.fontWeight.semiBold }, children: title }), jsxRuntime.jsx(Typography, { sx: {
-                    fontSize: designSystemTokens.typography.fontSize.xs,
-                    fontWeight: designSystemTokens.typography.fontWeight.medium,
-                    opacity: 0.75,
-                }, children: description })] })) : (title);
-    return (jsxRuntime.jsx(StyledTooltip, { variant: variant, description: description, title: titleContent, arrow: arrow, placement: placement, ...props, children: children }));
+    // variant="inherit" stops Typography from applying MUI's own body1 font
+    // styles (which would otherwise win over the container's tooltip typography
+    // — a directly-set style beats an inherited one regardless of specificity),
+    // letting it inherit fontSize/lineHeight/fontFamily from `.MuiTooltip-tooltip`.
+    // Title is always semibold; description (when present) inherits the
+    // container's regular weight, distinguishing it from the title above it.
+    const titleContent = description ? (jsxRuntime.jsxs(Stack, { sx: { gap: `${designSystemTokens.spacing.spacing_1_4}px` }, children: [jsxRuntime.jsx(Typography, { variant: "inherit", sx: { fontWeight: designSystemTokens.typography.fontWeight.semiBold }, children: title }), jsxRuntime.jsx(Typography, { variant: "inherit", children: description })] })) : (jsxRuntime.jsx(Typography, { variant: "inherit", sx: { fontWeight: designSystemTokens.typography.fontWeight.semiBold }, children: title }));
+    return (jsxRuntime.jsx(StyledTooltip, { variant: variant, title: titleContent, arrow: arrow, placement: placement, ...props, children: children }));
 };
 ModTooltip.displayName = 'ModTooltip';
 
@@ -5802,6 +5791,13 @@ const StyledTab = styles.styled(MuiTab)(({ theme }) => ({
     lineHeight: '1.5rem',
     color: designSystemTokens.semanticColors.color.text.tabInactive,
     transition: 'none', // Remove animation
+    // The count stays a step quieter than the label, but on secondary text ink
+    // rather than ModTag's neutral status ink. That one is tuned for standalone
+    // badges and is a warm grey: in dark mode it lands #aca598 beside an #f1f0ea
+    // label and reads as disabled rather than as secondary.
+    [`& .${Chip.chipClasses.root}`]: {
+        color: designSystemTokens.semanticColors.color.text.secondary,
+    },
     [`&.${MuiTab.tabClasses.selected}`]: {
         color: designSystemTokens.semanticColors.color.text.tabActive,
         fontWeight: designSystemTokens.typography.fontWeight.semiBold,
@@ -5827,6 +5823,9 @@ const StyledTab = styles.styled(MuiTab)(({ theme }) => ({
         color: designSystemTokens.semanticColors.button.fgDisabled,
         cursor: 'not-allowed',
         pointerEvents: 'auto',
+        [`& .${Chip.chipClasses.root}`]: {
+            color: designSystemTokens.semanticColors.color.text.tabDisabled,
+        },
         '&:hover': {
             backgroundColor: 'transparent',
         },