commit: 02ecd8bb6c56f7dd136f2baa2bf52867b434447f
parent 424da4c311e58807e4537218da7714a9fb659e13
Author: Henry Jameson <me@hjkos.com>
Date: Wed, 2 Oct 2024 23:59:56 +0300
remove old shadow parser, fix only first shadow applying
Diffstat:
6 files changed, 26 insertions(+), 39 deletions(-)
diff --git 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)'
}
},
{
@@ -57,21 +58,21 @@ export default {
}
},
{
- state: ['pressed'],
+ state: ['focused'],
directives: {
- shadow: ['--defaultButtonShadow', '--pressedButtonBevel']
+ shadow: ['--defaultButtonFocusGlow', '--defaultButtonBevel']
}
},
{
- state: ['pressed', 'hover'],
+ state: ['pressed'],
directives: {
- shadow: ['--defaultButtonHoverGlow', '--pressedButtonBevel']
+ shadow: ['--defaultButtonShadow', '--pressedButtonBevel']
}
},
{
- state: ['pressed', 'hover', 'focused'],
+ state: ['pressed', 'hover'],
directives: {
- shadow: ['--pressedButtonBevel']
+ shadow: ['--pressedButtonBevel', '--defaultButtonHoverGlow']
}
},
{
diff --git 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
@@ -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
@@ -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
@@ -3,7 +3,7 @@ import { alphaBlend, getTextColor, relativeLuminance } from '../color_convert/co
export const process = (text, functions, { findColor, findShadow }, { dynamicVars, staticVars }) => {
const { funcName, argsString } = /\$(?<funcName>\w+)\((?<argsString>[#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
@@ -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
