fix: both foundations and semantic colors (from style guide) can be referenced

Author: oli-hivemq

testing/src/views/Colors.tsx

@@ -4,7 +4,7 @@ import * as colors from '@/../../theme/src/foundations/colors'
 const BORDER_WIDTH_IN_PIXEL = 2
 
 export function Colors({withText = false}: {withText?: boolean}) {
-  const ELEMENT_WIDTH = (withText ? 150 : 50) - BORDER_WIDTH_IN_PIXEL
+  const ELEMENT_WIDTH = (withText ? 100 : 50) - BORDER_WIDTH_IN_PIXEL
 
   return (
     <>
@@ -28,8 +28,8 @@ export function Colors({withText = false}: {withText?: boolean}) {
                       </div>
                       {withText && (
                         <div>
-                          <Text fontFamily="monospace">{_key}.{weight}</Text>
-                          <Text fontFamily="monospace" color={colors.neutrals['500']}>{colorValue}</Text>
+                          <Text fontFamily="monospace" fontSize="xs">{_key}.{weight}</Text>
+                          <Text fontFamily="monospace" fontSize="xs" color={colors.neutrals['500']}>{colorValue}</Text>
                         </div>
                       )}
                     </VStack>

theme/src/main.ts

@@ -6,6 +6,7 @@ import { mode } from '@chakra-ui/theme-tools'
 import { buttonTheme } from './components/button'
 import { headingTheme } from './components/headings'
 
+import * as colors from './foundations/colors'
 import semanticColors from './style-guide/computedSemanticColors'
 
 export const fonts = {
@@ -31,6 +32,7 @@ export const components = {
 export const theme = extendBaseTheme({
   fonts,
   colors: {
+    ...colors,
     ...semanticColors
   },
   styles,