@moises.ai/design-system 3.6.6 → 3.6.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "3.6.6",
+  "version": "3.6.7",
   "description": "Design System package based on @radix-ui/themes with custom defaults",
   "private": false,
   "type": "module",

package/src/components/DataTable/DataTable.module.css

@@ -54,11 +54,6 @@
   background-color: var(--neutral-1) !important;
 }
 
-.DataTable :global(.rt-TableBody) {
-  position: relative;
-  top: var(--datatable-sticky-body-offset, 0px) !important;
-}
-
 
 .DataTable :global(.rt-TableHeader) :global(.rt-TableRow) {
   background-color: var(--neutral-1) !important;
@@ -79,7 +74,7 @@
 .DataTable :global(.rt-TableBody)::before {
   content: '';
   display: block;
-  height: 16px;
+  height: calc(16px + var(--datatable-sticky-body-offset, 0px));
   background-color: var(--neutral-1);
   pointer-events: none;
 }
@@ -357,4 +352,4 @@
   .dropdownTriggerWrapperIcon {
     opacity: 1;
   }
-}
+}

package/src/components/Tooltip/Tooltip.jsx

@@ -1,4 +1,6 @@
 import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import { Text } from '../Text/Text'
+import { Theme } from '../theme/Theme'
 import styles from './Tooltip.module.css'
 import classNames from 'classnames'
 
@@ -39,25 +41,27 @@ export const Tooltip = ({
           {children}
         </TooltipPrimitive.Trigger>
         <TooltipPrimitive.Portal>
-          <TooltipPrimitive.Content
-            className={classNames(
-              styles.TooltipContent,
-              styles[`TooltipContent--${color}`]
-            )}
-            sideOffset={5}
-            {...restContentProps}
-          >
-            <span className={styles.TooltipText}>{content}</span>
-            {shortcut && (
-              <span className={classNames(
-                styles.TooltipShortcut,
-                styles[`TooltipShortcut--${color}`]
-              )}>
-                {shortcut}
-              </span>
-            )}
-            <TooltipPrimitive.Arrow className={styles.TooltipArrow} />
-          </TooltipPrimitive.Content>
+          <Theme asChild>
+            <TooltipPrimitive.Content
+              className={classNames(
+                styles.TooltipContent,
+                styles[`TooltipContent--${color}`]
+              )}
+              sideOffset={5}
+              {...restContentProps}
+            >
+              <Text size='1' className={styles.TooltipText}>{content}</Text>
+              {shortcut && (
+                <Text size='0' className={classNames(
+                  styles.TooltipShortcut,
+                  styles[`TooltipShortcut--${color}`]
+                )}>
+                  {shortcut}
+                </Text>
+              )}
+              <TooltipPrimitive.Arrow className={styles.TooltipArrow} />
+            </TooltipPrimitive.Content>
+          </Theme>
         </TooltipPrimitive.Portal>
       </TooltipPrimitive.Root>
     </TooltipPrimitive.Provider>

package/src/components/Tooltip/Tooltip.module.css

@@ -1,15 +1,9 @@
 .TooltipContent {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 2px;
   padding: 6px 12px;
   text-align: center;
-  font-family: var(--Typography-Font-family-text, "Articulat CF");
-  font-size: var(--Typography-Font-size-1, 12px);
-  font-style: normal;
-  font-weight: 400;
-  line-height: var(--Typography-Line-height-1, 16px);
-  letter-spacing: var(--Typography-Letter-spacing-1, 0.04px);
   z-index: 9999;
   animation-duration: 0.15s;
   animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
@@ -78,16 +72,16 @@
 
 /* White variant */
 .TooltipContent--white {
-  border-radius: var(--Radius-1, 3px);
-  background: var(--Colors-Neutral-Neutral-12, #EDEEF0);
-  color: var(--Colors-Neutral-Neutral-1, #111113);
+  border-radius: 3px;
+  background: #EDEEF0;
+  color: #111113;
 }
 
 /* Gray variant */
 .TooltipContent--gray {
-  border-radius: var(--Radius-1, 3px);
-  background: var(--Colors-Neutral-Neutral-4, #272A2D);
-  color: var(--Colors-Neutral-Neutral-Alpha-12, rgba(252, 253, 255, 0.94));
+  border-radius: 3px;
+  background: #272A2D;
+  color: rgba(252, 253, 255, 0.94);
 }
 
 .TooltipText {
@@ -95,31 +89,25 @@
 }
 
 .TooltipShortcut {
-  font-family: var(--Typography-Font-family-text, "Articulat CF");
-  font-size: var(--Typography-Font-size-0, 11px);
-  font-style: normal;
-  font-weight: 400;
-  line-height: var(--Typography-Line-height-0, 11px);
-  letter-spacing: var(--Typography-Letter-spacing-0, 0);
   white-space: nowrap;
 }
 
 /* White shortcut */
 .TooltipShortcut--white {
-  color: var(--Colors-Neutral-Neutral-8, #5A6169);
+  color: #5A6169;
 }
 
 /* Gray shortcut */
 .TooltipShortcut--gray {
-  color: var(--Colors-Neutral-Neutral-Alpha-10, rgba(229, 237, 253, 0.48));
+  color: rgba(229, 237, 253, 0.48);
 }
 
 .TooltipArrow {
-  fill: var(--Colors-Neutral-Neutral-4, #272A2D);
+  fill: #272A2D;
 }
 
 .TooltipContent--white .TooltipArrow {
-  fill: var(--Colors-Neutral-Neutral-12, #EDEEF0);
+  fill: #EDEEF0;
 }
 
 .TooltipContent {

package/src/components/Tooltip/Tooltip.stories.jsx

@@ -28,6 +28,7 @@ export const GrayVariant = {
   args: {
     content: 'Tooltip',
     color: 'gray',
+    open: true,
     children: <Button>Hover me</Button>,
   },
 }
@@ -43,6 +44,7 @@ export const WhiteVariant = {
 export const WithShortcutGray = {
   args: {
     content: 'Tooltip',
+    open: true,
     shortcut: '⌘ C',
     color: 'gray',
     children: <Button>Hover me</Button>,