Merge pull request #2324 from braaar/develop

fix: show color hex value as swatch title

Author: hasparus

packages/style-guide/package.json

@@ -11,6 +11,7 @@
   "scripts": {},
   "dependencies": {
     "@theme-ui/presets": "workspace:^",
+    "@theme-ui/color": "workspace:^",
     "@types/color": "^3.0.3",
     "color": "^3.1.2",
     "lodash.get": "^4.4.2"

packages/style-guide/src/ColorSwatch.tsx

@@ -1,6 +1,7 @@
 /** @jsx jsx */
+import { getColor } from '@theme-ui/color'
 import { ComponentProps } from 'react'
-import { jsx, get, ResponsiveStyleValue } from 'theme-ui'
+import { jsx, ResponsiveStyleValue } from 'theme-ui'
 import { toHex } from './color'
 import { useTheme } from './context'
 
@@ -17,8 +18,8 @@ export const ColorSwatch = ({
   label = true,
   ...props
 }: ColorSwatchProps) => {
-  const { colors } = useTheme()!
-  const value = get(colors!, color)
+  const theme = useTheme()!
+  const value = getColor(theme, color)
   return (
     <div {...props} title={`${toHex(value)}`}>
       <div