From 21ae03bfce484e864e3e4dfdb0b7f55521e43389 Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Tue, 1 Oct 2024 12:21:36 +0300 Subject: [PATCH] Material misc and media --- .../src/carousel/style/CarouselStyle.js | 1 + .../themes/src/presets/material/base/index.js | 2 +- .../src/presets/material/carousel/index.js | 37 ++++++++++++----- .../themes/src/presets/material/chip/index.js | 2 +- .../src/presets/material/galleria/index.js | 2 +- .../src/presets/material/progressbar/index.js | 2 +- .../themes/src/presets/material/tag/index.js | 40 +++++++++---------- 7 files changed, 52 insertions(+), 34 deletions(-) diff --git a/packages/primevue/src/carousel/style/CarouselStyle.js b/packages/primevue/src/carousel/style/CarouselStyle.js index 8849481a2..5ccd94dd4 100644 --- a/packages/primevue/src/carousel/style/CarouselStyle.js +++ b/packages/primevue/src/carousel/style/CarouselStyle.js @@ -31,6 +31,7 @@ const theme = ({ dt }) => ` .p-carousel-prev-button, .p-carousel-next-button { align-self: center; + flex-shrink: 0; } .p-carousel-indicator-list { diff --git a/packages/themes/src/presets/material/base/index.js b/packages/themes/src/presets/material/base/index.js index 0cff35dd2..3210e91d7 100644 --- a/packages/themes/src/presets/material/base/index.js +++ b/packages/themes/src/presets/material/base/index.js @@ -38,7 +38,7 @@ export default { style: 'none', color: 'unset', offset: '0', - shadow: '0 0 1px 8px color-mix(in srgb, {surface.900}, transparent 88%)' + shadow: '0 0 1px 4px color-mix(in srgb, {surface.900}, transparent 88%)' }, disabledOpacity: '0.38', iconSize: '1rem', diff --git a/packages/themes/src/presets/material/carousel/index.js b/packages/themes/src/presets/material/carousel/index.js index ea401b531..7c8b1838e 100644 --- a/packages/themes/src/presets/material/carousel/index.js +++ b/packages/themes/src/presets/material/carousel/index.js @@ -7,18 +7,18 @@ export default { }, indicatorList: { padding: '1rem', - gap: '0.5rem' + gap: '1rem' }, indicator: { - width: '2rem', - height: '0.5rem', - borderRadius: '{content.border.radius}', + width: '1.25rem', + height: '1.25rem', + borderRadius: '50%', focusRing: { - width: '{focus.ring.width}', - style: '{focus.ring.style}', - color: '{focus.ring.color}', - offset: '{focus.ring.offset}', - shadow: '{focus.ring.shadow}' + width: '0', + style: 'none', + color: 'unset', + offset: '0', + shadow: 'none' } }, colorScheme: { @@ -36,5 +36,22 @@ export default { activeBackground: '{primary.color}' } } - } + }, + style: ({ dt }) => ` +.p-carousel-indicator-button:hover { + box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('text.color')}, transparent 96%); +} + +.p-carousel-indicator-button:focus-visible { + box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('text.color')}, transparent 96%); +} + +.p-carousel-indicator-active .p-carousel-indicator-button:hover { + box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('carousel.indicator.active.background')}, transparent 92%); +} + +.p-carousel-indicator-active .p-carousel-indicator-button:focus-visible { + box-shadow: 0 0 1px 10px color-mix(in srgb, ${dt('carousel.indicator.active.background')}, transparent 84%); +} +` }; diff --git a/packages/themes/src/presets/material/chip/index.js b/packages/themes/src/presets/material/chip/index.js index 94a4f8a7d..05146e235 100644 --- a/packages/themes/src/presets/material/chip/index.js +++ b/packages/themes/src/presets/material/chip/index.js @@ -38,7 +38,7 @@ export default { }, dark: { root: { - background: '{surface.800}', + background: '{surface.700}', color: '{surface.0}' }, icon: { diff --git a/packages/themes/src/presets/material/galleria/index.js b/packages/themes/src/presets/material/galleria/index.js index e94322461..cff8f5961 100644 --- a/packages/themes/src/presets/material/galleria/index.js +++ b/packages/themes/src/presets/material/galleria/index.js @@ -35,7 +35,7 @@ export default { }, thumbnailNavButton: { size: '2rem', - borderRadius: '{content.border.radius}', + borderRadius: '50%', gutter: '0.5rem', focusRing: { width: '{focus.ring.width}', diff --git a/packages/themes/src/presets/material/progressbar/index.js b/packages/themes/src/presets/material/progressbar/index.js index cce54bfe9..2fc85e25e 100644 --- a/packages/themes/src/presets/material/progressbar/index.js +++ b/packages/themes/src/presets/material/progressbar/index.js @@ -2,7 +2,7 @@ export default { root: { background: '{content.border.color}', borderRadius: '{content.border.radius}', - height: '1.25rem' + height: '1rem' }, value: { background: '{primary.color}' diff --git a/packages/themes/src/presets/material/tag/index.js b/packages/themes/src/presets/material/tag/index.js index b6c535c19..6c5243e45 100644 --- a/packages/themes/src/presets/material/tag/index.js +++ b/packages/themes/src/presets/material/tag/index.js @@ -13,28 +13,28 @@ export default { colorScheme: { light: { primary: { - background: '{primary.100}', - color: '{primary.700}' + background: '{primary.color}', + color: '{primary.contrast.color}' }, secondary: { background: '{surface.100}', color: '{surface.600}' }, success: { - background: '{green.100}', - color: '{green.700}' + background: '{green.500}', + color: '{surface.0}' }, info: { - background: '{sky.100}', - color: '{sky.700}' + background: '{sky.500}', + color: '{surface.0}' }, warn: { - background: '{orange.100}', - color: '{orange.700}' + background: '{orange.500}', + color: '{surface.0}' }, danger: { - background: '{red.100}', - color: '{red.700}' + background: '{red.500}', + color: '{surface.0}' }, contrast: { background: '{surface.950}', @@ -43,28 +43,28 @@ export default { }, dark: { primary: { - background: 'color-mix(in srgb, {primary.500}, transparent 84%)', - color: '{primary.300}' + background: '{primary.color}', + color: '{primary.contrast.color}' }, secondary: { background: '{surface.800}', color: '{surface.300}' }, success: { - background: 'color-mix(in srgb, {green.500}, transparent 84%)', - color: '{green.300}' + background: '{green.400}', + color: '{green.950}' }, info: { - background: 'color-mix(in srgb, {sky.500}, transparent 84%)', - color: '{sky.300}' + background: '{sky.400}', + color: '{sky.950}' }, warn: { - background: 'color-mix(in srgb, {orange.500}, transparent 84%)', - color: '{orange.300}' + background: '{orange.400}', + color: '{orange.950}' }, danger: { - background: 'color-mix(in srgb, {red.500}, transparent 84%)', - color: '{red.300}' + background: '{red.400}', + color: '{red.950}' }, contrast: { background: '{surface.0}',