diff options
Diffstat (limited to 'src/services/theme_data')
| -rw-r--r-- | src/services/theme_data/css_utils.js | 12 | ||||
| -rw-r--r-- | src/services/theme_data/theme2_to_theme3.js | 20 | ||||
| -rw-r--r-- | src/services/theme_data/theme_data_3.service.js | 4 |
3 files changed, 17 insertions, 19 deletions
diff --git a/src/services/theme_data/css_utils.js b/src/services/theme_data/css_utils.js index a89eac3b..8423e8ac 100644 --- a/src/services/theme_data/css_utils.js +++ b/src/services/theme_data/css_utils.js @@ -2,11 +2,6 @@ import { convert } from 'chromatism' import { hex2rgb, rgba2css } from '../color_convert/color_convert.js' -// This changes what backgrounds are used to "stacked" solid colors so you can see -// what theme engine "thinks" is actual background color is for purposes of text color -// generation and for when --stacked variable is used -const DEBUG = false - export const parseCssShadow = (text) => { const dimensions = /(\d[a-z]*\s?){2,4}/.exec(text)?.[0] const inset = /inset/.exec(text)?.[0] @@ -66,7 +61,10 @@ export const getCssShadowFilter = (input) => { .join(' ') } -export const getCssRules = (rules) => rules.map(rule => { +// `debug` changes what backgrounds are used to "stacked" solid colors so you can see +// what theme engine "thinks" is actual background color is for purposes of text color +// generation and for when --stacked variable is used +export const getCssRules = (rules, debug) => rules.map(rule => { let selector = rule.selector if (!selector) { selector = 'html' @@ -93,7 +91,7 @@ export const getCssRules = (rules) => rules.map(rule => { ].join(';\n ') } case 'background': { - if (DEBUG) { + if (debug) { return ` --background: ${getCssColorString(rule.dynamicVars.stacked)}; background-color: ${getCssColorString(rule.dynamicVars.stacked)}; diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js index 6ea12836..2c97d18b 100644 --- a/src/services/theme_data/theme2_to_theme3.js +++ b/src/services/theme_data/theme2_to_theme3.js @@ -138,7 +138,7 @@ export const convertTheme2To3 = (data) => { Object.keys(data.opacity || {}).forEach(key => { if (!opacityKeys.has(key) || data.opacity[key] === undefined) return null const originalOpacity = data.opacity[key] - const rule = {} + const rule = { source: '2to3' } switch (key) { case 'alert': @@ -213,7 +213,7 @@ export const convertTheme2To3 = (data) => { Object.keys(data.radii || {}).forEach(key => { if (!radiiKeys.has(key) || data.radii[key] === undefined) return null const originalRadius = data.radii[key] - const rule = {} + const rule = { source: '2to3' } switch (key) { case 'btn': @@ -266,7 +266,7 @@ export const convertTheme2To3 = (data) => { Object.keys(data.fonts || {}).forEach(key => { if (!fontsKeys.has(key)) return const originalFont = data.fonts[key].family - const rule = {} + const rule = { source: '2to3' } switch (key) { case 'interface': @@ -300,7 +300,7 @@ export const convertTheme2To3 = (data) => { Object.keys(data.shadows || {}).forEach(key => { if (!shadowsKeys.has(key)) return const originalShadow = data.shadows[key] - const rule = {} + const rule = { source: '2to3' } switch (key) { case 'panel': @@ -369,7 +369,7 @@ export const convertTheme2To3 = (data) => { const extendedRules = Object.entries(extendedBaseKeys).map(([prefix, keys]) => { if (nonComponentPrefixes.has(prefix)) return null - const rule = {} + const rule = { source: '2to3' } if (prefix === 'alertPopup') { rule.component = 'Alert' rule.parent = { component: 'Popover' } @@ -402,7 +402,7 @@ export const convertTheme2To3 = (data) => { const leftoverKey = key.replace(prefix, '') const parts = (leftoverKey || 'Bg').match(/[A-Z][a-z]*/g) const last = parts.slice(-1)[0] - let newRule = { directives: {} } + let newRule = { source: '2to3', directives: {} } let variantArray = [] switch (last) { @@ -462,12 +462,12 @@ export const convertTheme2To3 = (data) => { if (prefix === 'popover' && variantArray[0] === 'Post') { newRule.component = 'Post' - newRule.parent = { component: 'Popover' } + newRule.parent = { source: '2to3hack', component: 'Popover' } variantArray = variantArray.filter(x => x !== 'Post') } if (prefix === 'selectedMenu' && variantArray[0] === 'Popover') { - newRule.parent = { component: 'Popover' } + newRule.parent = { source: '2to3hack', component: 'Popover' } variantArray = variantArray.filter(x => x !== 'Popover') } @@ -477,12 +477,12 @@ export const convertTheme2To3 = (data) => { case 'alert': { const hasPanel = variantArray.find(x => x === 'Panel') if (hasPanel) { - newRule.parent = { component: 'PanelHeader' } + newRule.parent = { source: '2to3hack', component: 'PanelHeader', parent: newRule.parent } variantArray = variantArray.filter(x => x !== 'Panel') } const hasTop = variantArray.find(x => x === 'Top') // TopBar if (hasTop) { - newRule.parent = { component: 'TopBar' } + newRule.parent = { source: '2to3hack', component: 'TopBar', parent: newRule.parent } variantArray = variantArray.filter(x => x !== 'Top' && x !== 'Bar') } break diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js index 047ba8a2..d1043c52 100644 --- a/src/services/theme_data/theme_data_3.service.js +++ b/src/services/theme_data/theme_data_3.service.js @@ -149,14 +149,14 @@ const ruleToSelector = genericRuleToSelector(components) export const getEngineChecksum = () => engineChecksum -export const init = (extraRuleset, ultimateBackgroundColor) => { +export const init = (extraRuleset, ultimateBackgroundColor, debug) => { const staticVars = {} const stacked = {} const computed = {} const rulesetUnsorted = [ ...Object.values(components) - .map(c => (c.defaultRules || []).map(r => ({ component: c.name, ...r }))) + .map(c => (c.defaultRules || []).map(r => ({ component: c.name, ...r, source: 'Built-in' }))) .reduce((acc, arr) => [...acc, ...arr], []), ...extraRuleset ].map(rule => { |