Tooltip uses theme slots for background, type and link (#988)

Author: Luke Bowerman

CHANGELOG.md

@@ -31,6 +31,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - `Badge` - `default` intent is now `key`
 - `CheckboxGroup` and `RadioGroup` `name` is now optional
 - Updated `LookerLogo` and `LogoRings` to match new branding
+- `Tooltip` now uses `keyAccent` for link color
 
 ### Fixed
 

packages/components/src/Tooltip/Tooltip.tsx

@@ -214,10 +214,10 @@ export function useTooltip({
           ref={ref}
           style={style}
           zIndex={CustomizableTooltipAttributes.zIndex}
-          backgroundColor="palette.charcoal600"
+          backgroundColor="inverse"
           borderRadius="medium"
           boxShadow={3}
-          color="palette.charcoal000"
+          color="inverseText"
           {...surfaceStyles}
         >
           <TooltipContent

packages/components/src/Tooltip/TooltipContent.tsx

@@ -44,12 +44,16 @@ export const TooltipContent = styled(Paragraph).attrs(
   overflow-wrap: anywhere;
 
   ${Link} {
-    color: ${(props) => props.theme.colors.palette.blue200};
+    color: ${(props) => props.theme.colors.keyAccent};
     text-decoration: underline;
 
     &:focus,
     &:hover {
-      color: ${(props) => props.theme.colors.palette.blue100};
+      color: ${(props) => props.theme.colors.keySubtle};
+    }
+
+    &:active {
+      color: ${(props) => props.theme.colors.keyText};
     }
   }
 `

packages/design-tokens/src/index.ts

@@ -32,7 +32,7 @@ export * from './GlobalStyle'
 /**
  * @TODO - This should not be directly exported or utilized. It should be consumed via theme.
  */
-export { palette } from './tokens'
+export { palette } from './tokens/color/palette'
 
 // Useful external helpers
 export * from './customizeable_attributes'

packages/design-tokens/src/theme.ts

@@ -50,13 +50,13 @@ import {
   fontSizes,
   fontWeights,
   lineHeights,
-  palette,
   radii,
   colors,
   shadows,
   space,
   transitions,
 } from './tokens'
+import { palette } from './tokens/color/palette'
 
 interface ThemeColors extends Colors {
   palette: Palette

packages/design-tokens/src/tokens/color/index.ts

@@ -24,5 +24,56 @@
 
  */
 
-export * from './palette'
-export * from './colors'
+import { IntentColors, SurfaceColors } from '../../system/color/specifiable'
+import { CoreColors, Colors, SpecifiableColors } from '../../system'
+import { palette } from './palette'
+import { fallbackBlends, fallbackStateful } from './fallbacks'
+
+const {
+  blue500,
+  blue600,
+  charcoal400,
+  charcoal800,
+  green500,
+  purple400,
+  red500,
+  yellow500,
+  white,
+} = palette
+
+/* eslint-disable sort-keys-fix/sort-keys-fix */
+
+const defaultCoreColors: CoreColors = {
+  background: white,
+  text: charcoal800,
+  key: purple400,
+}
+
+const generateSurfaceColors = (coreColors: CoreColors): SurfaceColors => {
+  return {
+    field: coreColors.background,
+    inverse: coreColors.text,
+    inverseText: coreColors.background,
+  }
+}
+
+const defaultIntentColors: IntentColors = {
+  link: blue600,
+  critical: red500,
+  warn: yellow500,
+  neutral: charcoal400,
+  positive: green500,
+  inform: blue500,
+}
+
+const specifiableColors: SpecifiableColors = {
+  ...defaultCoreColors,
+  ...generateSurfaceColors(defaultCoreColors),
+  ...defaultIntentColors,
+}
+
+export const colors: Colors = {
+  ...specifiableColors,
+  ...fallbackBlends,
+  ...fallbackStateful,
+}