@moderneinc/design-system-components 7.0.0-next.57acda → 7.0.0-next.e7c42e

package/dist/Tooltip/Tooltip.d.ts

@@ -19,9 +19,8 @@ export interface ModTooltipProps extends Omit<TooltipProps, 'title' | 'variant'>
      */
     title: ReactNode;
     /**
-     * Optional supporting description text. When provided, shows a larger tooltip
-     * with a heading + body hierarchy: title (13px semibold) above a muted
-     * description (12px medium).
+     * Optional supporting description text. When provided, shows the title
+     * (semibold) above a muted description (regular weight).
      * @default undefined
      */
     description?: string;
@@ -37,7 +36,7 @@ export interface ModTooltipProps extends Omit<TooltipProps, 'title' | 'variant'>
  * - 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
  */
 export declare const ModTooltip: {
     ({ variant, title, description, children, arrow, placement, ...props }: ModTooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/index.d.ts

@@ -3093,9 +3093,8 @@ interface ModTooltipProps extends Omit<TooltipProps, 'title' | 'variant'> {
      */
     title: ReactNode;
     /**
-     * Optional supporting description text. When provided, shows a larger tooltip
-     * with a heading + body hierarchy: title (13px semibold) above a muted
-     * description (12px medium).
+     * Optional supporting description text. When provided, shows the title
+     * (semibold) above a muted description (regular weight).
      * @default undefined
      */
     description?: string;
@@ -3111,7 +3110,7 @@ interface ModTooltipProps extends Omit<TooltipProps, 'title' | 'variant'> {
  * - 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
  */
 declare const ModTooltip: {
     ({ variant, title, description, children, arrow, placement, ...props }: ModTooltipProps): react_jsx_runtime.JSX.Element;

package/dist/index.esm.js

@@ -4709,29 +4709,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 = styled(({ className, ...props }) => 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.
         [`& .${tooltipClasses.tooltip}`]: {
             backgroundColor: variantStyles.backgroundColor,
             color: variantStyles.color,
-            fontSize: typography.fontSize.xs,
-            fontWeight: typography.fontWeight.medium,
-            lineHeight: hasDescription ? 1.5 : 1,
-            borderRadius: hasDescription ? borderRadius.s : borderRadius.xS,
-            padding: hasDescription ? spacing.spacing_1_1_2 : `0 ${spacing.spacing_1}px`,
-            ...(hasDescription && {
-                maxWidth: 296,
-            }),
-            ...(!hasDescription && {
-                height: spacing.spacing_3_1_4,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-            }),
+            ...semanticTypography.tooltip,
+            borderRadius: borderRadius.s,
+            padding: `${spacing.spacing_1}px ${spacing.spacing_1_1_2}px`,
             boxShadow: `${shadows.neutral.medium.x}px ${shadows.neutral.medium.y}px ${shadows.neutral.medium.blur}px ${shadows.neutral.medium.spread}px ${shadows.neutral.medium.shadow}`,
         },
         // Style the arrow
@@ -4751,18 +4741,17 @@ const StyledTooltip = styled(({ className, ...props }) => jsx(Tooltip, { ...prop
  * - 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 ? (jsxs(Stack, { sx: { gap: 0.5 }, children: [jsx(Typography, { sx: { fontSize: typography.fontSize.caption, fontWeight: typography.fontWeight.semiBold }, children: title }), jsx(Typography, { sx: {
-                    fontSize: typography.fontSize.xs,
-                    fontWeight: typography.fontWeight.medium,
-                    opacity: 0.75,
-                }, children: description })] })) : (title);
-    return (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 ? (jsxs(Stack, { sx: { gap: `${spacing.spacing_1_4}px` }, children: [jsx(Typography, { variant: "inherit", sx: { fontWeight: typography.fontWeight.semiBold }, children: title }), jsx(Typography, { variant: "inherit", children: description })] })) : (jsx(Typography, { variant: "inherit", sx: { fontWeight: typography.fontWeight.semiBold }, children: title }));
+    return (jsx(StyledTooltip, { variant: variant, title: titleContent, arrow: arrow, placement: placement, ...props, children: children }));
 };
 ModTooltip.displayName = 'ModTooltip';
 
@@ -5800,6 +5789,13 @@ const StyledTab = styled(MuiTab)(({ theme }) => ({
     lineHeight: '1.5rem',
     color: 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.
+    [`& .${chipClasses.root}`]: {
+        color: semanticColors.color.text.secondary,
+    },
     [`&.${tabClasses.selected}`]: {
         color: semanticColors.color.text.tabActive,
         fontWeight: typography.fontWeight.semiBold,
@@ -5825,6 +5821,9 @@ const StyledTab = styled(MuiTab)(({ theme }) => ({
         color: semanticColors.button.fgDisabled,
         cursor: 'not-allowed',
         pointerEvents: 'auto',
+        [`& .${chipClasses.root}`]: {
+            color: semanticColors.color.text.tabDisabled,
+        },
         '&:hover': {
             backgroundColor: 'transparent',
         },