v6 tooltips in the new paradigm

src/themes/classic/components/index.js

@@ -3,11 +3,13 @@ import Button from './button'
 import Code from './code'
 import Pane from './pane'
 import Select from './select'
+import Tooltip from './tooltip'
 
 export default {
   Alert,
   Button,
   Code,
   Pane,
-  Select
+  Select,
+  Tooltip
 }

src/themes/classic/components/tooltip.js

@@ -0,0 +1,24 @@
+const baseStyle = {
+  paddingY: 8,
+  paddingX: 16,
+  borderRadius: 'radii.1',
+  elevation: 'shadows.3'
+}
+
+const appearances = {
+  card: {
+    backgroundColor: 'white'
+  },
+  default: {
+    color: 'white',
+    backgroundColor: 'palette.neutral.base'
+  }
+}
+
+const sizes = {}
+
+export default {
+  baseStyle,
+  appearances,
+  sizes
+}

src/themes/default/components/index.js

@@ -3,11 +3,13 @@ import Button from './button'
 import Code from './code'
 import Pane from './pane'
 import Select from './select'
+import Tooltip from './tooltip'
 
 export default {
   Alert,
   Button,
   Code,
   Pane,
-  Select
+  Select,
+  Tooltip
 }

src/themes/default/components/tooltip.js

@@ -0,0 +1,25 @@
+const baseStyle = {
+  paddingY: 8,
+  paddingX: 16,
+  maxWidth: 240,
+  borderRadius: 'radii.2',
+  elevation: 'shadows.3'
+}
+
+const appearances = {
+  card: {
+    backgroundColor: 'white'
+  },
+  default: {
+    color: 'white',
+    backgroundColor: 'colors.gray800'
+  }
+}
+
+const sizes = {}
+
+export default {
+  baseStyle,
+  appearances,
+  sizes
+}

src/tooltip/src/TooltipStateless.js

@@ -2,13 +2,22 @@ import React, { memo, forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import { Pane } from '../../layers'
 import { Paragraph } from '../../typography'
-import useTooltipStyle from '../../theme/src/hooks/useTooltipStyle'
+import useStyleConfig from '../../hooks/use-style-config'
+
+const pseudoSelectors = {}
+const internalStyles = {}
 
 const TooltipStateless = memo(
   forwardRef(function TooltipStateless(props, ref) {
     const { children, appearance, ...restProps } = props
-    console.log(appearance)
-    const { color, ...themedProps } = useTooltipStyle(appearance)
+    const { ...boxProps } = useStyleConfig(
+      'Tooltip',
+      { appearance },
+      pseudoSelectors,
+      internalStyles
+    )
+
+    const { color, ...themedProps } = boxProps
 
     let child
     if (typeof children === 'string') {
@@ -22,13 +31,7 @@ const TooltipStateless = memo(
     }
 
     return (
-      <Pane
-        ref={ref}
-        borderRadius={8}
-        maxWidth={240}
-        {...themedProps}
-        {...restProps}
-      >
+      <Pane ref={ref} {...themedProps} {...restProps}>
         {child}
       </Pane>
     )