chore(ui-kit): migrate to radix-ui/colors

app/storybook/.storybook/global.css

@@ -28,3 +28,7 @@ a.showCodeLink {
   font-size: 0.9em;
   color: #2e90fa;
 }
+
+.themeProvider {
+  --accent-surface: #00ff00;
+}

app/storybook/.storybook/preview.tsx

@@ -2,16 +2,17 @@ import { Source } from '@storybook/blocks'
 import type { Preview, StoryContext } from '@storybook/react'
 import React from 'react'
 import withAxiosDecorator from 'storybook-axios'
-import { ThemeProvider, useTheme } from '../../../packages/ui-kit/src/components/ThemeProvider'
+import { ThemeProvider, ThemeProviderProps, useTheme } from '../../../packages/ui-kit/src/components/ThemeProvider'
 import { QueryClient, QueryClientProvider } from '../../../packages/ui-kit/src/graphql'
+import { accentColors } from '../../../packages/ui-kit/src/themes'
 import axiosInstance from '../src/axios'
 import { parseStorySourceCode } from './blocks/SourceCode'
 import './global.css'
 
 const GlobalStyles = () => {
   const theme = useTheme()
   if (document && theme) {
-    document.body.style.setProperty('--bg-color', theme.backgroundSecondary as string)
+    document.body.style.setProperty('--bg-color', theme.getVar('--accent-1'))
   }
   return null
 }
@@ -25,7 +26,9 @@ const withThemeProvider = (Story: React.FC, context: StoryContext) => {
 
   return (
     <ThemeProvider
-      baseTheme={context.globals.theme}
+      accentColor={context.globals.accentColor}
+      appearance={context.globals.appearance}
+      // className="themeProvider"
       // components={{
       //   Button: (props) => <MyCustomButton {...props} />
       // }}
@@ -95,18 +98,28 @@ const preview: Preview = {
     }
   },
   globalTypes: {
-    theme: {
-      name: 'Theme',
-      description: 'Global theme for components',
-      defaultValue: 'lightTheme',
+    appearance: {
+      name: 'Appearance',
+      description: 'Global theme appearance',
+      defaultValue: 'light',
       toolbar: {
-        icon: 'circlehollow',
+        icon: 'mirror',
         items: [
-          { value: 'lightTheme', icon: 'circlehollow', title: 'light' },
-          { value: 'darkTheme', icon: 'circle', title: 'dark' }
+          { value: 'light', title: 'Light appearance' },
+          { value: 'dark', title: 'Dark appearance' }
         ],
         showName: true
       }
+    },
+    accentColor: {
+      name: 'Accent color',
+      description: 'Global theme accent color',
+      defaultValue: 'blue',
+      toolbar: {
+        icon: 'circle',
+        items: accentColors.map((color) => ({ value: color, title: color })),
+        showName: true
+      }
     }
   },
   decorators: [

app/storybook/documentation/ui-kit/DefaultComponents.mdx

@@ -59,8 +59,8 @@ Or you can customize the fallbacks on a per-component basis.
           errorFallback={({ theme }) => (
             <div
               style={{
-                border: \`1px solid \${theme?.borderError}\`,
-                color: theme?.textErrorPrimary,
+                border: \`1px solid \${theme?.getVar('--accent-a7')}\`,
+                color: theme?.getVar('--accent-a11'),
                 padding: '1rem'
               }}
             >

app/storybook/documentation/ui-kit/Theming.mdx

@@ -4,9 +4,6 @@ import { prettier } from '../../src/utils'
 import { SourceCode } from '../../.storybook/blocks/SourceCode'
 import * as ThemeProviderStories from '../../../../packages/ui-kit/src/components/ThemeProvider/ThemeProvider.stories'
 import rawThemesScss from '!!raw-loader!../../../../packages/ui-kit/src/themes/themes.module.scss'
-import rawCommonScss from '!!raw-loader!../../../../packages/ui-kit/src/themes/generated/_tokens.scss'
-import rawLightThemeScss from '!!raw-loader!../../../../packages/ui-kit/src/themes/generated/_lightTheme.scss'
-import rawDarkThemeScss from '!!raw-loader!../../../../packages/ui-kit/src/themes/generated/_darkTheme.scss'
 
 <Meta title="Customization/Theming" />
 

packages/examples/dashboard/src/components/CounterConnected/CounterConnected.tsx

@@ -1,9 +1,8 @@
-import { Counter } from '@propeldata/ui-kit'
+import { Button, Counter } from '@propeldata/ui-kit'
 import React from 'react'
 import { ConnectedComponentProps } from '../../shared.types'
 
 export const CounterConnected = ({ envs: { REACT_APP_METRIC_UNIQUE_NAME_1 }, timeRange }: ConnectedComponentProps) => {
-  const [fontColor, setFontColor] = React.useState('#101828')
   const [refetchInterval, setRefetchInterval] = React.useState<number | undefined>(undefined)
 
   const handleSwitchRefetchInterval = () => {
@@ -13,7 +12,7 @@ export const CounterConnected = ({ envs: { REACT_APP_METRIC_UNIQUE_NAME_1 }, tim
   return (
     <div className="m-6">
       <h2 className="text-2xl">Counter Connected</h2>
-      <div className="my-5">
+      <div className="my-4">
         <Counter
           card
           query={{
@@ -22,19 +21,13 @@ export const CounterConnected = ({ envs: { REACT_APP_METRIC_UNIQUE_NAME_1 }, tim
             refetchInterval,
             retry: false
           }}
-          style={{ color: fontColor }}
+          style={{ color: 'var(--accent-11)' }}
         />
       </div>
       <div className="flex items-center gap-2 mt-1">
-        <input
-          className="border-2 p-1 h-9"
-          type="color"
-          onChange={(event) => setFontColor(event.target.value)}
-          value={fontColor}
-        />
-        <button className="border-2 p-1 h-9" onClick={handleSwitchRefetchInterval}>
+        <Button size="small" onClick={handleSwitchRefetchInterval}>
           Refetch Interval: {refetchInterval ? 'On 1000ms' : 'Off'}
-        </button>
+        </Button>
       </div>
     </div>
   )

packages/examples/dashboard/src/components/CounterStatic/CounterStatic.tsx

@@ -1,4 +1,4 @@
-import { Counter } from '@propeldata/ui-kit'
+import { Button, Counter } from '@propeldata/ui-kit'
 import React from 'react'
 import { useFakeData } from '../../hooks/useFakeData'
 
@@ -12,8 +12,6 @@ const mockData2 = {
 
 export const CounterStatic = () => {
   const [mockData, setMockData] = React.useState(mockData1)
-  const [fontColor, setFontColor] = React.useState('#101828')
-
   const { data, isLoading, setIsLoading } = useFakeData(mockData)
 
   const handleReFetchMock = () => {
@@ -27,37 +25,25 @@ export const CounterStatic = () => {
   return (
     <div className="m-6">
       <h2 className="text-2xl">Counter Static</h2>
-      <div className="my-5">
+      <div className="my-4">
         <Counter
           renderEmpty={() => <div style={{ display: 'flex', flex: 1, alignItems: 'center', height: 67 }}>No Data</div>}
           card
           value={data?.value}
           loading={isLoading}
-          style={{ color: fontColor }}
+          style={{ color: 'var(--accent-11)' }}
         />
       </div>
       <div className="flex items-center gap-2 mt-1">
-        <button
-          className="border-2 p-1 h-9"
-          onClick={() => setMockData(mockData === mockData1 ? mockData2 : mockData1)}
-        >
+        <Button size="small" onClick={() => setMockData(mockData === mockData1 ? mockData2 : mockData1)}>
           Switch mock data
-        </button>
-        <input
-          className="border-2 p-1 h-9"
-          type="color"
-          onChange={(event) => setFontColor(event.target.value)}
-          value={fontColor}
-        />
-        <button className="border-2 p-1 h-9" onClick={handleReFetchMock}>
+        </Button>
+        <Button size="small" onClick={handleReFetchMock}>
           Refetch Mock
-        </button>
-        <button
-          className="border-2 p-1 h-9"
-          onClick={() => setMockData(mockData.value === '' ? mockData1 : { value: '' })}
-        >
+        </Button>
+        <Button size="small" onClick={() => setMockData(mockData.value === '' ? mockData1 : { value: '' })}>
           No data: {mockData.value === '' ? 'On' : 'Off'}
-        </button>
+        </Button>
       </div>
     </div>
   )