Material cosmetics on chips,panelmenu and button

packages/themes/src/presets/material/base/index.js

@@ -37,8 +37,7 @@ export default {
             width: '0',
             style: 'none',
             color: 'unset',
-            offset: '0',
+            offset: '0'
-            shadow: '0 0 1px 4px color-mix(in srgb, {surface.900}, transparent 88%)'
         },
         disabledOpacity: '0.38',
         iconSize: '1rem',
@@ -129,6 +128,9 @@ export default {
         },
         colorScheme: {
             light: {
+                focusRing: {
+                    shadow: '0 0 1px 4px {surface.200}'
+                },
                 surface: {
                     0: '#ffffff',
                     50: '{slate.50}',
@@ -253,6 +255,9 @@ export default {
                 }
             },
             dark: {
+                focusRing: {
+                    shadow: '0 0 1px 4px {surface.700}'
+                },
                 surface: {
                     0: '#ffffff',
                     50: '{zinc.50}',

packages/themes/src/presets/material/button/index.js

@@ -486,31 +486,130 @@ export default {
     },
     style: ({ dt }) => `
 .p-button:focus-visible {
-    background: ${dt('button.primary.hover.background')};
+    background: ${dt('button.primary.active.background')};
+    border-color: ${dt('button.primary.active.background')};
 }
 
 .p-button-secondary:focus-visible {
-    background: ${dt('button.secondary.hover.background')};
+    background: ${dt('button.secondary.active.background')};
+    border-color: ${dt('button.secondary.active.background')};
 }
 
 .p-button-success:focus-visible {
-    background: ${dt('button.success.hover.background')};
+    background: ${dt('button.success.active.background')};
+    border-color: ${dt('button.success.active.background')};
+}
+
+.p-button-info:focus-visible {
+    background: ${dt('button.info.active.background')};
+    border-color: ${dt('button.info.active.background')};
 }
 
 .p-button-warn:focus-visible {
-    background: ${dt('button.warn.hover.background')};
+    background: ${dt('button.warn.active.background')};
+    border-color: ${dt('button.warn.active.background')};
 }
 
 .p-button-help:focus-visible {
-    background: ${dt('button.help.hover.background')};
+    background: ${dt('button.help.active.background')};
+    border-color: ${dt('button.help.active.background')};
 }
 
 .p-button-danger:focus-visible {
-    background: ${dt('button.danger.hover.background')};
+    background: ${dt('button.danger.active.background')};
+    border-color: ${dt('button.danger.active.background')};
 }
 
 .p-button-contrast:focus-visible {
-    background: ${dt('button.contrast.hover.background')};
+    background: ${dt('button.contrast.active.background')};
+    border-color: ${dt('button.contrast.active.background')};
+}
+
+.p-button-link:focus-visible {
+    background: color-mix(in srgb, ${dt('primary.color')}, transparent 84%);
+    border-color: transparent;
+}
+
+.p-button-text:focus-visible {
+    background: ${dt('button.text.primary.active.background')};
+    border-color: transparent;
+}
+
+.p-button-secondary.p-button-text:focus-visible {
+    background: ${dt('button.text.secondary.active.background')};
+    border-color: transparent;
+}
+
+.p-button-success.p-button-text:focus-visible {
+    background: ${dt('button.text.success.active.background')};
+    border-color: transparent;
+}
+
+.p-button-info.p-button-text:focus-visible {
+    background: ${dt('button.text.info.active.background')};
+    border-color: transparent;
+}
+
+.p-button-warn.p-button-text:focus-visible {
+    background: ${dt('button.text.warn.active.background')};
+    border-color: transparent;
+}
+
+.p-button-help.p-button-text:focus-visible {
+    background: ${dt('button.text.help.active.background')};
+    border-color: transparent;
+}
+
+.p-button-danger.p-button-text:focus-visible {
+    background: ${dt('button.text.danger.active.background')};
+    border-color: transparent;
+}
+
+.p-button-contrast.p-button-text:focus-visible {
+    background: ${dt('button.text.contrast.active.background')};
+    border-color: transparent;
+}
+
+.p-button-plain.p-button-text:focus-visible {
+    background: ${dt('button.text.plain.active.background')};
+    border-color: transparent;
+}
+
+.p-button-outlined:focus-visible {
+    background: ${dt('button.outlined.primary.active.background')};
+}
+
+.p-button-secondary.p-button-outlined:focus-visible {
+    background: ${dt('button.outlined.secondary.active.background')};
+    border-color: ${dt('button.outlined.secondary.border.color')};
+}
+
+.p-button-success.p-button-outlined:focus-visible {
+    background: ${dt('button.outlined.success.active.background')};
+}
+    
+.p-button-info.p-button-outlined:focus-visible {
+    background: ${dt('button.outlined.info.active.background')};
+}
+
+.p-button-warn.p-button-outlined:focus-visible {
+    background: ${dt('button.outlined.warn.active.background')};
+}
+
+.p-button-help.p-button-outlined:focus-visible {
+    background: ${dt('button.outlined.help.active.background')};
+}
+
+.p-button-danger.p-button-outlined:focus-visible {
+    background: ${dt('button.outlined.danger.active.background')};
+}
+
+.p-button-contrast.p-button-outlined:focus-visible {
+    background: ${dt('button.outlined.contrast.active.background')};
+}
+
+.p-button-plain.p-button-outlined:focus-visible {
+    background: ${dt('button.outlined.plain.active.background')};
 }
 `
 };

packages/themes/src/presets/material/chip/index.js

@@ -19,8 +19,7 @@ export default {
             width: '{focus.ring.width}',
             style: '{focus.ring.style}',
             color: '{focus.ring.color}',
-            offset: '{focus.ring.offset}',
+            offset: '{focus.ring.offset}'
-            shadow: '{focus.ring.shadow}'
         }
     },
     colorScheme: {
@@ -33,7 +32,10 @@ export default {
                 color: '{surface.600}'
             },
             removeIcon: {
-                color: '{surface.600}'
+                color: '{surface.600}',
+                focusRing: {
+                    shadow: '0 0 1px 4px {surface.300}'
+                }
             }
         },
         dark: {
@@ -45,7 +47,10 @@ export default {
                 color: '{surface.0}'
             },
             removeIcon: {
-                color: '{surface.0}'
+                color: '{surface.0}',
+                focusRing: {
+                    shadow: '0 0 1px 4px {surface.600}'
+                }
             }
         }
     }

packages/themes/src/presets/material/panelmenu/index.js

@@ -40,7 +40,7 @@ export default {
     },
     style: ({ dt }) => `
 .p-panelmenu-panel {
-    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
+    box-shadow: 0 0 0 1px ${dt('panelmenu.panel.border.color')};
     transition: margin ${dt('panelmenu.transition.duration')};
 }