From 02ecd8bb6c56f7dd136f2baa2bf52867b434447f Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 2 Oct 2024 23:59:56 +0300 Subject: [PATCH] remove old shadow parser, fix only first shadow applying --- src/components/button.style.js | 25 ++++++++++--------- src/components/input.style.js | 2 +- src/services/theme_data/css_utils.js | 19 -------------- src/services/theme_data/iss_deserializer.js | 9 +++++-- .../theme_data/theme3_slot_functions.js | 2 +- .../theme_data/theme_data_3.service.js | 10 ++++---- 6 files changed, 27 insertions(+), 40 deletions(-) diff --git a/src/components/button.style.js b/src/components/button.style.js index defef21b..8bbc7751 100644 --- a/src/components/button.style.js +++ b/src/components/button.style.js @@ -9,9 +9,9 @@ export default { // However, cascading still works, so resulting state will be result of merging of all relevant states/variants // normal: '' // normal state is implicitly added, it is always included toggled: '.toggled', - pressed: ':active', + focused: ':focus-visible', + pressed: ':focus:active', hover: ':hover:not(:disabled)', - focused: ':focus-within', disabled: ':disabled' }, // Variants are mutually exclusive, each component implicitly has "normal" variant, and all other variants inherit from it. @@ -35,10 +35,11 @@ export default { { component: 'Root', directives: { - '--defaultButtonHoverGlow': 'shadow | 0 0 4 --text', + '--defaultButtonHoverGlow': 'shadow | 0 0 4 --text / 0.5', + '--defaultButtonFocusGlow': 'shadow | 0 0 4 4 --link / 0.5', '--defaultButtonShadow': 'shadow | 0 0 2 #000000', - '--defaultButtonBevel': 'shadow | $borderSide(#FFFFFF, top, 0.2), $borderSide(#000000, bottom, 0.2)', - '--pressedButtonBevel': 'shadow | $borderSide(#FFFFFF, bottom, 0.2), $borderSide(#000000, top, 0.2)' + '--defaultButtonBevel': 'shadow | $borderSide(#FFFFFF top 0.2 2), $borderSide(#000000 bottom 0.2 2)', + '--pressedButtonBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2 2), $borderSide(#000000 top 0.2 2)' } }, { @@ -56,6 +57,12 @@ export default { shadow: ['--defaultButtonHoverGlow', '--defaultButtonBevel'] } }, + { + state: ['focused'], + directives: { + shadow: ['--defaultButtonFocusGlow', '--defaultButtonBevel'] + } + }, { state: ['pressed'], directives: { @@ -65,13 +72,7 @@ export default { { state: ['pressed', 'hover'], directives: { - shadow: ['--defaultButtonHoverGlow', '--pressedButtonBevel'] - } - }, - { - state: ['pressed', 'hover', 'focused'], - directives: { - shadow: ['--pressedButtonBevel'] + shadow: ['--pressedButtonBevel', '--defaultButtonHoverGlow'] } }, { diff --git a/src/components/input.style.js b/src/components/input.style.js index 6ad6cf90..65a3d2ad 100644 --- a/src/components/input.style.js +++ b/src/components/input.style.js @@ -27,7 +27,7 @@ export default { { component: 'Root', directives: { - '--defaultInputBevel': 'shadow | $borderSide(#FFFFFF, bottom, 0.2), $borderSide(#000000, top, 0.2)' + '--defaultInputBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2), $borderSide(#000000 top 0.2)' } }, { diff --git a/src/services/theme_data/css_utils.js b/src/services/theme_data/css_utils.js index f6adb776..e3396083 100644 --- a/src/services/theme_data/css_utils.js +++ b/src/services/theme_data/css_utils.js @@ -2,25 +2,6 @@ import { convert } from 'chromatism' import { hex2rgb, rgba2css } from '../color_convert/color_convert.js' -export const parseCssShadow = (text) => { - const dimensions = /(\d[a-z]*\s?){2,4}/.exec(text)?.[0] - const inset = /inset/.exec(text)?.[0] - const color = text.replace(dimensions, '').replace(inset, '') - - const [x, y, blur = 0, spread = 0] = dimensions.split(/ /).filter(x => x).map(x => x.trim()) - const isInset = inset?.trim() === 'inset' - const colorString = color.split(/ /).filter(x => x).map(x => x.trim())[0] - - return { - x, - y, - blur, - spread, - inset: isInset, - color: colorString - } -} - export const getCssColorString = (color, alpha = 1) => rgba2css({ ...convert(color).rgb, a: alpha }) export const getCssShadow = (input, usesDropShadow) => { diff --git a/src/services/theme_data/iss_deserializer.js b/src/services/theme_data/iss_deserializer.js index 976d5776..3ac8826f 100644 --- a/src/services/theme_data/iss_deserializer.js +++ b/src/services/theme_data/iss_deserializer.js @@ -1,6 +1,6 @@ import { flattenDeep } from 'lodash' -const parseShadow = string => { +export const parseShadow = string => { const modes = ['_full', 'inset', 'x', 'y', 'blur', 'spread', 'color', 'alpha'] const regexPrep = [ // inset keyword (optional) @@ -26,7 +26,12 @@ const parseShadow = string => { const numeric = new Set(['x', 'y', 'blur', 'spread', 'alpha']) const { x, y, blur, spread, alpha, inset, color } = Object.fromEntries(modes.map((mode, i) => { if (numeric.has(mode)) { - return [mode, Number(result[i])] + const number = Number(result[i]) + if (Number.isNaN(number)) { + if (mode === 'alpha') return [mode, 1] + return [mode, 0] + } + return [mode, number] } else if (mode === 'inset') { return [mode, !!result[i]] } else { diff --git a/src/services/theme_data/theme3_slot_functions.js b/src/services/theme_data/theme3_slot_functions.js index 074a88f0..24652429 100644 --- a/src/services/theme_data/theme3_slot_functions.js +++ b/src/services/theme_data/theme3_slot_functions.js @@ -3,7 +3,7 @@ import { alphaBlend, getTextColor, relativeLuminance } from '../color_convert/co export const process = (text, functions, { findColor, findShadow }, { dynamicVars, staticVars }) => { const { funcName, argsString } = /\$(?\w+)\((?[#a-zA-Z0-9-,.'"\s]*)\)/.exec(text).groups - const args = argsString.split(/,/g).map(a => a.trim()) + const args = argsString.split(/ /g).map(a => a.trim()) const func = functions[funcName] if (args.length < func.argsNeeded) { diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js index 2efaf4d2..4765a773 100644 --- a/src/services/theme_data/theme_data_3.service.js +++ b/src/services/theme_data/theme_data_3.service.js @@ -22,7 +22,7 @@ import { normalizeCombination, findRules } from './iss_utils.js' -import { parseCssShadow } from './css_utils.js' +import { parseShadow } from './iss_deserializer.js' // Ensuring the order of components const components = { @@ -48,7 +48,7 @@ const findShadow = (shadows, { dynamicVars, staticVars }) => { const variableSlot = variable.substring(2) return findShadow(staticVars[variableSlot], { dynamicVars, staticVars }) } else { - targetShadow = parseCssShadow(shadow) + targetShadow = parseShadow(shadow) } } else { targetShadow = shadow @@ -410,10 +410,10 @@ export const init = ({ const dynamicSlots = Object.entries(computedDirectives).filter(([k, v]) => k.startsWith('--')) dynamicSlots.forEach(([k, v]) => { - const [type, ...value] = v.split('|').map(x => x.trim()) // woah, Extreme! + const [type, value] = v.split('|').map(x => x.trim()) // woah, Extreme! switch (type) { case 'color': { - const color = findColor(value[0], { dynamicVars, staticVars }) + const color = findColor(value, { dynamicVars, staticVars }) dynamicVars[k] = color if (combination.component === rootComponentName) { staticVars[k.substring(2)] = color @@ -421,7 +421,7 @@ export const init = ({ break } case 'shadow': { - const shadow = value + const shadow = value.split(/,/g).map(s => s.trim()) dynamicVars[k] = shadow if (combination.component === rootComponentName) { staticVars[k.substring(2)] = shadow