@furystack/shades-common-components 3.5.3 → 3.6.1

package/src/components/data-grid/body.tsx

@@ -8,7 +8,7 @@ import { DataGridRow } from './data-grid-row'
 export interface DataGridBodyProps<T> {
   service: CollectionService<T>
   onRowClick?: (row: T, ev: MouseEvent) => void
-  onRowDoubleClick?: (entry: T) => void
+  onRowDoubleClick?: (entry: T, ev: MouseEvent) => void
   columns: Array<keyof T>
   rowComponents?: DataRowCells<T>
   style?: Partial<CSSStyleDeclaration>
@@ -16,6 +16,8 @@ export interface DataGridBodyProps<T> {
   unfocusedRowStyle?: Partial<CSSStyleDeclaration>
   selectedRowStyle?: Partial<CSSStyleDeclaration>
   unselectedRowStyle?: Partial<CSSStyleDeclaration>
+  emptyComponent?: JSX.Element
+  loaderComponent?: JSX.Element
 }
 
 export interface DataGridBodyState<T> {
@@ -44,13 +46,13 @@ export const DataGridBody: <T>(props: DataGridBodyProps<T>, children: ChildrenLi
       return (
         <div style={{ display: 'flex', height: '100%', justifyContent: 'center', alignItems: 'center', width: '100%' }}>
           {/* TODO: Skeleton */}
-          <Loader style={{ height: '128px', width: '128px' }} />
+          {props.loaderComponent || <Loader style={{ height: '128px', width: '128px' }} />}
         </div>
       )
     }
 
     if (!state.data?.length) {
-      return <div> - No Data - </div>
+      return props.emptyComponent || <div> - No Data - </div>
     }
 
     return (
@@ -62,6 +64,7 @@ export const DataGridBody: <T>(props: DataGridBodyProps<T>, children: ChildrenLi
             service={props.service}
             rowComponents={props.rowComponents}
             onRowClick={props.onRowClick}
+            onRowDoubleClick={props.onRowDoubleClick}
             focusedRowStyle={props.focusedRowStyle}
             unfocusedRowStyle={props.unfocusedRowStyle}
             selectedRowStyle={props.selectedRowStyle}

package/src/components/data-grid/data-grid-row.tsx

@@ -9,6 +9,7 @@ export interface DataGridRowProps<T> {
   service: CollectionService<T>
   rowComponents?: DataRowCells<T>
   onRowClick?: (row: T, event: MouseEvent) => void
+  onRowDoubleClick?: (row: T, event: MouseEvent) => void
   focusedRowStyle?: Partial<CSSStyleDeclaration>
   selectedRowStyle?: Partial<CSSStyleDeclaration>
   unfocusedRowStyle?: Partial<CSSStyleDeclaration>
@@ -100,7 +101,11 @@ export const DataGridRow: <T>(props: DataGridRowProps<T>, children: ChildrenList
     return (
       <>
         {columns.map((column) => (
-          <td style={{ padding: '0.5em' }} onclick={(ev) => props.onRowClick?.(entry, ev)}>
+          <td
+            style={{ padding: '0.5em' }}
+            onclick={(ev) => props.onRowClick?.(entry, ev)}
+            ondblclick={(ev) => props.onRowDoubleClick?.(entry, ev)}
+          >
             {rowComponents?.[column]?.(entry, state) || rowComponents?.default?.(entry, state) || (
               <span>{entry[column]}</span>
             )}

package/src/components/data-grid/data-grid.tsx

@@ -56,23 +56,24 @@ export interface DataGridProps<T> {
    * Optional style to attach to grid rows when the row is not selected
    */
   unselectedRowStyle?: Partial<CSSStyleDeclaration>
+
+  /**
+   * An optional component to show if there are no rows to display
+   */
+  emptyComponent?: JSX.Element
+
+  /**
+   * An optional component to show while the data is loading
+   */
+  loaderComponent?: JSX.Element
 }
 
 export const DataGrid: <T>(props: DataGridProps<T>, children: ChildrenList) => JSX.Element<any, any> = Shade<
   DataGridProps<any>
 >({
   shadowDomName: 'shade-data-grid',
-  resources: ({ injector, element, props }) => {
-    const tp = injector.getInstance(ThemeProviderService)
+  resources: ({ element, props }) => {
     return [
-      tp.theme.subscribe((t) => {
-        const headers = element.querySelectorAll('th')
-        const { r, g, b } = tp.getRgbFromColorString(t.background.paper)
-        headers.forEach((header) => {
-          header.style.color = t.text.secondary
-          header.style.backgroundColor = `rgba(${r}, ${g}, ${b}, 0.3)`
-        })
-      }),
       new ClickAwayService(element, () => {
         props.service.hasFocus.setValue(false)
       }),
@@ -85,12 +86,10 @@ export const DataGrid: <T>(props: DataGridProps<T>, children: ChildrenList) => J
   },
   render: ({ props, injector }) => {
     const tp = injector.getInstance(ThemeProviderService)
-    const theme = tp.theme.getValue()
+    const { theme } = tp
 
-    const { r, g, b } = tp.getRgbFromColorString(theme.background.paper)
     const headerStyle: Partial<CSSStyleDeclaration> = {
-      backgroundColor: `rgba(${r}, ${g}, ${b}, 0.3)`,
-      backdropFilter: 'blur(10px)',
+      backdropFilter: 'blur(12px)',
       padding: '12px 0',
       color: theme.text.secondary,
       alignItems: 'center',
@@ -137,11 +136,14 @@ export const DataGrid: <T>(props: DataGridProps<T>, children: ChildrenList) => J
             service={props.service}
             rowComponents={props.rowComponents}
             onRowClick={(entry, ev) => props.service.handleRowClick(entry, ev)}
+            onRowDoubleClick={(entry) => props.service.handleRowDoubleClick(entry)}
             style={props.styles?.cell}
             focusedRowStyle={props.focusedRowStyle}
             selectedRowStyle={props.selectedRowStyle}
             unfocusedRowStyle={props.unfocusedRowStyle}
             unselectedRowStyle={props.unselectedRowStyle}
+            emptyComponent={props.emptyComponent}
+            loaderComponent={props.loaderComponent}
           />
         </table>
         <DataGridFooter service={props.service} />

package/src/components/data-grid/footer.tsx

@@ -9,16 +9,8 @@ export const DataGridFooter = Shade<{ service: CollectionService<any> }, { data:
   getInitialState: ({ props }) => ({
     data: props.service.data.getValue(),
   }),
-  constructed: ({ props, updateState, injector, element }) => {
-    const disposables = [
-      props.service.data.subscribe((data) => updateState({ data })),
-
-      injector.getInstance(ThemeProviderService).theme.subscribe((t) => {
-        const el = element.querySelector('div') as HTMLDivElement
-        el.style.color = t.text.secondary
-        el.style.background = t.background.paper
-      }),
-    ]
+  constructed: ({ props, updateState }) => {
+    const disposables = [props.service.data.subscribe((data) => updateState({ data }))]
 
     return () => disposables.forEach((d) => d.dispose())
   },
@@ -27,7 +19,7 @@ export const DataGridFooter = Shade<{ service: CollectionService<any> }, { data:
     const currentQuerySettings = props.service.querySettings.getValue()
     const currentPage = Math.ceil(currentQuerySettings.skip || 0) / (currentQuerySettings.top || 1)
     const currentEntriesPerPage = currentQuerySettings.top || Infinity
-    const theme = injector.getInstance(ThemeProviderService).theme.getValue()
+    const { theme } = injector.getInstance(ThemeProviderService)
 
     return (
       <div

package/src/components/grid.tsx

@@ -25,17 +25,8 @@ export type RowCells<T> = {
 
 export const Grid: <T>(props: GridProps<T>, children: ChildrenList) => JSX.Element<any, any> = Shade({
   shadowDomName: 'shade-grid',
-  resources: ({ injector, element }) => [
-    injector.getInstance(ThemeProviderService).theme.subscribe((t) => {
-      const headers = element.querySelectorAll('th')
-      headers.forEach((header) => {
-        header.style.color = t.text.secondary
-        header.style.background = t.background.paper
-      })
-    }),
-  ],
   render: ({ props, injector }) => {
-    const theme = injector.getInstance(ThemeProviderService).theme.getValue()
+    const { theme } = injector.getInstance(ThemeProviderService)
     const headerStyle: Partial<CSSStyleDeclaration> = {
       padding: '0 0.51em',
       backgroundColor: theme.background.paper,

package/src/components/inputs/input.tsx

@@ -1,7 +1,7 @@
 import type { PartialElement } from '@furystack/shades'
 import { Shade, createComponent, attachStyles } from '@furystack/shades'
 import { ThemeProviderService } from '../..'
-import type { Palette, Theme } from '../../services'
+import type { Palette } from '../../services'
 
 export interface TextInputProps extends PartialElement<HTMLInputElement> {
   /**
@@ -47,7 +47,6 @@ export interface TextInputProps extends PartialElement<HTMLInputElement> {
 }
 
 export type TextInputState = {
-  theme: Theme
   value: string
   focused: boolean
   validity: ValidityState
@@ -69,12 +68,12 @@ const getLabelStyle = ({
     justifyContent: 'space-between',
     fontSize: '10px',
     color: props.disabled
-      ? state.theme.text.disabled
+      ? themeProvider.theme.text.disabled
       : state.validity?.valid === false
-      ? state.theme.palette.error.main
+      ? themeProvider.theme.palette.error.main
       : state.focused
-      ? state.theme.text.primary
-      : state.theme.text.secondary,
+      ? themeProvider.theme.text.primary
+      : themeProvider.theme.text.secondary,
     marginBottom: '1em',
     padding: '1em',
     borderRadius: '5px',
@@ -83,8 +82,8 @@ const getLabelStyle = ({
         ? themeProvider
             .getRgbFromColorString(
               state.validity?.valid === false
-                ? state.theme.palette.error.main
-                : state.theme.palette[props.defaultColor || 'primary'].main,
+                ? themeProvider.theme.palette.error.main
+                : themeProvider.theme.palette[props.defaultColor || 'primary'].main,
             )
             .update('a', state.focused ? 0.1 : 0.2)
             .toString()
@@ -93,10 +92,10 @@ const getLabelStyle = ({
       props.variant === 'outlined' || props.variant === 'contained'
         ? `0 0 0 1px ${
             state.validity?.valid === false
-              ? state.theme.palette.error.main
+              ? themeProvider.theme.palette.error.main
               : state.focused
-              ? state.theme.palette[props.defaultColor || 'primary'].main
-              : state.theme.text.primary
+              ? themeProvider.theme.palette[props.defaultColor || 'primary'].main
+              : themeProvider.theme.text.primary
           }`
         : 'none',
     filter: props.disabled ? 'grayscale(100%)' : 'none',
@@ -109,15 +108,11 @@ const getLabelStyle = ({
 
 export const Input = Shade<TextInputProps, TextInputState>({
   shadowDomName: 'shade-input',
-  getInitialState: ({ injector, props }) => ({
-    theme: injector.getInstance(ThemeProviderService).theme.getValue(),
+  getInitialState: ({ props }) => ({
     value: props.value || '',
     focused: props.autofocus || false,
     validity: { valid: true } as ValidityState,
   }),
-  resources: ({ injector, updateState }) => [
-    injector.getInstance(ThemeProviderService).theme.subscribe((theme) => updateState({ theme })),
-  ],
   compareState: ({ newState, element, props, injector }) => {
     const themeProvider = injector.getInstance(ThemeProviderService)
     const label = element.querySelector('label') as HTMLLabelElement

package/src/components/inputs/text-area.tsx

@@ -1,6 +1,5 @@
 import type { PartialElement } from '@furystack/shades'
 import { createComponent, Shade } from '@furystack/shades'
-import type { Theme } from '../../services'
 import { ThemeProviderService } from '../../services'
 import { promisifyAnimation } from '../../utils'
 
@@ -12,23 +11,18 @@ export interface TextAreaProps extends PartialElement<HTMLTextAreaElement> {
 }
 
 export type TextAreaInputState = {
-  theme: Theme
   value?: string
 }
 
 export const TextArea = Shade<TextAreaProps, TextAreaInputState>({
   shadowDomName: 'shade-text-area',
-  getInitialState: ({ injector, props }) => ({
-    theme: injector.getInstance(ThemeProviderService).theme.getValue(),
+  getInitialState: ({ props }) => ({
     value: props.value,
   }),
-  resources: ({ injector, updateState }) => {
-    const themeProvider = injector.getInstance(ThemeProviderService)
-    return [themeProvider.theme.subscribe((theme) => updateState({ theme }))]
-  },
   render: ({ props, element, injector, getState }) => {
     const themeProvider = injector.getInstance(ThemeProviderService)
-    const { theme, value } = getState()
+    const { theme } = themeProvider
+    const { value } = getState()
     const { palette } = theme
 
     return (

package/src/components/loader.tsx

@@ -1,5 +1,4 @@
 import { Shade, createComponent } from '@furystack/shades'
-import { ThemeProviderService } from '../services'
 import { promisifyAnimation } from '../utils'
 
 interface LoaderProps {
@@ -15,14 +14,6 @@ interface LoaderProps {
 
 export const Loader = Shade<LoaderProps>({
   shadowDomName: 'shade-loader',
-  resources: ({ injector, element }) => [
-    injector.getInstance(ThemeProviderService).theme.subscribe((theme) => {
-      const el = element.firstElementChild
-      if (el) {
-        ;(el as HTMLElement).style.borderBottom = `15px solid ${theme.palette.primary.main}`
-      }
-    }, true),
-  ],
   render: ({ element, props }) => {
     element.style.display = 'inline-block'
     element.style.transformOrigin = 'center'

package/src/components/noty-list.tsx

@@ -42,7 +42,7 @@ export const NotyComponent = Shade<{ model: NotyModel; onDismiss: () => void }>(
   },
   render: ({ props, injector, element }) => {
     const themeProvider = injector.getInstance(ThemeProviderService)
-    const colors = themeProvider.theme.getValue().palette[props.model.type]
+    const colors = themeProvider.theme.palette[props.model.type]
     const headerTextColor = themeProvider.getTextColor(colors.dark)
     const textColor = themeProvider.getTextColor(colors.main)
 
@@ -51,8 +51,8 @@ export const NotyComponent = Shade<{ model: NotyModel; onDismiss: () => void }>(
       await promisifyAnimation(
         container,
         [
-          { opacity: '1', height: `${container?.scrollHeight || 0}px` },
-          { opacity: '0', height: '0px' },
+          { opacity: '1', height: `${container?.scrollHeight || 0}px`, margin: '8px 8px' },
+          { opacity: '0', height: '0px', margin: '0px 8px' },
         ],
         {
           fill: 'forwards',

package/src/components/paper.tsx

@@ -4,15 +4,7 @@ import { ThemeProviderService } from '../services/theme-provider-service'
 
 export const Paper = Shade<PartialElement<HTMLDivElement> & { elevation?: 1 | 2 | 3 }>({
   shadowDomName: 'shade-paper',
-  resources: ({ injector, element }) => {
-    const themeProvider = injector.getInstance(ThemeProviderService)
-    return [
-      themeProvider.theme.subscribe((newTheme) => {
-        ;(element.firstChild as HTMLDivElement).style.background = newTheme.background.paper
-        ;(element.firstChild as HTMLDivElement).style.color = themeProvider.theme.getValue().text.secondary
-      }),
-    ]
-  },
+
   render: ({ injector, props, children }) => {
     const themeProvider = injector.getInstance(ThemeProviderService)
     return (
@@ -21,8 +13,8 @@ export const Paper = Shade<PartialElement<HTMLDivElement> & { elevation?: 1 | 2
         style={{
           borderRadius: '3px',
           boxShadow: props.elevation ? `1px ${props.elevation}px ${props.elevation}px rgba(0,0,0,0.3)` : '',
-          backgroundColor: themeProvider.theme.getValue().background.paper,
-          color: themeProvider.theme.getValue().text.secondary,
+          backgroundColor: themeProvider.theme.background.paper,
+          color: themeProvider.theme.text.secondary,
           margin: '8px',
           padding: '6px 16px',
           ...props?.style,

package/src/components/tabs.tsx

@@ -19,7 +19,7 @@ export const Tabs = Shade<
 >({
   shadowDomName: 'shade-tabs',
   getInitialState: ({ props }) => ({ activeIndex: props.activeTab || 0 }),
-  constructed: ({ injector, updateState, element }) => {
+  constructed: ({ injector, updateState }) => {
     const subscriptions = [
       injector.getInstance(LocationService).onLocationChanged.subscribe(() => {
         const { hash } = location
@@ -28,20 +28,12 @@ export const Tabs = Shade<
           page && updateState({ activeIndex: page })
         }
       }, true),
-      injector.getInstance(ThemeProviderService).theme.subscribe((t) => {
-        const headers = element.querySelectorAll('.shade-tabs-headers') as unknown as HTMLDivElement[]
-        headers.forEach((header) => {
-          const isActive = header.classList.contains('active')
-          header.style.backgroundColor = isActive ? t.background.paper : t.background.default
-          header.style.color = isActive ? t.text.primary : t.text.secondary
-        })
-      }),
     ]
     return () => subscriptions.forEach((s) => s.dispose())
   },
   render: ({ props, getState, updateState, injector }) => {
     const themeProvider = injector.getInstance(ThemeProviderService)
-    const theme = themeProvider.theme.getValue()
+    const { theme } = themeProvider
     return (
       <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', ...props.containerStyle }}>
         <div

package/src/services/collection-service.ts

@@ -12,6 +12,40 @@ export type EntryLoader<T> = <TFields extends Array<keyof T>>(
   searchOptions: FindOptions<T, TFields>,
 ) => Promise<CollectionData<PartialResult<T, TFields>>>
 
+export interface CollectionServiceOptions<T> {
+  /**
+   * A method used to retrieve the entries from the data source
+   */
+  loader: EntryLoader<T>
+  /**
+   * The default filter / top / skip / etc... options
+   */
+  defaultSettings: FindOptions<T, Array<keyof T>>
+  /**
+   * An optional field that can be used for quick search
+   */
+  searchField?: keyof T
+
+  /**
+   * @param entry The clicked entry
+   * optional callback for row clicks
+   */
+  onRowClick?: (entry: T) => void
+
+  /**
+   * Optional callback for row double clicks
+   *
+   * @param entry The clicked entry
+   */
+
+  onRowDoubleClick?: (entry: T) => void
+
+  /**
+   * An optional debounce interval in milliseconds
+   */
+  debounceMs?: number
+}
+
 export class CollectionService<T> implements Disposable {
   public dispose() {
     this.querySettings.dispose()
@@ -102,10 +136,12 @@ export class CollectionService<T> implements Disposable {
         break
       }
       default:
-        if (this.searchField && ev.key.length === 1) {
+        if (this.options.searchField && ev.key.length === 1) {
           const newSearchExpression = searchTerm + ev.key
           const newFocusedEntry = entries.find(
-            (e) => this.searchField && (e[this.searchField] as any)?.toString().startsWith(newSearchExpression),
+            (e) =>
+              this.options.searchField &&
+              (e[this.options.searchField] as any)?.toString().startsWith(newSearchExpression),
           )
           this.focusedEntry.setValue(newFocusedEntry)
           this.searchTerm.setValue(newSearchExpression)
@@ -114,6 +150,7 @@ export class CollectionService<T> implements Disposable {
   }
 
   public handleRowClick(entry: T, ev: MouseEvent) {
+    this.options.onRowClick?.(entry)
     const currentSelectionValue = this.selection.getValue()
     const lastFocused = this.focusedEntry.getValue()
     if (ev.ctrlKey) {
@@ -141,18 +178,19 @@ export class CollectionService<T> implements Disposable {
     this.focusedEntry.setValue(entry)
   }
 
-  constructor(
-    fetch: EntryLoader<T>,
-    defaultSettings: FindOptions<T, Array<keyof T>>,
-    private readonly searchField?: keyof T,
-  ) {
-    this.querySettings = new ObservableValue<FindOptions<T, Array<keyof T>>>(defaultSettings)
-    this.getEntries = debounce(async (options) => {
+  constructor(private options: CollectionServiceOptions<T>) {
+    this.querySettings = new ObservableValue<FindOptions<T, Array<keyof T>>>(this.options.defaultSettings)
+
+    const loader = this.options.debounceMs
+      ? debounce(this.options.loader, this.options.debounceMs)
+      : this.options.loader
+
+    this.getEntries = async (opt) => {
       await this.loadLock.acquire()
       try {
         this.error.setValue(undefined)
         this.isLoading.setValue(true)
-        const result = await fetch(options)
+        const result = await loader(opt)
         this.data.setValue(result)
         return result
       } catch (error) {
@@ -162,7 +200,12 @@ export class CollectionService<T> implements Disposable {
         this.loadLock.release()
         this.isLoading.setValue(false)
       }
-    }, 500)
+    }
+
     this.querySettings.subscribe((val) => this.getEntries(val), true)
   }
+
+  public async handleRowDoubleClick(entry: T) {
+    this.options.onRowDoubleClick?.(entry)
+  }
 }

package/src/services/default-variable-theme.ts

@@ -0,0 +1,83 @@
+import type { DeepPartial } from '@furystack/utils'
+import type { Theme } from './theme-provider-service'
+export const defaultVariableTheme: Theme = {
+  text: {
+    primary: 'var(--shades-theme-text-primary)',
+    secondary: 'var(--shades-theme-text-secondary)',
+    disabled: 'var(--shades-theme-text-disabled)',
+  },
+  button: {
+    active: 'var(--shades-theme-button-active)',
+    hover: 'var(--shades-theme-button-hover)',
+    selected: 'var(--shades-theme-button-selected)',
+    disabled: 'var(--shades-theme-button-disabled)',
+    disabledBackground: 'var(--shades-theme-button-disabled-background)',
+  },
+  background: {
+    default: 'var(--shades-theme-background-default)',
+    paper: 'var(--shades-theme-background-paper)',
+  },
+  palette: {
+    primary: {
+      light: 'var(--shades-theme-palette-primary-light)',
+      main: 'var(--shades-theme-palette-primary-main)',
+      dark: 'var(--shades-theme-palette-primary-dark)',
+    },
+    secondary: {
+      light: 'var(--shades-theme-palette-secondary-light)',
+      main: 'var(--shades-theme-palette-secondary-main)',
+      dark: 'var(--shades-theme-palette-secondary-dark)',
+    },
+    error: {
+      light: 'var(--shades-theme-palette-error-light)',
+      main: 'var(--shades-theme-palette-error-main)',
+      dark: 'var(--shades-theme-palette-error-dark)',
+    },
+    warning: {
+      light: 'var(--shades-theme-palette-warning-light)',
+      main: 'var(--shades-theme-palette-warning-main)',
+      dark: 'var(--shades-theme-palette-warning-dark)',
+    },
+    info: {
+      light: 'var(--shades-theme-palette-info-light)',
+      main: 'var(--shades-theme-palette-info-main)',
+      dark: 'var(--shades-theme-palette-info-dark)',
+    },
+    success: {
+      light: 'var(--shades-theme-palette-success-light)',
+      main: 'var(--shades-theme-palette-success-main)',
+      dark: 'var(--shades-theme-palette-success-dark)',
+    },
+  },
+  divider: 'var(--shades-theme-divider)',
+}
+
+export const setCssVariable = (key: string, value: string, root: HTMLElement) => {
+  root.style.setProperty(key.replace('var(', '').replace(')', ''), value)
+}
+
+export const getCssVariable = (key: string, root: HTMLElement = document.querySelector(':root') as HTMLElement) => {
+  return getComputedStyle(root).getPropertyValue(key.replace('var(', '').replace(')', ''))
+}
+
+const assignValue = <T extends object>(
+  target: T,
+  source: DeepPartial<T>,
+  root: HTMLElement,
+  assignFn = setCssVariable,
+) => {
+  const keys = Object.keys(target) as Array<keyof T>
+  keys.forEach((key) => {
+    if (typeof source[key] === 'object' && typeof target[key] === 'object') {
+      assignValue(target[key] as object, source[key] as object, root)
+      return
+    } else {
+      assignFn(target[key] as string, source[key] as string, root)
+    }
+  })
+}
+
+export const useThemeCssVariables = (theme: DeepPartial<Theme>) => {
+  const root = document.querySelector(':root') as HTMLElement
+  assignValue(defaultVariableTheme, theme, root)
+}

package/src/services/index.ts

@@ -5,3 +5,4 @@ export * from './default-dark-theme'
 export * from './default-light-theme'
 export * from './default-palette'
 export * from './noty-service'
+export * from './default-variable-theme'

package/src/services/theme-provider-service.ts

@@ -1,7 +1,6 @@
 import { Injectable } from '@furystack/inject'
 import type { DeepPartial } from '@furystack/utils'
-import { deepMerge, ObservableValue } from '@furystack/utils'
-import { defaultDarkTheme } from './default-dark-theme'
+import { defaultVariableTheme, getCssVariable, useThemeCssVariables } from './default-variable-theme'
 
 export type Color = string // `#${string}` | `rgba(${number},${number},${number},${number})` |
 
@@ -66,7 +65,7 @@ export class RgbColor {
 @Injectable({ lifetime: 'singleton' })
 export class ThemeProviderService {
   /**
-   *
+   * @deprecated does not respect CSS vars
    * @param color The background color
    * @param bright The Bright color
    * @param dark The Dark color
@@ -83,7 +82,11 @@ export class ThemeProviderService {
    * @param color The color string
    * @returns The parsed R,G,B, A values
    */
-  public getRgbFromColorString(color: string) {
+  public getRgbFromColorString(color: string): RgbColor {
+    if (color.startsWith('var(--')) {
+      return this.getRgbFromColorString(getCssVariable(color))
+    }
+
     if (color.startsWith('#')) {
       if (color.length === 7) {
         const r = parseInt(color.substr(1, 2), 16)
@@ -111,16 +114,16 @@ export class ThemeProviderService {
         )
       }
     }
-    throw Error(`Color format '${color} is not supported.'`)
+    throw Error(`Color format '${color}' is not supported.'`)
   }
 
-  public readonly theme = new ObservableValue(defaultDarkTheme)
+  public readonly theme = defaultVariableTheme
 
   public set(change: DeepPartial<Theme>) {
-    this.theme.setValue(deepMerge(this.theme.getValue(), change))
+    useThemeCssVariables(change)
   }
 
   public dispose() {
-    this.theme.dispose()
+    /** */
   }
 }