devhub/packages/components/src/utils/helpers/theme.ts at master · devagul93/devhub · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
import _ from 'lodash'

import { Theme, ThemeColors, ThemeTransformer } from '@devhub/core'
import { Platform } from '../../libs/platform'

export const themeColorFields: Array<keyof ThemeColors> = [
  'primaryBackgroundColor',
  'primaryForegroundColor',

  'backgroundColor',
  'backgroundColorDarker1',
  'backgroundColorDarker2',
  'backgroundColorDarker3',
  'backgroundColorDarker4',
  'backgroundColorDarker5',
  'backgroundColorLess1',
  'backgroundColorLess2',
  'backgroundColorLess3',
  'backgroundColorLess4',
  'backgroundColorLighther1',
  'backgroundColorLighther2',
  'backgroundColorLighther3',
  'backgroundColorLighther4',
  'backgroundColorLighther5',
  'backgroundColorMore1',
  'backgroundColorMore2',
  'backgroundColorMore3',
  'backgroundColorMore4',
  'backgroundColorTransparent10',

  'foregroundColor',
  'foregroundColorMuted25',
  'foregroundColorMuted40',
  'foregroundColorMuted60',

  'blue',
  'blueGray',
  'brown',
  'gray',
  'green',
  'lightRed',
  'orange',
  'pink',
  'purple',
  'red',
  'teal',
  'yellow',
]

export const pickThemeColors = (theme: Theme) => _.pick(theme, themeColorFields)

const _window = typeof window !== 'undefined' ? (window as any) : undefined
export const supportsCSSVariables =
  Platform.OS === 'web' &&
  _window &&
  _window.CSS &&
  _window.CSS.supports &&
  _window.CSS.supports('color', 'var(--fake-var)')

const cssVariablesTheme = {} as Record<string, string>
themeColorFields.forEach(field => {
  cssVariablesTheme[field] = `var(--theme_${field})`
  cssVariablesTheme[`inverted_${field}`] = `var(--theme_inverted_${field})`
})

export function getCSSVariable(color: keyof ThemeColors, isInverted?: boolean) {
  const field =
    color && typeof color === 'string'
      ? isInverted
        ? `inverted_${color}`
        : color
      : undefined

  if (field && field in cssVariablesTheme) return cssVariablesTheme[field]

  return color
}

export function transformTheme(
  theme: Theme,
  themeTransformer: ThemeTransformer,
) {
  if (
    themeTransformer === 'invert' ||
    (themeTransformer === 'force-dark' && !theme.isDark) ||
    (themeTransformer === 'force-light' && theme.isDark)
  ) {
    return theme.invert()
  }

  return theme
}