From 90831e9f8db4b59fa8a9079d8b6f17915e973cb4 Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Fri, 16 Feb 2024 13:34:41 +0300 Subject: [PATCH] Migrated DataView, OrderList, PickList --- components/lib/theme/aura/dataview/index.js | 78 ++++++++ .../lib/theme/aura/dataview/package.json | 6 + components/lib/theme/aura/index.js | 18 +- components/lib/theme/aura/orderlist/index.js | 167 ++++++++++++++++++ .../lib/theme/aura/orderlist/package.json | 6 + components/lib/theme/aura/picklist/index.js | 167 ++++++++++++++++++ .../lib/theme/aura/picklist/package.json | 6 + 7 files changed, 444 insertions(+), 4 deletions(-) create mode 100644 components/lib/theme/aura/dataview/index.js create mode 100644 components/lib/theme/aura/dataview/package.json create mode 100644 components/lib/theme/aura/orderlist/index.js create mode 100644 components/lib/theme/aura/orderlist/package.json create mode 100644 components/lib/theme/aura/picklist/index.js create mode 100644 components/lib/theme/aura/picklist/package.json diff --git a/components/lib/theme/aura/dataview/index.js b/components/lib/theme/aura/dataview/index.js new file mode 100644 index 000000000..e9db6e05c --- /dev/null +++ b/components/lib/theme/aura/dataview/index.js @@ -0,0 +1,78 @@ +export default { + variables: { + colorScheme: { + light: { + header: { + background: '{surface.0}', + borderColor: '{surface.200}', + textColor: '{surface.700}' + }, + content: { + background: '{surface.0}', + textColor: '{surface.700}' + }, + footer: { + background: '{surface.0}', + borderColor: '{surface.200}', + textColor: '{surface.700}' + } + }, + dark: { + header: { + background: '{surface.900}', + borderColor: '{surface.700}', + textColor: '{surface.0}' + }, + content: { + background: '{surface.900}', + textColor: '{surface.0}' + }, + footer: { + background: '{surface.900}', + borderColor: '{surface.700}', + textColor: '{surface.0}' + } + } + } + }, + css: ` +.p-dataview .p-paginator-top { + border-width: 0 0 1px 0; + border-radius: 0; +} + +.p-dataview .p-paginator-bottom { + border-width: 0 0 1px 0; + border-radius: 0; +} + +.p-dataview-header { + background: var(--p-dataview-header-background); + color: var(--p-dataview-header-text-color); + border: 1px solid var(--p-dataview-header-border-color); + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; +} + +.p-dataview-content { + background: var(--p-dataview-content-background); + color: var(--p-dataview-content-text-color); + border: 0 none; + padding: 0; +} + +.p-dataview-footer { + background: var(--p-dataview-footer-background); + color: var(--p-dataview-footer-text-color); + border: 1px solid var(--p-dataview-footer-border-color); + border-width: 0 0 1px 0; + padding: 0.75rem 1rem; + font-weight: 600; +} + +.p-dataview-layout-options.p-selectbutton .p-button svg { + position: relative; +} +` +}; diff --git a/components/lib/theme/aura/dataview/package.json b/components/lib/theme/aura/dataview/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/theme/aura/dataview/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/aura/index.js b/components/lib/theme/aura/index.js index b6109f863..2c2238a5a 100644 --- a/components/lib/theme/aura/index.js +++ b/components/lib/theme/aura/index.js @@ -10,6 +10,7 @@ import chip from 'primevue/theme/aura/chip'; import confirmdialog from 'primevue/theme/aura/confirmdialog'; import confirmpopup from 'primevue/theme/aura/confirmpopup'; import contextmenu from 'primevue/theme/aura/contextmenu'; +import dataview from 'primevue/theme/aura/dataview'; import dialog from 'primevue/theme/aura/dialog'; import divider from 'primevue/theme/aura/divider'; import dock from 'primevue/theme/aura/dock'; @@ -24,9 +25,11 @@ import menu from 'primevue/theme/aura/menu'; import menubar from 'primevue/theme/aura/menubar'; import message from 'primevue/theme/aura/message'; import metergroup from 'primevue/theme/aura/metergroup'; +import orderlist from 'primevue/theme/aura/orderlist'; import overlaypanel from 'primevue/theme/aura/overlaypanel'; import panel from 'primevue/theme/aura/panel'; import panelmenu from 'primevue/theme/aura/panelmenu'; +import picklist from 'primevue/theme/aura/picklist'; import progressbar from 'primevue/theme/aura/progressbar'; import progressspinner from 'primevue/theme/aura/progressspinner'; import scrollpanel from 'primevue/theme/aura/scrollpanel'; @@ -124,9 +127,11 @@ export default { hoverColor: '{primary.600}', activeColor: '{primary.700}' }, - highlight: { + listItemHighlight: { background: '{primary.50}', - textColor: '{primary.700}' + backgroundFocus: '{primary.100}', + textColor: '{primary.700}', + textColorFocus: '{primary.800}' }, maskBackground: 'rgba(0,0,0,0.4)' }, @@ -151,9 +156,11 @@ export default { hoverColor: '{primary.300}', activeColor: '{primary.200}' }, - highlight: { + listItemHighlight: { background: 'color-mix(in srgb, {primary.400}, transparent 84%)', - textColor: 'rgba(255,255,255,.87)' + backgroundFocus: 'color-mix(in srgb, {primary.400}, transparent 76%)', + textColor: 'rgba(255,255,255,.87)', + textColorFocus: 'rgba(255,255,255,.87)' }, maskBackground: 'rgba(0,0,0,0.4)' } @@ -173,6 +180,7 @@ export default { confirmdialog, confirmpopup, contextmenu, + dataview, dialog, divider, dock, @@ -186,9 +194,11 @@ export default { image, inlinemessage, inplace, + orderlist, overlaypanel, panel, panelmenu, + picklist, progressbar, progressspinner, scrollpanel, diff --git a/components/lib/theme/aura/orderlist/index.js b/components/lib/theme/aura/orderlist/index.js new file mode 100644 index 000000000..f6868f034 --- /dev/null +++ b/components/lib/theme/aura/orderlist/index.js @@ -0,0 +1,167 @@ +export default { + variables: { + colorScheme: { + light: { + list: { + background: '{surface.0}', + borderColor: '{surface.200}' + }, + header: { + textColor: '{surface.500}' + }, + item: { + background: 'transparent', + backgroundHover: '{surface.100}', + backgroundFocus: '{surface.100}', + textColor: '{surface.700}', + textColorHover: '{surface.800}', + textColorFocus: '{surface.800}' + }, + control: { + background: '{surface.100}', + backgroundHover: '{surface.200}', + backgroundActive: '{surface.300}', + borderColor: '{surface.100}', + borderColorHover: '{surface.200}', + borderColorActive: '{surface.300}', + textColor: '{surface.600}', + textColorHover: '{surface.700}', + textColorActive: '{surface.800}' + } + }, + dark: { + list: { + background: '{surface.900}', + borderColor: '{surface.700}' + }, + header: { + textColor: '{surface.400}' + }, + item: { + background: 'transparent', + backgroundHover: '{surface.800}', + backgroundFocus: '{surface.800}', + textColor: '{surface.0}', + textColorHover: '{surface.0}', + textColorFocus: '{surface.0}' + }, + control: { + background: '{surface.800}', + backgroundHover: '{surface.700}', + backgroundActive: '{surface.600}', + borderColor: '{surface.800}', + borderColorHover: '{surface.700}', + borderColorActive: '{surface.600}', + textColor: '{surface.300}', + textColorHover: '{surface.200}', + textColorActive: '{surface.100}' + } + } + } + }, + css: ` +.p-orderlist { + display: flex; + gap: 1.125rem; +} + +.p-orderlist-controls { + display: flex; + flex-direction: column; + justify-content: center; + gap: 0.5rem; +} + +.p-orderlist-list-container { + flex: 1 1 auto; + background: var(--p-orderlist-list-background); + border: 1px solid var(--p-orderlist-list-border-color); + border-radius: var(--p-rounded-base); +} + +.p-orderlist .p-orderlist-header { + color: var(--p-orderlist-header-text-color); + border: 0 none; + padding: 0.75rem 1rem 0.5rem 1rem; + font-weight: 600; +} + +.p-orderlist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + padding: 0.25rem 0.25rem; + outline: 0 none; +} + +.p-orderlist-item { + cursor: pointer; + overflow: hidden; + position: relative; + padding: 0.5rem 0.75rem; + margin: 2px 0; + border-radius: var(--p-rounded-base); + border: 0 none; + color: var(--p-orderlist-item-text-color); + background: var(--p-orderlist-item-background); + outline-color: transparent; + transition: transform var(--p-transition-duration), background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration); +} + +.p-orderlist-item:first-child { + margin-top: 0; +} + +.p-orderlist-item:last-child { + margin-bottom: 0; +} + +.p-orderlist-item:not(.p-highlight):hover { + color: var(--p-orderlist-item-text-color-focus); + background: var(--p-orderlist-item-background-focus); +} + +.p-orderlist-item.p-focus { + color: var(--p-orderlist-item-text-color-focus); + background: var(--p-orderlist-item-background-focus); +} + +.p-orderlist-item.p-highlight { + background: var(--p-list-item-highlight-background); + color: var(--p-list-item-highlight-text-color); +} + +.p-orderlist-item.p-highlight.p-focus { + background: var(--p-list-item-highlight-background-focus); + color: var(--p-list-item-highlight-text-color-focus); +} + +.p-orderlist-controls .p-button { + background: var(--p-orderlist-control-background); + border: 1px solid var(--p-orderlist-control-border-color); + color: var(--p-order-listcontrol-text-color); + outline-color: transparent; + transition: opacity var(--p-transition-duration), outline-color var(--p-transition-duration), background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration); +} + +.p-orderlist-controls .p-button:not(:disabled):hover { + background: var(--p-orderlist-control-background-hover); + border: 1px solid var(--p-orderlist-control-border-color-hover); + color: var(--p-order-listcontrol-text-color-hover); +} + +.p-orderlist-controls .p-button:not(:disabled):active { + background: var(--p-orderlist-control-background-active); + border: 1px solid var(--p-orderlist-control-border-color-active); + color: var(--p-order-listcontrol-text-color-active); +} + +.p-orderlist-controls .p-button:focus-visible { + outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-button-primary-background); + outline-offset: var(--p-focus-ring-offset); +} +` +}; diff --git a/components/lib/theme/aura/orderlist/package.json b/components/lib/theme/aura/orderlist/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/theme/aura/orderlist/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/aura/picklist/index.js b/components/lib/theme/aura/picklist/index.js new file mode 100644 index 000000000..1f0fe512a --- /dev/null +++ b/components/lib/theme/aura/picklist/index.js @@ -0,0 +1,167 @@ +export default { + variables: { + colorScheme: { + light: { + list: { + background: '{surface.0}', + borderColor: '{surface.200}' + }, + header: { + textColor: '{surface.500}' + }, + item: { + background: 'transparent', + backgroundHover: '{surface.100}', + backgroundFocus: '{surface.100}', + textColor: '{surface.700}', + textColorHover: '{surface.800}', + textColorFocus: '{surface.800}' + }, + control: { + background: '{surface.100}', + backgroundHover: '{surface.200}', + backgroundActive: '{surface.300}', + borderColor: '{surface.100}', + borderColorHover: '{surface.200}', + borderColorActive: '{surface.300}', + textColor: '{surface.600}', + textColorHover: '{surface.700}', + textColorActive: '{surface.800}' + } + }, + dark: { + list: { + background: '{surface.900}', + borderColor: '{surface.700}' + }, + header: { + textColor: '{surface.400}' + }, + item: { + background: 'transparent', + backgroundHover: '{surface.800}', + backgroundFocus: '{surface.800}', + textColor: '{surface.0}', + textColorHover: '{surface.0}', + textColorFocus: '{surface.0}' + }, + control: { + background: '{surface.800}', + backgroundHover: '{surface.700}', + backgroundActive: '{surface.600}', + borderColor: '{surface.800}', + borderColorHover: '{surface.700}', + borderColorActive: '{surface.600}', + textColor: '{surface.300}', + textColorHover: '{surface.200}', + textColorActive: '{surface.100}' + } + } + } + }, + css: ` +.p-picklist { + display: flex; + gap: 1.125rem; +} + +.p-picklist-buttons { + display: flex; + flex-direction: column; + justify-content: center; + gap: 0.5rem; +} + +.p-picklist-list-wrapper { + flex: 1 1 50%; + background: var(--p-picklist-list-background); + border: 1px solid var(--p-picklist-list-border-color); + border-radius: var(--p-picklist-base); +} + +.p-picklist .p-picklist-header { + color: var(--p-picklist-header-text-color); + border: 0 none; + padding: 0.75rem 1rem 0.5rem 1rem; + font-weight: 600; +} + +.p-picklist-list { + list-style-type: none; + margin: 0; + padding: 0; + overflow: auto; + min-height: 12rem; + max-height: 24rem; + padding: 0.25rem 0.25rem; + outline: 0 none; +} + +.p-picklist-item { + cursor: pointer; + overflow: hidden; + position: relative; + padding: 0.5rem 0.75rem; + margin: 2px 0; + border-radius: var(--p-rounded-base); + border: 0 none; + color: var(--p-picklist-item-text-color); + background: var(--p-picklist-item-background); + outline-color: transparent; + transition: transform var(--p-transition-duration), background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration); +} + +.p-picklist-item:first-child { + margin-top: 0; +} + +.p-picklist-item:last-child { + margin-bottom: 0; +} + +.p-picklist-item:not(.p-highlight):hover { + color: var(--p-picklist-item-text-color-focus); + background: var(--p-picklist-item-background-focus); +} + +.p-picklist-item.p-focus { + color: var(--p-picklist-item-text-color-focus); + background: var(--p-picklist-item-background-focus); +} + +.p-picklist-item.p-highlight { + background: var(--p-list-item-highlight-background); + color: var(--p-list-item-highlight-text-color); +} + +.p-picklist-item.p-highlight.p-focus { + background: var(--p-list-item-highlight-background-focus); + color: var(--p-list-item-highlight-text-color-focus); +} + +.p-picklist-buttons .p-button { + background: var(--p-picklist-control-background); + border: 1px solid var(--p-picklist-control-border-color); + color: var(--p-order-listcontrol-text-color); + outline-color: transparent; + transition: opacity var(--p-transition-duration), outline-color var(--p-transition-duration), background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration); +} + +.p-picklist-buttons .p-button:not(:disabled):hover { + background: var(--p-picklist-control-background-hover); + border: 1px solid var(--p-picklist-control-border-color-hover); + color: var(--p-order-listcontrol-text-color-hover); +} + +.p-picklist-buttons .p-button:not(:disabled):active { + background: var(--p-picklist-control-background-active); + border: 1px solid var(--p-picklist-control-border-color-active); + color: var(--p-order-listcontrol-text-color-active); +} + +.p-picklist-buttons .p-button:focus-visible { + outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-button-primary-background); + outline-offset: var(--p-focus-ring-offset); +} +` +}; diff --git a/components/lib/theme/aura/picklist/package.json b/components/lib/theme/aura/picklist/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/theme/aura/picklist/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +}