remove old shadow parser, fix only first shadow applying

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)',
+        '--defaultButtonBevel': 'shadow | $borderSide(#FFFFFF top 0.2 2), $borderSide(#000000 bottom 0.2 2)',
-        '--pressedButtonBevel': 'shadow | $borderSide(#FFFFFF, bottom, 0.2), $borderSide(#000000, top, 0.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']
+        shadow: ['--pressedButtonBevel', '--defaultButtonHoverGlow']
-      }
-    },
-    {
-      state: ['pressed', 'hover', 'focused'],
-      directives: {
-        shadow: ['--pressedButtonBevel']
       }
     },
     {

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)'
       }
     },
     {

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) => {

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 {

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) {

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