From 239ed71cd7c909b7397645d9c9ae0e1c08757d0b Mon Sep 17 00:00:00 2001 From: mertsincan Date: Tue, 2 Jan 2024 21:58:32 +0000 Subject: [PATCH] Theme: `accordion` and `card` --- .../lib/accordion/style/AccordionStyle.js | 6 +- .../lib/theme/lara/accordion/index.d.ts | 31 ++++ components/lib/theme/lara/accordion/index.js | 142 ++++++++++++++++++ .../lib/theme/lara/accordion/package.json | 6 + components/lib/theme/lara/card/index.d.ts | 31 ++++ components/lib/theme/lara/card/index.js | 73 +++++++++ components/lib/theme/lara/card/package.json | 6 + components/lib/theme/lara/index.js | 9 +- components/lib/theme/utils/toVariables.js | 2 +- 9 files changed, 300 insertions(+), 6 deletions(-) create mode 100644 components/lib/theme/lara/accordion/index.d.ts create mode 100644 components/lib/theme/lara/accordion/index.js create mode 100644 components/lib/theme/lara/accordion/package.json create mode 100644 components/lib/theme/lara/card/index.d.ts create mode 100644 components/lib/theme/lara/card/index.js create mode 100644 components/lib/theme/lara/card/package.json diff --git a/components/lib/accordion/style/AccordionStyle.js b/components/lib/accordion/style/AccordionStyle.js index 539d8d3eb..9c64b528f 100644 --- a/components/lib/accordion/style/AccordionStyle.js +++ b/components/lib/accordion/style/AccordionStyle.js @@ -10,11 +10,11 @@ const css = ` position: relative; text-decoration: none; } - + .p-accordion-header-action:focus { z-index: 1; } - + .p-accordion-header-text { line-height: 1; } @@ -47,6 +47,6 @@ const classes = { export default BaseStyle.extend({ name: 'accordion', - css, + //css, // @todo classes }); diff --git a/components/lib/theme/lara/accordion/index.d.ts b/components/lib/theme/lara/accordion/index.d.ts new file mode 100644 index 000000000..b3dfdca71 --- /dev/null +++ b/components/lib/theme/lara/accordion/index.d.ts @@ -0,0 +1,31 @@ +interface PanelThemeVariables { + panelHeaderBorder?: string | undefined; + panelHeaderPadding?: string | undefined; + panelHeaderBg?: string | undefined; + panelHeaderTextColor?: string | undefined; + panelHeaderFontWeight?: string | undefined; + panelHeaderIconWidth?: string | undefined; + panelHeaderIconHeight?: string | undefined; + panelHeaderIconColor?: string | undefined; + panelHeaderIconBorder?: string | undefined; + panelHeaderIconBg?: string | undefined; + panelHeaderIconBorderRadius?: string | undefined; + panelHeaderIconTransition?: string | undefined; + panelHeaderIconHoverColor?: string | undefined; + panelHeaderIconHoverBorderColor?: string | undefined; + panelHeaderIconHoverBg?: string | undefined; + panelHeaderIconFocusOutline?: string | undefined; + panelHeaderIconFocusOutlineOffset?: string | undefined; + panelHeaderIconFocusShadow?: string | undefined; + panelToggleableHeaderPadding?: string | undefined; + panelContentPadding?: string | undefined; + panelContentBorder?: string | undefined; + panelContentBg?: string | undefined; + panelContentTextColor?: string | undefined; + panelContentBorderTop?: string | undefined; + panelFooterPadding?: string | undefined; + panelFooterBorder?: string | undefined; + panelFooterBg?: string | undefined; + panelFooterTextColor?: string | undefined; + panelFooterBorderTop?: string | undefined; +} diff --git a/components/lib/theme/lara/accordion/index.js b/components/lib/theme/lara/accordion/index.js new file mode 100644 index 000000000..6d610d300 --- /dev/null +++ b/components/lib/theme/lara/accordion/index.js @@ -0,0 +1,142 @@ +export default { + variables: { + common: { + header: { + paddingX: '1.25rem', + paddingY: '1.25rem', + borderWidth: '1px', + borderStyle: 'solid', + fontWeight: 700 + }, + content: { + paddingX: '1.25rem', + paddingY: '1.25rem', + borderWidth: '1px', + borderStyle: 'solid' + }, + tab: { + gap: '4px' + } + }, + light: { + header: { + borderColor: '{shade.300}', + color: '{shade.600}', + background: '{shade.100}', + states: { + hover: { + background: '{shade.200}', + borderColor: '{shade.300}', + color: '{shade.800}' + }, + active: { + background: '{shade.100}', + borderColor: '{shade.300}', + color: '{shade.800}' + }, + activeHover: { + borderColor: '{shade.300}', + background: '{shade.200}', + color: '{shade.800}' + } + } + }, + content: { + borderColor: '{shade.300}', + background: '{shade.0}', + color: '{shade.700}' + } + }, + dark: { + header: { + borderColor: '{shade.300}', + color: '{shade.600}', + background: '{shade.100}', + states: { + hover: { + background: '{shade.200}', + borderColor: '{shade.300}', + color: '{shade.800}' + }, + active: { + background: '{shade.100}', + borderColor: '{shade.300}', + color: '{shade.800}' + }, + activeHover: { + borderColor: '{shade.300}', + background: '{shade.200}', + color: '{shade.800}' + } + } + }, + content: { + borderColor: '{shade.300}', + background: '{shade.0}', + color: '{shade.700}' + } + } + }, + css: ` +.p-accordion-header-action { + cursor: pointer; + display: flex; + align-items: center; + user-select: none; + position: relative; + text-decoration: none; + padding: var(--p-accordion-header-padding-y) var(--p-accordion-header-padding-x); + border: var(--p-accordion-header-border-width) var(--p-accordion-header-border-style) var(--p-accordion-header-border-color); + color: var(--p-accordion-header-color); + background: var(--p-accordion-header-background); + font-weight: var(--p-accordion-header-font-weight); + border-radius: var(--p-border-radius); + transition: var(--p-transition); +} +.p-accordion-header-action:focus { + z-index: 1; +} +.p-accordion-header-text { + line-height: 1; +} +.p-accordion-toggle-icon { + margin-right: var(--p-gap); +} +.p-accordion-header:not(.p-disabled) .p-accordion-header-action:focus-visible { + outline: var(--p-focus-outline); /* @todo */ + outline-offset: var(--p-focus-outline-offset); + box-shadow: inset var(--p-focus-shadow); +} +.p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-action { + background: var(--p-accordion-header-hover-background); + border-color: var(--p-accordion-header-hover-border-color); + color: var(--p-accordion-header-hover-color); +} +.p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-action { + background: var(--p-accordion-header-active-background); + border-color: var(--p-accordion-header-active-border-color); + color: var(--p-accordion-header-active-color); + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +.p-accordion-header:not(.p-disabled).p-highlight:hover .p-accordion-header-action { + border-color: var(--p-accordion-header-active-hover-border-color); + background: var(--p-accordion-header-active-hover-background); + color: var(--p-accordion-header-active-hover-color); +} +.p-accordion-content { + padding: var(--p-accordion-content-padding-y) var(--p-accordion-content-padding-x); + border: var(--p-accordion-content-border-width) var(--p-accordion-content-border-style) var(--p-accordion-content-border-color); + background: var(--p-accordion-content-background); + color: var(--p-accordion-content-color); + border-top: 0; + border-top-right-radius: 0; + border-top-left-radius: 0; + border-bottom-right-radius: var(--p-border-radius); + border-bottom-left-radius: var(--p-border-radius); +} +.p-accordion-tab { + margin-bottom: var(--p-accordion-tab-gap); +} + ` +}; diff --git a/components/lib/theme/lara/accordion/package.json b/components/lib/theme/lara/accordion/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/theme/lara/accordion/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/theme/lara/card/index.d.ts b/components/lib/theme/lara/card/index.d.ts new file mode 100644 index 000000000..b3dfdca71 --- /dev/null +++ b/components/lib/theme/lara/card/index.d.ts @@ -0,0 +1,31 @@ +interface PanelThemeVariables { + panelHeaderBorder?: string | undefined; + panelHeaderPadding?: string | undefined; + panelHeaderBg?: string | undefined; + panelHeaderTextColor?: string | undefined; + panelHeaderFontWeight?: string | undefined; + panelHeaderIconWidth?: string | undefined; + panelHeaderIconHeight?: string | undefined; + panelHeaderIconColor?: string | undefined; + panelHeaderIconBorder?: string | undefined; + panelHeaderIconBg?: string | undefined; + panelHeaderIconBorderRadius?: string | undefined; + panelHeaderIconTransition?: string | undefined; + panelHeaderIconHoverColor?: string | undefined; + panelHeaderIconHoverBorderColor?: string | undefined; + panelHeaderIconHoverBg?: string | undefined; + panelHeaderIconFocusOutline?: string | undefined; + panelHeaderIconFocusOutlineOffset?: string | undefined; + panelHeaderIconFocusShadow?: string | undefined; + panelToggleableHeaderPadding?: string | undefined; + panelContentPadding?: string | undefined; + panelContentBorder?: string | undefined; + panelContentBg?: string | undefined; + panelContentTextColor?: string | undefined; + panelContentBorderTop?: string | undefined; + panelFooterPadding?: string | undefined; + panelFooterBorder?: string | undefined; + panelFooterBg?: string | undefined; + panelFooterTextColor?: string | undefined; + panelFooterBorderTop?: string | undefined; +} diff --git a/components/lib/theme/lara/card/index.js b/components/lib/theme/lara/card/index.js new file mode 100644 index 000000000..aa8326ec5 --- /dev/null +++ b/components/lib/theme/lara/card/index.js @@ -0,0 +1,73 @@ +export default { + variables: { + common: { + body: { + paddingX: '1.25rem', + paddingY: '1.25rem' + }, + title: { + fontSize: '1.5rem', + fontWeight: 700 + }, + subtitle: { + fontWeight: 400 + }, + content: { + paddingX: '0', + paddingY: '1.25rem' + }, + footer: { + // 1.25rem 0 0 0 + paddingX: '', + paddingY: '' + } + }, + light: { + root: { + background: '{shade.0}', + color: '{shade.700}', + boxShadow: '0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12)' + }, + subtitle: { + color: '{shade.600}' + } + }, + dark: { + root: { + background: '{shade.0}', + color: '{shade.700}', + boxShadow: '0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12)' + }, + subtitle: { + color: '{shade.600}' + } + } + }, + css: ` +.p-card { + background: var(--p-card-background); + color: var(--p-card-color); + box-shadow: var(--p-card-box-shadow); + border-radius: var(--p-border-radius); +} +.p-card-body { + padding: var(--p-card-body-padding-y) var(--p-card-body-padding-x); +} +.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/card/package.json b/components/lib/theme/lara/card/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/theme/lara/card/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +} diff --git a/components/lib/theme/lara/index.js b/components/lib/theme/lara/index.js index e8c1896eb..3a48f161d 100644 --- a/components/lib/theme/lara/index.js +++ b/components/lib/theme/lara/index.js @@ -1,3 +1,5 @@ +import accordion from 'primevue/theme/lara/accordion'; +import card from 'primevue/theme/lara/card'; import global from 'primevue/theme/lara/global'; import panel from 'primevue/theme/lara/panel'; @@ -58,13 +60,16 @@ export default { 900: '{slate.900}', 950: '{slate.950}' }, - fontFamily: 'Inter var', + fontFamily: '"Inter var", sans-serif', borderRadius: '6px', + gap: '.5rem', // inline-spacing transitionDuration: '.2s', - transition: 'background-color {transitionDuration}, color {transitionDuration}, box-shadow {transitionDuration}' + transition: 'background-color {transitionDuration}, color {transitionDuration}, box-shadow {transitionDuration}, border-color {transitionDuration}' }, components: { global, + accordion, + card, panel } }; diff --git a/components/lib/theme/utils/toVariables.js b/components/lib/theme/utils/toVariables.js index 5890d2212..7a60067a4 100644 --- a/components/lib/theme/utils/toVariables.js +++ b/components/lib/theme/utils/toVariables.js @@ -3,7 +3,7 @@ import SharedUtils from './sharedUtils'; const VARIABLE = { PREFIX: 'p', SELECTOR: ':root', - EXCLUDED_KEY_REGEX: /^(primitive|semantic|light|common)$/gi + EXCLUDED_KEY_REGEX: /^(primitive|semantic|light|common|root|states)$/gi }; export default function (theme, options = {}) {