1
import { colorToInt, intToHex, colorToHex, ColorInt } from '../../util/colorUtils'
2
import * as sRGB from '../../util/color/transformSRGB'
3
import * as LAB from '../../util/color/transformCIELAB'
4
import {
5
  VuetifyParsedTheme,
6
  VuetifyThemeItem,
7
} from 'vuetify/types/services/theme'
8

9
export function parse (
10
  theme: Record<string, VuetifyThemeItem>,
11 1
  isItem = false,
12 1
  variations = true,
13 1
): VuetifyParsedTheme {
14 1
  const { anchor, ...variant } = theme
15 1
  const colors = Object.keys(variant)
16 1
  const parsedTheme: any = {}
17

18 1
  for (let i = 0; i < colors.length; ++i) {
19 1
    const name = colors[i]
20 1
    const value = theme[name]
21

22 1
    if (value == null) continue
23

24 1
    if (!variations) {
25 1
      parsedTheme[name] = { base: intToHex(colorToInt(value)) }
26 1
    } else if (isItem) {
27
      /* istanbul ignore else */
28 1
      if (name === 'base' || name.startsWith('lighten') || name.startsWith('darken')) {
29 1
        parsedTheme[name] = colorToHex(value)
30
      }
31 1
    } else if (typeof value === 'object') {
32 1
      parsedTheme[name] = parse(value, true, variations)
33
    } else {
34 1
      parsedTheme[name] = genVariations(name, colorToInt(value))
35
    }
36
  }
37

38 1
  if (!isItem) {
39 1
    parsedTheme.anchor = anchor || parsedTheme.base || parsedTheme.primary.base
40
  }
41

42 1
  return parsedTheme
43
}
44

45
/**
46
 * Generate the CSS for a base color (.primary)
47
 */
48 1
const genBaseColor = (name: string, value: string): string => {
49 1
  return `
50
.v-application .${name} {
51
  background-color: ${value} !important;
52
  border-color: ${value} !important;
53
}
54
.v-application .${name}--text {
55
  color: ${value} !important;
56
  caret-color: ${value} !important;
57
}`
58
}
59

60
/**
61
 * Generate the CSS for a variant color (.primary.darken-2)
62
 */
63 1
const genVariantColor = (name: string, variant: string, value: string): string => {
64 1
  const [type, n] = variant.split(/(\d)/, 2)
65 1
  return `
66
.v-application .${name}.${type}-${n} {
67
  background-color: ${value} !important;
68
  border-color: ${value} !important;
69
}
70
.v-application .${name}--text.text--${type}-${n} {
71
  color: ${value} !important;
72
  caret-color: ${value} !important;
73
}`
74
}
75

76 1
const genColorVariableName = (name: string, variant = 'base'): string => `--v-${name}-${variant}`
77

78 1
const genColorVariable = (name: string, variant = 'base'): string => `var(${genColorVariableName(name, variant)})`
79

80 1
export function genStyles (theme: VuetifyParsedTheme, cssVar = false): string {
81 1
  const { anchor, ...variant } = theme
82 1
  const colors = Object.keys(variant)
83

84 1
  if (!colors.length) return ''
85

86 1
  let variablesCss = ''
87 1
  let css = ''
88

89 1
  const aColor = cssVar ? genColorVariable('anchor') : anchor
90 1
  css += `.v-application a { color: ${aColor}; }`
91 1
  cssVar && (variablesCss += `  ${genColorVariableName('anchor')}: ${anchor};\n`)
92

93 1
  for (let i = 0; i < colors.length; ++i) {
94 1
    const name = colors[i]
95 1
    const value = theme[name]
96

97 1
    css += genBaseColor(name, cssVar ? genColorVariable(name) : value.base)
98 1
    cssVar && (variablesCss += `  ${genColorVariableName(name)}: ${value.base};\n`)
99

100 1
    const variants = Object.keys(value)
101 1
    for (let i = 0; i < variants.length; ++i) {
102 1
      const variant = variants[i]
103 1
      const variantValue = value[variant]
104 1
      if (variant === 'base') continue
105

106 1
      css += genVariantColor(name, variant, cssVar ? genColorVariable(name, variant) : variantValue)
107 1
      cssVar && (variablesCss += `  ${genColorVariableName(name, variant)}: ${variantValue};\n`)
108
    }
109
  }
110

111 1
  if (cssVar) {
112 1
    variablesCss = `:root {\n${variablesCss}}\n\n`
113
  }
114

115 1
  return variablesCss + css
116
}
117

118 1
export function genVariations (name: string, value: ColorInt): Record<string, string> {
119 1
  const values: Record<string, string> = {
120
    base: intToHex(value),
121
  }
122

123 1
  for (let i = 5; i > 0; --i) {
124 1
    values[`lighten${i}`] = intToHex(lighten(value, i))
125
  }
126

127 1
  for (let i = 1; i <= 4; ++i) {
128 1
    values[`darken${i}`] = intToHex(darken(value, i))
129
  }
130

131 1
  return values
132
}
133

134 1
export function lighten (value: ColorInt, amount: number): ColorInt {
135 1
  const lab = LAB.fromXYZ(sRGB.toXYZ(value))
136 1
  lab[0] = lab[0] + amount * 10
137 1
  return sRGB.fromXYZ(LAB.toXYZ(lab))
138
}
139

140 1
export function darken (value: ColorInt, amount: number): ColorInt {
141 1
  const lab = LAB.fromXYZ(sRGB.toXYZ(value))
142 1
  lab[0] = lab[0] - amount * 10
143 1
  return sRGB.fromXYZ(LAB.toXYZ(lab))
144
}

Read our documentation on viewing source code .

Loading