From 933f9a279d293171ddc3ba235a286675b8c3d010 Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Wed, 2 Oct 2024 01:04:30 +0300 Subject: [PATCH] Material cosmetics on chips,panelmenu and button --- .../themes/src/presets/material/base/index.js | 9 +- .../src/presets/material/button/index.js | 113 ++++++++++++++++-- .../themes/src/presets/material/chip/index.js | 13 +- .../src/presets/material/panelmenu/index.js | 2 +- 4 files changed, 123 insertions(+), 14 deletions(-) diff --git a/packages/themes/src/presets/material/base/index.js b/packages/themes/src/presets/material/base/index.js index a6ae700e2..176fde138 100644 --- a/packages/themes/src/presets/material/base/index.js +++ b/packages/themes/src/presets/material/base/index.js @@ -37,8 +37,7 @@ export default { width: '0', style: 'none', color: 'unset', - offset: '0', - shadow: '0 0 1px 4px color-mix(in srgb, {surface.900}, transparent 88%)' + offset: '0' }, 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}', diff --git a/packages/themes/src/presets/material/button/index.js b/packages/themes/src/presets/material/button/index.js index ee7078c3e..39e3aaf75 100644 --- a/packages/themes/src/presets/material/button/index.js +++ b/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')}; } ` }; diff --git a/packages/themes/src/presets/material/chip/index.js b/packages/themes/src/presets/material/chip/index.js index 05146e235..ed1709578 100644 --- a/packages/themes/src/presets/material/chip/index.js +++ b/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}', - shadow: '{focus.ring.shadow}' + offset: '{focus.ring.offset}' } }, 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}' + } } } } diff --git a/packages/themes/src/presets/material/panelmenu/index.js b/packages/themes/src/presets/material/panelmenu/index.js index 97ac3175c..4206daef0 100644 --- a/packages/themes/src/presets/material/panelmenu/index.js +++ b/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')}; }