|
|
@ -2,6 +2,7 @@ import { convert } from 'chromatism'
|
|
|
|
import { rgb2hex, hex2rgb, rgba2css, getCssColor, relativeLuminance } from '../color_convert/color_convert.js'
|
|
|
|
import { rgb2hex, hex2rgb, rgba2css, getCssColor, relativeLuminance } from '../color_convert/color_convert.js'
|
|
|
|
import { getColors, computeDynamicColor, getOpacitySlot } from '../theme_data/theme_data.service.js'
|
|
|
|
import { getColors, computeDynamicColor, getOpacitySlot } from '../theme_data/theme_data.service.js'
|
|
|
|
import { init } from '../theme_data/theme_data_3.service.js'
|
|
|
|
import { init } from '../theme_data/theme_data_3.service.js'
|
|
|
|
|
|
|
|
import { convertTheme2To3 } from '../theme_data/theme2_to_theme3.js'
|
|
|
|
import { getCssRules } from '../theme_data/css_utils.js'
|
|
|
|
import { getCssRules } from '../theme_data/css_utils.js'
|
|
|
|
import {
|
|
|
|
import {
|
|
|
|
sampleRules
|
|
|
|
sampleRules
|
|
|
@ -10,10 +11,12 @@ import { defaultState } from '../../modules/config.js'
|
|
|
|
|
|
|
|
|
|
|
|
export const applyTheme = (input) => {
|
|
|
|
export const applyTheme = (input) => {
|
|
|
|
const t0 = performance.now()
|
|
|
|
const t0 = performance.now()
|
|
|
|
const { rules, t3b } = generatePreset(input)
|
|
|
|
const { rules, theme } = generatePreset(input)
|
|
|
|
|
|
|
|
console.log(rules, theme)
|
|
|
|
const t1 = performance.now()
|
|
|
|
const t1 = performance.now()
|
|
|
|
console.log('Themes 2 initialization took ' + (t1 - t0) + 'ms')
|
|
|
|
console.log('Themes 2 initialization took ' + (t1 - t0) + 'ms')
|
|
|
|
const themes3 = init(sampleRules, t3b)
|
|
|
|
const extraRules = convertTheme2To3(theme)
|
|
|
|
|
|
|
|
const themes3 = init([...sampleRules, ...extraRules])
|
|
|
|
const t2 = performance.now()
|
|
|
|
const t2 = performance.now()
|
|
|
|
console.log('Themes 3 initialization took ' + (t2 - t1) + 'ms')
|
|
|
|
console.log('Themes 3 initialization took ' + (t2 - t1) + 'ms')
|
|
|
|
const head = document.head
|
|
|
|
const head = document.head
|
|
|
@ -26,7 +29,7 @@ export const applyTheme = (input) => {
|
|
|
|
|
|
|
|
|
|
|
|
styleSheet.toString()
|
|
|
|
styleSheet.toString()
|
|
|
|
styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max')
|
|
|
|
styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max')
|
|
|
|
getCssRules(themes3.eager, t3b).forEach(rule => {
|
|
|
|
getCssRules(themes3.eager, themes3.staticVars).forEach(rule => {
|
|
|
|
// Hack to support multiple selectors on same component
|
|
|
|
// Hack to support multiple selectors on same component
|
|
|
|
if (rule.match(/::-webkit-scrollbar-button/)) {
|
|
|
|
if (rule.match(/::-webkit-scrollbar-button/)) {
|
|
|
|
const parts = rule.split(/[{}]/g)
|
|
|
|
const parts = rule.split(/[{}]/g)
|
|
|
@ -45,7 +48,7 @@ export const applyTheme = (input) => {
|
|
|
|
})
|
|
|
|
})
|
|
|
|
body.classList.remove('hidden')
|
|
|
|
body.classList.remove('hidden')
|
|
|
|
themes3.lazy.then(lazyRules => {
|
|
|
|
themes3.lazy.then(lazyRules => {
|
|
|
|
getCssRules(lazyRules, t3b).forEach(rule => {
|
|
|
|
getCssRules(lazyRules, themes3.staticVars).forEach(rule => {
|
|
|
|
styleSheet.insertRule(rule, 'index-max')
|
|
|
|
styleSheet.insertRule(rule, 'index-max')
|
|
|
|
})
|
|
|
|
})
|
|
|
|
const t3 = performance.now()
|
|
|
|
const t3 = performance.now()
|
|
|
@ -358,7 +361,7 @@ export const generateShadows = (input, colors) => {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
export const composePreset = (colors, radii, shadows, fonts, t3b) => {
|
|
|
|
export const composePreset = (colors, radii, shadows, fonts) => {
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
rules: {
|
|
|
|
rules: {
|
|
|
|
...shadows.rules,
|
|
|
|
...shadows.rules,
|
|
|
@ -371,8 +374,7 @@ export const composePreset = (colors, radii, shadows, fonts, t3b) => {
|
|
|
|
...colors.theme,
|
|
|
|
...colors.theme,
|
|
|
|
...radii.theme,
|
|
|
|
...radii.theme,
|
|
|
|
...fonts.theme
|
|
|
|
...fonts.theme
|
|
|
|
},
|
|
|
|
}
|
|
|
|
t3b
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
@ -382,8 +384,7 @@ export const generatePreset = (input) => {
|
|
|
|
colors,
|
|
|
|
colors,
|
|
|
|
generateRadii(input),
|
|
|
|
generateRadii(input),
|
|
|
|
generateShadows(input, colors.theme.colors, colors.mod),
|
|
|
|
generateShadows(input, colors.theme.colors, colors.mod),
|
|
|
|
generateFonts(input),
|
|
|
|
generateFonts(input)
|
|
|
|
colors.theme.colors
|
|
|
|
|
|
|
|
)
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|