From 72d8356b51311fc375354b186b0c67e9dff5bca0 Mon Sep 17 00:00:00 2001 From: mertsincan Date: Wed, 3 Jan 2024 11:01:26 +0000 Subject: [PATCH] Update Theme: `accordion`, `card` and `panel` --- components/lib/theme/lara/accordion/index.js | 24 ++++----- components/lib/theme/lara/card/index.js | 35 ++++++------- components/lib/theme/lara/index.js | 52 +++++++++++++++++++- components/lib/theme/lara/panel/index.js | 22 ++++----- 4 files changed, 89 insertions(+), 44 deletions(-) diff --git a/components/lib/theme/lara/accordion/index.js b/components/lib/theme/lara/accordion/index.js index 6d610d300..543c061ba 100644 --- a/components/lib/theme/lara/accordion/index.js +++ b/components/lib/theme/lara/accordion/index.js @@ -2,15 +2,15 @@ export default { variables: { common: { header: { - paddingX: '1.25rem', - paddingY: '1.25rem', + paddingX: '{p.5}', + paddingY: '{p.5}', borderWidth: '1px', borderStyle: 'solid', fontWeight: 700 }, content: { - paddingX: '1.25rem', - paddingY: '1.25rem', + paddingX: '{p.5}', + paddingY: '{p.5}', borderWidth: '1px', borderStyle: 'solid' }, @@ -32,12 +32,14 @@ export default { active: { background: '{shade.100}', borderColor: '{shade.300}', - color: '{shade.800}' - }, - activeHover: { - borderColor: '{shade.300}', - background: '{shade.200}', - color: '{shade.800}' + color: '{shade.800}', + states: { + hover: { + borderColor: '{shade.300}', + background: '{shade.200}', + color: '{shade.800}' + } + } } } }, @@ -100,7 +102,7 @@ export default { line-height: 1; } .p-accordion-toggle-icon { - margin-right: var(--p-gap); + margin-right: var(--p-inline-gap); } .p-accordion-header:not(.p-disabled) .p-accordion-header-action:focus-visible { outline: var(--p-focus-outline); /* @todo */ diff --git a/components/lib/theme/lara/card/index.js b/components/lib/theme/lara/card/index.js index aa8326ec5..d5e6d9731 100644 --- a/components/lib/theme/lara/card/index.js +++ b/components/lib/theme/lara/card/index.js @@ -2,24 +2,19 @@ export default { variables: { common: { body: { - paddingX: '1.25rem', - paddingY: '1.25rem' + paddingX: '{p.5}', + paddingY: '{p.5}', + gap: '{gap.5}' + }, + caption: { + gap: '{gap.2}' }, title: { - fontSize: '1.5rem', + fontSize: '{text.2xl}', fontWeight: 700 }, subtitle: { fontWeight: 400 - }, - content: { - paddingX: '0', - paddingY: '1.25rem' - }, - footer: { - // 1.25rem 0 0 0 - paddingX: '', - paddingY: '' } }, light: { @@ -51,23 +46,23 @@ export default { border-radius: var(--p-border-radius); } .p-card-body { + display: flex; + flex-direction: column; + gap: var(--p-card-body-gap); padding: var(--p-card-body-padding-y) var(--p-card-body-padding-x); } +.p-card-caption { + display: flex; + flex-direction: column; + gap: var(--p-card-caption-gap); +} .p-card-title { font-size: var(--p-card-title-font-size); font-weight: var(--p-card-title-font-weight); - margin-bottom: var(--p-gap); } .p-card-subtitle { font-weight: var(--p-card-subtitle-font-weight); - margin-bottom: var(--p-gap); color: var(--p-card-subtitle-color); -} -.p-card-content { - padding: var(--p-card-content-padding-y) var(--p-card-content-padding-x); -} -.p-card-footer { - padding: var(--p-card-footer-padding-y) var(--p-card-footer-padding-x); } ` }; diff --git a/components/lib/theme/lara/index.js b/components/lib/theme/lara/index.js index 3a48f161d..3aafa703f 100644 --- a/components/lib/theme/lara/index.js +++ b/components/lib/theme/lara/index.js @@ -5,6 +5,20 @@ import panel from 'primevue/theme/lara/panel'; export default { primitive: { + /*** @todo Remove ***/ + shade: { + 0: '#ffffff', + 100: '#f9fafb', + 200: '#f3f4f6', + 300: '#e5e7eb', + 400: '#d1d5db', + 500: '#9ca3af', + 600: '#6b7280', + 700: '#4b5563', + 800: '#374151', + 900: '#1f2937' + }, + /********************/ emerald: { 50: '#ecfdf5', 100: '#d1fae5', @@ -30,6 +44,42 @@ export default { 800: '#1e293b', 900: '#0f172a', 950: '#020617' + }, + gap: { + 1: '0.25rem', + 2: '0.5rem', + 3: '0.75rem', + 4: '1rem', + 5: '1.25rem', + 6: '1.5rem' + }, + p: { + 1: '0.25rem', + 2: '0.5rem', + 3: '0.75rem', + 4: '1rem', + 5: '1.25rem', + 6: '1.5rem', + 7: '1.75rem', + 8: '2rem' + }, + m: { + 1: '0.25rem', + 2: '0.5rem', + 3: '0.75rem', + 4: '1rem', + 5: '1.25rem', + 6: '1.5rem', + 7: '1.75rem', + 8: '2rem' + }, + text: { + xs: '0.75rem', + sm: '0.875rem', + base: '1rem', + lg: '1.125rem', + xl: '1.25rem', + '2xl': '1.5rem' } }, semantic: { @@ -62,7 +112,7 @@ export default { }, fontFamily: '"Inter var", sans-serif', borderRadius: '6px', - gap: '.5rem', // inline-spacing + inlineGap: '{gap.2}', // inline-spacing transitionDuration: '.2s', transition: 'background-color {transitionDuration}, color {transitionDuration}, box-shadow {transitionDuration}, border-color {transitionDuration}' }, diff --git a/components/lib/theme/lara/panel/index.js b/components/lib/theme/lara/panel/index.js index 9033c77d6..8199ad59c 100644 --- a/components/lib/theme/lara/panel/index.js +++ b/components/lib/theme/lara/panel/index.js @@ -4,8 +4,8 @@ export default { header: { borderWidth: '1px', borderStyle: 'solid', - paddingX: '1.25rem', - paddingY: '1.25rem', + paddingX: '{p.5}', + paddingY: '{p.5}', fontWeight: 700 }, headerIcon: { @@ -16,18 +16,18 @@ export default { borderRadius: '50%' }, toggleableHeader: { - paddingX: '1.25rem', - paddingY: '0.75rem' + paddingX: '{p.5}', + paddingY: '{p.3}' }, content: { - paddingX: '1.25rem', - paddingY: '1.25rem', + paddingX: '{p.5}', + paddingY: '{p.5}', borderWidth: '1px', borderStyle: 'solid' }, footer: { - paddingX: '1.25rem', - paddingY: '0.75rem', + paddingX: '{p.5}', + paddingY: '{p.3}', borderWidth: '1px', borderStyle: 'solid' } @@ -48,9 +48,7 @@ export default { borderColor: 'transparent', background: '{surface.100}' }, - focus: { - - } + focus: {} } }, content: { @@ -123,7 +121,7 @@ export default { color: var(--p-panel-header-icon-color); border: var(--p-panel-header-icon-border-width) var(--p-panel-header-icon-border-style) var(--p-panel-header-icon-border-color); background: var(--p-panel-header-icon-background); - border-radius: var(--p-border-radius); + border-radius: var(--p-panel-header-icon-border-radius); transition: var(--p-transition); } .p-panel-header-icon:enabled:hover {