fix: export colors, components, fonts, semanticTokens and styles (#28)

hivemq · Sep 5, 2024 · 250e34c · 250e34c
1 parent ef9896f
commit 250e34c
Show file tree

Hide file tree

Showing 10 changed files with 21 additions and 16 deletions.
diff --git a/testing/src/App.tsx b/testing/src/App.tsx
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import { Box, ChakraBaseProvider, Heading } from '@chakra-ui/react'
-import { theme } from '../../theme/src/main'
+import theme from '../../theme/src/main'
 
 import { Alerts } from '@/views/Alerts.tsx'
 import { Buttons } from '@/views/Buttons'

diff --git a/testing/src/main.tsx b/testing/src/main.tsx
@@ -19,7 +19,7 @@ import { ChakraProvider, ColorModeScript } from '@chakra-ui/react'
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { bootstrap } from 'safetest/react'
-import { theme } from '../../theme/src/main'
+import theme from '../../theme/src/main'
 
 // biome-ignore lint/style/noNonNullAssertion: <explanation>
 const root = ReactDOM.createRoot(document.getElementById('root')!)

diff --git a/testing/src/views/Alerts.safetest.tsx b/testing/src/views/Alerts.safetest.tsx
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import { ChakraBaseProvider } from '@chakra-ui/react'
-import { theme } from '@hivemq/ui-theme'
+import theme from '@hivemq/ui-theme'
 import { render } from 'safetest/react'
 import { describe, expect, it } from 'safetest/vitest'
 

diff --git a/testing/src/views/Buttons.safetest.tsx b/testing/src/views/Buttons.safetest.tsx
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import { ChakraBaseProvider } from '@chakra-ui/react'
-import { theme } from '@hivemq/ui-theme'
+import theme from '@hivemq/ui-theme'
 import { render } from 'safetest/react'
 import { describe, expect, it } from 'safetest/vitest'
 

diff --git a/testing/src/views/Colors.safetest.tsx b/testing/src/views/Colors.safetest.tsx
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import { ChakraBaseProvider } from '@chakra-ui/react'
-import { theme } from '@hivemq/ui-theme'
+import theme from '@hivemq/ui-theme'
 import { render } from 'safetest/react'
 import { describe, expect, it } from 'safetest/vitest'
 

diff --git a/testing/src/views/Headings.safetest.tsx b/testing/src/views/Headings.safetest.tsx
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import { ChakraBaseProvider } from '@chakra-ui/react'
-import { theme } from '@hivemq/ui-theme'
+import theme from '@hivemq/ui-theme'
 import { render } from 'safetest/react'
 import { describe, expect, it } from 'safetest/vitest'
 

diff --git a/testing/src/views/Links.safetest.tsx b/testing/src/views/Links.safetest.tsx
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import { ChakraBaseProvider } from '@chakra-ui/react'
-import { theme } from '@hivemq/ui-theme'
+import theme from '@hivemq/ui-theme'
 import { render } from 'safetest/react'
 import { describe, expect, it } from 'safetest/vitest'
 

diff --git a/testing/src/views/SemanticColors.safetest.tsx b/testing/src/views/SemanticColors.safetest.tsx
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import { ChakraBaseProvider } from '@chakra-ui/react'
-import { theme } from '@hivemq/ui-theme'
+import theme from '@hivemq/ui-theme'
 import { render } from 'safetest/react'
 import { describe, expect, it } from 'safetest/vitest'
 

diff --git a/testing/src/views/Texts.safetest.tsx b/testing/src/views/Texts.safetest.tsx
@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import { ChakraBaseProvider } from '@chakra-ui/react'
-import { theme } from '@hivemq/ui-theme'
+import theme from '@hivemq/ui-theme'
 import { render } from 'safetest/react'
 import { describe, expect, it } from 'safetest/vitest'
 

diff --git a/theme/src/main.ts b/theme/src/main.ts
@@ -24,14 +24,14 @@ import { fontSizes, textTheme } from './components/text'
 import * as colors from './foundations/colors'
 import * as semanticColors from './style-guide/semanticColors'
 
-const fonts = {
+export const fonts = {
   heading: "'Raleway', 'Roboto', 'Segoe UI', 'sans-serif'",
   body: "'Roboto', 'Segoe UI', 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', 'Arial', 'sans-serif', 'system-ui', '-apple-system'",
   monospace:
     "'Roboto Mono', 'IntelOne Mono', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace'",
 }
 
-const styles = {
+export const styles = {
   global: (_props: StyleFunctionProps) => ({
     // override the default values with our semantic tokens
     body: {
@@ -48,15 +48,20 @@ const styles = {
   }),
 } as const
 
-const components = {
+export const components = {
   Alert: alertTheme,
   Button: buttonTheme,
   Heading: headingTheme,
   Link: linkTheme,
   Text: textTheme,
 } as const
 
-export const theme = extendBaseTheme({
+export { colors }
+export const semanticTokens = {
+  colors: semanticColors,
+}
+
+const theme = extendBaseTheme({
   config: {
     initialColorMode: 'light',
     useSystemColorMode: false,
@@ -67,8 +72,8 @@ export const theme = extendBaseTheme({
   colors: {
     ...colors,
   },
-  semanticTokens: {
-    colors: semanticColors,
-  },
+  semanticTokens,
   components,
 })
+
+export default theme