From 250e34c16dd374e998053c82049caa0a40e14632 Mon Sep 17 00:00:00 2001 From: Oli Frebourg <128059569+oli-hivemq@users.noreply.github.com> Date: Thu, 5 Sep 2024 10:05:40 +0200 Subject: [PATCH] fix: export colors, components, fonts, semanticTokens and styles (#28) --- testing/src/App.tsx | 2 +- testing/src/main.tsx | 2 +- testing/src/views/Alerts.safetest.tsx | 2 +- testing/src/views/Buttons.safetest.tsx | 2 +- testing/src/views/Colors.safetest.tsx | 2 +- testing/src/views/Headings.safetest.tsx | 2 +- testing/src/views/Links.safetest.tsx | 2 +- testing/src/views/SemanticColors.safetest.tsx | 2 +- testing/src/views/Texts.safetest.tsx | 2 +- theme/src/main.ts | 19 ++++++++++++------- 10 files changed, 21 insertions(+), 16 deletions(-) diff --git a/testing/src/App.tsx b/testing/src/App.tsx index a307a27..e4cebd4 100644 --- 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 index c5b9106..f46a683 100644 --- 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: const root = ReactDOM.createRoot(document.getElementById('root')!) diff --git a/testing/src/views/Alerts.safetest.tsx b/testing/src/views/Alerts.safetest.tsx index 78d0671..220d867 100644 --- 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 index ae764b6..02f54c5 100644 --- 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 index 1a72842..8bb1790 100644 --- 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 index 9afc0a4..fc4fdd6 100644 --- 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 index 74f64ff..1d204f6 100644 --- 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 index fc7a76a..b7a9b4e 100644 --- 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 index 1f0b91b..9b1ae22 100644 --- 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 index 400b922..c8c1778 100644 --- 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,7 +48,7 @@ const styles = { }), } as const -const components = { +export const components = { Alert: alertTheme, Button: buttonTheme, Heading: headingTheme, @@ -56,7 +56,12 @@ const components = { 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