vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Migrated Data Components

pull/5507/head
Cagatay Civici 2024-03-13 14:13:29 +03:00
parent 02104cea25
commit c828680c69
17 changed files with 363 additions and 356 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
components/lib/themes/primeone/base/datatable/index.js
View File

@ -22,7 +22,7 @@ export default {
} }
.p-datatable .p-sortable-column .p-sortable-column-icon { .p-datatable .p-sortable-column .p-sortable-column-icon {
color: var(--p-datatable-sort-icon-color); color: ${dt('datatable.sort.icon.color')};
margin-left: 0.5rem; margin-left: 0.5rem;
transition: color ${dt('transition.duration')}; transition: color ${dt('transition.duration')};
} }
@ -39,17 +39,17 @@ export default {
} }
.p-datatable .p-sortable-column:not(.p-highlight):hover { .p-datatable .p-sortable-column:not(.p-highlight):hover {
background: var(--p-datatable-header-cell-background-hover); background: ${dt('datatable.header.cell.hover.background')};
color: var(--p-datatable-header-cell-text-color-hover); color: ${dt('datatable.header.cell.hover.color')};
} }
.p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { .p-datatable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
color: var(--p-datatable-sort-icon-color-hover); color: ${dt('datatable.sort.icon.hover.color')};
} }
.p-datatable .p-sortable-column.p-highlight { .p-datatable .p-sortable-column.p-highlight {
background: var(--p-highlight-background); background: ${dt('highlight.background')};
color: var(--p-highlight-text-color); color: ${dt('highlight.color')};
} }
.p-datatable .p-sortable-column:focus-visible { .p-datatable .p-sortable-column:focus-visible {
@ -58,7 +58,7 @@ export default {
} }
.p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon { .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon {
color: var(--p-highlight-text-color); color: ${dt('highlight.color')};
} }
.p-datatable-hoverable-rows .p-selectable-row { .p-datatable-hoverable-rows .p-selectable-row {
@ -95,12 +95,12 @@ export default {
.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead, .p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-thead,
.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead { .p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-thead {
background: var(--p-datatable-header-cell-background); background: ${dt('datatable.header.cell.background')};
} }
.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot, .p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table > .p-datatable-tfoot,
.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot { .p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table > .p-datatable-tfoot {
background: var(--p-datatable-footer-cell-background); background: ${dt('datatable.footer.cell.background')};
} }
.p-datatable-flex-scrollable { .p-datatable-flex-scrollable {
@ -161,7 +161,7 @@ export default {
position: absolute; position: absolute;
z-index: 10; z-index: 10;
display: none; display: none;
background: var(--p-datatable-resizer-color); background: ${dt('datatable.resizer.color')};
} }
.p-datatable .p-row-toggler, .p-datatable .p-row-toggler,
@ -175,7 +175,7 @@ export default {
position: relative; position: relative;
width: 1.75rem; width: 1.75rem;
height: 1.75rem; height: 1.75rem;
color: var(--p-datatable-row-action-color); color: ${dt('datatable.row.action.color')};
border: 0 none; border: 0 none;
border-radius: 50%; border-radius: 50%;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
@ -186,8 +186,8 @@ export default {
.p-datatable .p-row-editor-init:enabled:hover, .p-datatable .p-row-editor-init:enabled:hover,
.p-datatable .p-row-editor-save:enabled:hover, .p-datatable .p-row-editor-save:enabled:hover,
.p-datatable .p-row-editor-cancel:enabled:hover { .p-datatable .p-row-editor-cancel:enabled:hover {
color: var(--p-datatable-row-action-color-hover); color: ${dt('datatable.row.action.hover.color')};
background: var(--p-datatable-row-action-background-hover); background: ${dt('datatable.row.action.hover.background')};
} }
.p-datatable .p-row-toggler:focus-visible, .p-datatable .p-row-toggler:focus-visible,
@ -206,7 +206,7 @@ export default {
.p-datatable-tbody > tr.p-highlight .p-row-editor-init:hover, .p-datatable-tbody > tr.p-highlight .p-row-editor-init:hover,
.p-datatable-tbody > tr.p-highlight .p-row-editor-save:hover, .p-datatable-tbody > tr.p-highlight .p-row-editor-save:hover,
.p-datatable-tbody > tr.p-highlight .p-row-editor-cancel:hover { .p-datatable-tbody > tr.p-highlight .p-row-editor-cancel:hover {
background: var(--p-datatable-row-action-background-hover-highlight); background: ${dt('datatable.row.action.highlight.hover.background')};
color: inherit; color: inherit;
} }
@ -251,7 +251,7 @@ export default {
position: relative; position: relative;
width: 1.75rem; width: 1.75rem;
height: 1.75rem; height: 1.75rem;
color: var(--p-datatable-filter-menu-button-text-color); color: ${dt('datatable.fiter.menu.button.color')};
border: 0 none; border: 0 none;
background: transparent; background: transparent;
border-radius: 50%; border-radius: 50%;
@ -260,20 +260,20 @@ export default {
} }
.p-column-filter-menu-button:hover { .p-column-filter-menu-button:hover {
background: var(--p-datatable-filter-menu-button-background-hover); background: ${dt('datatable.fiter.menu.button.hover.background')};
color: var(--p-datatable-filter-menu-button-text-color-hover); color: ${dt('datatable.fiter.menu.button.hover.color')};
} }
.p-column-filter-menu-button.p-column-filter-menu-button-open, .p-column-filter-menu-button.p-column-filter-menu-button-open,
.p-column-filter-menu-button.p-column-filter-menu-button-open:hover { .p-column-filter-menu-button.p-column-filter-menu-button-open:hover {
background: var(--p-datatable-filter-menu-button-background-open); background: ${dt('datatable.fiter.menu.button.open.background')};
color: var(--p-datatable-filter-menu-button-text-color-open); color: ${dt('datatable.fiter.menu.button.open.color')};
} }
.p-column-filter-menu-button.p-column-filter-menu-button-active, .p-column-filter-menu-button.p-column-filter-menu-button-active,
.p-column-filter-menu-button.p-column-filter-menu-button-active:hover { .p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
background: var(--p-datatable-filter-menu-button-background-active); background: ${dt('datatable.fiter.menu.button.active.background')};
color: var(--p-datatable-filter-menu-button-text-color-active); color: ${dt('datatable.fiter.menu.button.active.color')};
} }
.p-column-filter-menu-button:focus-visible { .p-column-filter-menu-button:focus-visible {
@ -291,7 +291,7 @@ export default {
position: relative; position: relative;
width: 1.75rem; width: 1.75rem;
height: 1.75rem; height: 1.75rem;
color: var(--p-datatable-filter-clear-button-text-color); color: ${dt('datatable.fiter.clear.button.color')};
border: 0 none; border: 0 none;
background: transparent; background: transparent;
border-radius: 50%; border-radius: 50%;
@ -300,8 +300,8 @@ export default {
} }
.p-column-filter-clear-button:hover { .p-column-filter-clear-button:hover {
background: var(--p-datatable-filter-clear-button-background-hover); background: ${dt('datatable.fiter.clear.button.hover.background')};
color: var(--p-datatable-filter-clear-button-text-color-hover); color: ${dt('datatable.fiter.clear.button.hover.color')};
} }
.p-column-filter-clear-button:focus-visible { .p-column-filter-clear-button:focus-visible {
@ -326,7 +326,7 @@ export default {
.p-column-filter-constraint { .p-column-filter-constraint {
padding: 0; padding: 0;
border-bottom: 1px solid var(--p-datatable-filter-constraint-border-color); border-bottom: 1px solid ${dt('datatable.fiter.contstraint.border.color')};
} }
.p-column-filter-constraint:last-child { .p-column-filter-constraint:last-child {
@ -346,9 +346,9 @@ export default {
} }
.p-column-filter-overlay-menu { .p-column-filter-overlay-menu {
background: var(--p-datatable-filter-overlay-background); background: ${dt('datatable.fiter.overlay.background')};
color: var(--p-datatable-filter-overlay-text-color); color: ${dt('datatable.fiter.overlay.color')};
border: 1px solid var(--p-datatable-filter-overlay-border-color); border: 1px solid ${dt('datatable.fiter.overlay.border.color')};
border-radius: ${dt('rounded.base')}; border-radius: ${dt('rounded.base')};
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
min-width: 12.5rem; min-width: 12.5rem;
@ -409,18 +409,18 @@ export default {
} }
.p-datatable-header { .p-datatable-header {
background: var(--p-datatable-header-background); background: ${dt('datatable.header.background')};
color: var(--p-datatable-header-text-color); color: ${dt('datatable.header.color')};
border: 1px solid var(--p-datatable-header-border-color); border: 1px solid ${dt('datatable.header.border.color')};
border-width: 0 0 1px 0; border-width: 0 0 1px 0;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
font-weight: 600; font-weight: 600;
} }
.p-datatable-footer { .p-datatable-footer {
background: var(--p-datatable-header-background); background: ${dt('datatable.footer.background')};
color: var(--p-datatable-header-text-color); color: ${dt('datatable.footer.color')};
border: 1px solid var(--p-datatable-header-border-color); border: 1px solid ${dt('datatable.footer.border.color')};
border-width: 0 0 1px 0; border-width: 0 0 1px 0;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
font-weight: 600; font-weight: 600;
@ -429,44 +429,44 @@ export default {
.p-datatable-thead > tr > th { .p-datatable-thead > tr > th {
text-align: left; text-align: left;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
background: var(--p-datatable-header-cell-background); background: ${dt('datatable.header.cell.background')};
border: 1px solid var(--p-datatable-header-cell-border-color); border: 1px solid ${dt('datatable.header.cell.border.color')};
border-width: 0 0 1px 0; border-width: 0 0 1px 0;
color: var(--p-datatable-header-cell-text-color); color: ${dt('datatable.header.cell.color')};
font-weight: 600; font-weight: 600;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
} }
.p-datatable-tbody > tr { .p-datatable-tbody > tr {
outline-color: transparent; outline-color: transparent;
background: var(--p-datatable-row-background); background: ${dt('datatable.row.background')};
color: var(--p-datatable-row-text-color); color: ${dt('datatable.row.color')};
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
} }
.p-datatable-tbody > tr > td { .p-datatable-tbody > tr > td {
text-align: left; text-align: left;
border: 1px solid var(--p-datatable-body-cell-border-color); border: 1px solid ${dt('datatable.body.cell.border.color')};
border-width: 0 0 1px 0; border-width: 0 0 1px 0;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
} }
.p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover { .p-datatable-hoverable-rows .p-datatable-tbody > tr:not(.p-highlight):hover {
background: var(--p-datatable-row-background-hover); background: ${dt('datatable.row.hover.background')};
color: var(--p-datatable-row-text-color-hover); color: ${dt('datatable.row.hover.color')};
} }
.p-datatable-tbody > tr.p-highlight { .p-datatable-tbody > tr.p-highlight {
background: var(--p-highlight-background); background: ${dt('highlight.background')};
color: var(--p-highlight-text-color); color: ${dt('highlight.color')};
} }
.p-datatable-tbody > tr:has(+ .p-highlight) > td { .p-datatable-tbody > tr:has(+ .p-highlight) > td {
border-bottom-color: var(--p-datatable-body-cell-border-color-selected); border-bottom-color: ${dt('datatable.body.cell.selected.border.color')};
} }
.p-datatable-tbody > tr.p-highlight > td { .p-datatable-tbody > tr.p-highlight > td {
border-bottom-color: var(--p-datatable-body-cell-border-color-selected); border-bottom-color: ${dt('datatable.body.cell.selected.border.color')};
} }
.p-datatable-tbody > tr:focus-visible { .p-datatable-tbody > tr:focus-visible {
@ -482,19 +482,19 @@ export default {
.p-datatable-tfoot > tr > td { .p-datatable-tfoot > tr > td {
text-align: left; text-align: left;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
border: 1px solid var(--p-datatable-footer-cell-border-color); border: 1px solid ${dt('datatable.footer.cell.border.color')};
border-width: 0 0 1px 0; border-width: 0 0 1px 0;
font-weight: 600; font-weight: 600;
color: var(--p-datatable-footer-cell-text-color); color: ${dt('datatable.footer.cell.color')};
background: var(--p-datatable-footer-cell-background); background: ${dt('datatable.footer.cell.background')};
} }
.p-datatable-tbody > tr.p-datatable-dragpoint-top > td { .p-datatable-tbody > tr.p-datatable-dragpoint-top > td {
box-shadow: inset 0 2px 0 0 var(--p-datatable-drop-point-color); box-shadow: inset 0 2px 0 0 ${dt('datatable.drop.point.color')};
} }
.p-datatable-tbody>tr.p-datatable-dragpoint-bottom > td { .p-datatable-tbody>tr.p-datatable-dragpoint-bottom > td {
box-shadow: inset 0 -2px 0 0 var(--p-datatable-drop-point-color); box-shadow: inset 0 -2px 0 0 ${dt('datatable.drop.point.color')};
} }
.p-datatable-loading-icon { .p-datatable-loading-icon {
@ -576,12 +576,12 @@ export default {
} }
.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd { .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd {
background: var(--p-datatable-row-background-striped); background: ${dt('datatable.row.striped.background')});
} }
.p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight { .p-datatable.p-datatable-striped .p-datatable-tbody > tr.p-row-odd.p-highlight {
background: var(--p-highlight-background); background: ${dt('highlight.background')});
color: var(--p-highlight-text-color); color: ${dt('highlight.color')});
} }
.p-datatable.p-datatable-sm .p-datatable-header { .p-datatable.p-datatable-sm .p-datatable-header {

16
components/lib/themes/primeone/base/dataview/index.js
View File

@ -11,25 +11,25 @@ export default {
} }
.p-dataview-header { .p-dataview-header {
background: var(--p-dataview-header-background); background: ${dt('dataview.header.background')};
color: var(--p-dataview-header-text-color); color: ${dt('dataview.header.color')};
border: 1px solid var(--p-dataview-header-border-color); border: 1px solid ${dt('dataview.header.border.color')};
border-width: 0 0 1px 0; border-width: 0 0 1px 0;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
font-weight: 600; font-weight: 600;
} }
.p-dataview-content { .p-dataview-content {
background: var(--p-dataview-content-background); background: ${dt('dataview.content.background')};
color: var(--p-dataview-content-text-color); color: ${dt('dataview.content.color')};
border: 0 none; border: 0 none;
padding: 0; padding: 0;
} }
.p-dataview-footer { .p-dataview-footer {
background: var(--p-dataview-footer-background); background: ${dt('dataview.footer.background')};
color: var(--p-dataview-footer-text-color); color: ${dt('dataview.footer.color')};
border: 1px solid var(--p-dataview-footer-border-color); border: 1px solid ${dt('dataview.footer.border.color')};
border-width: 0 0 1px 0; border-width: 0 0 1px 0;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
font-weight: 600; font-weight: 600;

46
components/lib/themes/primeone/base/orderlist/index.js
View File

@ -14,13 +14,13 @@ export default {
.p-orderlist-list-container { .p-orderlist-list-container {
flex: 1 1 auto; flex: 1 1 auto;
background: var(--p-orderlist-list-background); background: ${dt('orderlist.list.background')};
border: 1px solid var(--p-orderlist-list-border-color); border: 1px solid ${dt('orderlist.list.border.color')};
border-radius: ${dt('rounded.base')}; border-radius: ${dt('rounded.base')};
} }
.p-orderlist .p-orderlist-header { .p-orderlist .p-orderlist-header {
color: var(--p-orderlist-header-text-color); color: ${dt('orderlist.header.color')};
border: 0 none; border: 0 none;
padding: 0.75rem 1rem 0.5rem 1rem; padding: 0.75rem 1rem 0.5rem 1rem;
font-weight: 600; font-weight: 600;
@ -45,8 +45,8 @@ export default {
margin: 2px 0; margin: 2px 0;
border-radius: ${dt('rounded.base')}; border-radius: ${dt('rounded.base')};
border: 0 none; border: 0 none;
color: var(--p-orderlist-item-text-color); color: ${dt('orderlist.item.color')};
background: var(--p-orderlist-item-background); background: ${dt('orderlist.item.background')};
outline-color: transparent; outline-color: transparent;
transition: transform ${dt('transition.duration')}, background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; transition: transform ${dt('transition.duration')}, background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
} }
@ -60,47 +60,47 @@ export default {
} }
.p-orderlist-item:not(.p-highlight):hover { .p-orderlist-item:not(.p-highlight):hover {
color: var(--p-orderlist-item-text-color-focus); color: ${dt('orderlist.item.focus.color')};
background: var(--p-orderlist-item-background-focus); background: ${dt('orderlist.item.focus.background')};
} }
.p-orderlist-item.p-focus { .p-orderlist-item.p-focus {
color: var(--p-orderlist-item-text-color-focus); color: ${dt('orderlist.item.focus.color')};
background: var(--p-orderlist-item-background-focus); background: ${dt('orderlist.item.focus.background')};
} }
.p-orderlist-item.p-highlight { .p-orderlist-item.p-highlight {
background: var(--p-highlight-background); color: ${dt('highlight.color')};
color: var(--p-highlight-text-color); background: ${dt('highlight.background')};
} }
.p-orderlist-item.p-highlight.p-focus { .p-orderlist-item.p-highlight.p-focus {
background: var(--p-highlight-background-focus); color: ${dt('highlight.focus.color')};
color: var(--p-highlight-text-color-focus); background: ${dt('highlight.focus.background')};
} }
.p-orderlist-controls .p-button { .p-orderlist-controls .p-button {
background: var(--p-orderlist-control-background); background: ${dt('orderlist.control.background')};
border: 1px solid var(--p-orderlist-control-border-color); border: 1px solid ${dt('orderlist.control.border.color')};
color: var(--p-order-listcontrol-text-color); color: ${dt('orderlist.control.color')};
outline-color: transparent; outline-color: transparent;
transition: opacity ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}; transition: opacity ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')};
} }
.p-orderlist-controls .p-button:not(:disabled):hover { .p-orderlist-controls .p-button:not(:disabled):hover {
background: var(--p-orderlist-control-background-hover); background: ${dt('orderlist.control.hover.background')};
border: 1px solid var(--p-orderlist-control-border-color-hover); border: 1px solid ${dt('orderlist.control.hover.border.color')};
color: var(--p-order-listcontrol-text-color-hover); color: ${dt('orderlist.control.hover.color')};
} }
.p-orderlist-controls .p-button:not(:disabled):active { .p-orderlist-controls .p-button:not(:disabled):active {
background: var(--p-orderlist-control-background-active); background: ${dt('orderlist.control.active.background')};
border: 1px solid var(--p-orderlist-control-border-color-active); border: 1px solid ${dt('orderlist.control.active.border.color')};
color: var(--p-order-listcontrol-text-color-active); color: ${dt('orderlist.control.hover.active')};
} }
.p-orderlist-controls .p-button:focus-visible { .p-orderlist-controls .p-button:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} var(--p-button-primary-background); outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')}; outline-offset: ${dt('focus.ring.offset')};
} }
` `

30
components/lib/themes/primeone/base/organizationchart/index.js
View File

@ -15,9 +15,9 @@ export default {
.p-organizationchart-node-content { .p-organizationchart-node-content {
display: inline-block; display: inline-block;
position: relative; position: relative;
border: 1px solid var(--p-organizationchart-node-border-color); border: 1px solid ${dt('organizationchart.node.border.color')};
background: var(--p-organizationchart-node-background); background: ${dt('organizationchart.node.background')};
color: var(--p-organizationchart-node-text-color); color: ${dt('organizationchart.node.color')};
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
border-radius: ${dt('rounded.base')}; border-radius: ${dt('rounded.base')};
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}; transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')};
@ -28,13 +28,13 @@ export default {
} }
.p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover { .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
background: var(--p-organizationchart-node-background-hover); background: ${dt('organizationchart.node.hover.background')};
color: var(--p-organizationchart-node-text-color-hover); color: ${dt('organizationchart.node.hover.color')};
} }
.p-organizationchart-node-content.p-highlight { .p-organizationchart-node-content.p-highlight {
background: var(--p-highlight-background); background: ${dt('highlight.background')};
color: var(--p-highlight-text-color); color: ${dt('highlight.color')};
} }
.p-organizationchart-node-content .p-node-toggler { .p-organizationchart-node-content .p-node-toggler {
@ -48,10 +48,10 @@ export default {
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;
text-decoration: none; text-decoration: none;
background: var(--p-organizationchart-toggle-icon-background); background: ${dt('organizationchart.toggle.icon.background')};
color: var(--p-organizationchart-toggle-icon-color); color: ${dt('organizationchart.toggle.icon.color')};
border-radius: 50%; border-radius: 50%;
border: 1px solid var(--p-organizationchart-toggle-icon-border-color); border: 1px solid ${dt('organizationchart.toggle.icon.border.color')};
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -73,22 +73,22 @@ export default {
margin: 0 auto; margin: 0 auto;
height: 20px; height: 20px;
width: 1px; width: 1px;
background: var(--p-organizationchart-connector-color); background: ${dt('organizationchart.connector.color')};
} }
.p-organizationchart-line-right { .p-organizationchart-line-right {
border-radius: 0; border-radius: 0;
border-left: 1px solid var(--p-organizationchart-connector-color); border-left: 1px solid ${dt('organizationchart.connector.color')};
border-top-left-radius: ${dt('rounded.base')}; border-top-left-radius: ${dt('rounded.base')};
} }
.p-organizationchart-line-left { .p-organizationchart-line-left {
border-radius: 0; border-radius: 0;
border-right: 1px solid var(--p-organizationchart-connector-color); border-right: 1px solid ${dt('organizationchart.connector.color')};
} }
.p-organizationchart-line-top { .p-organizationchart-line-top {
border-top: 1px solid var(--p-organizationchart-connector-color); border-top: 1px solid ${dt('organizationchart.connector.color')};
} }
.p-organizationchart-selectable-node { .p-organizationchart-selectable-node {
@ -104,7 +104,7 @@ export default {
} }
.p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-right) { .p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-right) {
border-left: 1px solid var(--p-organizationchart-connector-color); border-left: 1px solid ${dt('organizationchart.connector.color')};
border-top-left-radius: ${dt('rounded.base')}; border-top-left-radius: ${dt('rounded.base')};
} }
` `

16
components/lib/themes/primeone/base/paginator/index.js
View File

@ -5,8 +5,8 @@ export default {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
background: var(--p-paginator-background); background: ${dt('paginator.background')};
color: var(--p-paginator-text-color); color: ${dt('paginator.color')};
border: 0 none; border: 0 none;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border-radius: ${dt('rounded.base')}; border-radius: ${dt('rounded.base')};
@ -36,7 +36,7 @@ export default {
position: relative; position: relative;
background: transparent; background: transparent;
border: 0 none; border: 0 none;
color: var(--p-paginator-navigator-color); color: ${dt('paginator.navigator.color')};
min-width: 2.5rem; min-width: 2.5rem;
height: 2.5rem; height: 2.5rem;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
@ -48,12 +48,12 @@ export default {
.p-paginator-prev:not(.p-disabled):hover, .p-paginator-prev:not(.p-disabled):hover,
.p-paginator-next:not(.p-disabled):hover, .p-paginator-next:not(.p-disabled):hover,
.p-paginator-last:not(.p-disabled):hover { .p-paginator-last:not(.p-disabled):hover {
background: var(--p-paginator-navigator-background-hover); background: ${dt('paginator.navigator.hover.background')};
color: var(--p-paginator-navigator-color-hover); color: ${dt('paginator.navigator.hover.color')};
} }
.p-paginator-current { .p-paginator-current {
color: var(--p-paginator-current-page-report-text-color); color: ${dt('paginator.current.page.report.color')};
} }
.p-paginator-pages { .p-paginator-pages {
@ -63,8 +63,8 @@ export default {
} }
.p-paginator-page.p-highlight { .p-paginator-page.p-highlight {
background: var(--p-highlight-background); background: ${dt('highlight.background')};
color: var(--p-highlight-text-color); color: ${dt('highlight.color')};
} }
.p-paginator-page-input .p-inputtext { .p-paginator-page-input .p-inputtext {

48
components/lib/themes/primeone/base/picklist/index.js
View File

@ -14,13 +14,13 @@ export default {
.p-picklist-list-wrapper { .p-picklist-list-wrapper {
flex: 1 1 50%; flex: 1 1 50%;
background: var(--p-picklist-list-background); background: ${dt('picklist.list.background')};
border: 1px solid var(--p-picklist-list-border-color); border: 1px solid ${dt('picklist.list.border.color')};
border-radius: var(--p-picklist-base); border-radius: ${dt('rounded.base')};
} }
.p-picklist .p-picklist-header { .p-picklist .p-picklist-header {
color: var(--p-picklist-header-text-color); color: ${dt('picklist.header.color')};
border: 0 none; border: 0 none;
padding: 0.75rem 1rem 0.5rem 1rem; padding: 0.75rem 1rem 0.5rem 1rem;
font-weight: 600; font-weight: 600;
@ -45,8 +45,8 @@ export default {
margin: 2px 0; margin: 2px 0;
border-radius: ${dt('rounded.base')}; border-radius: ${dt('rounded.base')};
border: 0 none; border: 0 none;
color: var(--p-picklist-item-text-color); color: ${dt('picklist.item.color')};
background: var(--p-picklist-item-background); background: ${dt('picklist.item.background')};
outline-color: transparent; outline-color: transparent;
transition: transform ${dt('transition.duration')}, background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; transition: transform ${dt('transition.duration')}, background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
} }
@ -60,47 +60,47 @@ export default {
} }
.p-picklist-item:not(.p-highlight):hover { .p-picklist-item:not(.p-highlight):hover {
color: var(--p-picklist-item-text-color-focus); color: ${dt('picklist.item.focus.color')};
background: var(--p-picklist-item-background-focus); background: ${dt('picklist.item.focus.background')};
} }
.p-picklist-item.p-focus { .p-picklist-item.p-focus {
color: var(--p-picklist-item-text-color-focus); color: ${dt('picklist.item.focus.color')};
background: var(--p-picklist-item-background-focus); background: ${dt('picklist.item.focus.background')};
} }
.p-picklist-item.p-highlight { .p-picklist-item.p-highlight {
background: var(--p-highlight-background); color: ${dt('highlight.color')};
color: var(--p-highlight-text-color); background: ${dt('highlight.background')};
} }
.p-picklist-item.p-highlight.p-focus { .p-picklist-item.p-highlight.p-focus {
background: var(--p-highlight-background-focus); color: ${dt('highlight.focus.color')};
color: var(--p-highlight-text-color-focus); background: ${dt('highlight.focus.background')};
} }
.p-picklist-buttons .p-button { .p-picklist-buttons .p-button {
background: var(--p-picklist-control-background); background: ${dt('picklist.control.background')};
border: 1px solid var(--p-picklist-control-border-color); border: 1px solid ${dt('picklist.control.border.color')};
color: var(--p-order-listcontrol-text-color); color: ${dt('picklist.control.color')};
outline-color: transparent; outline-color: transparent;
transition: opacity ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}; transition: opacity ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')};
} }
.p-picklist-buttons .p-button:not(:disabled):hover { .p-picklist-buttons .p-button:not(:disabled):hover {
background: var(--p-picklist-control-background-hover); background: ${dt('picklist.control.hover.background')};
border: 1px solid var(--p-picklist-control-border-color-hover); border: 1px solid ${dt('picklist.control.hover.border.color')};
color: var(--p-order-listcontrol-text-color-hover); color: ${dt('picklist.control.hover.color')};
} }
.p-picklist-buttons .p-button:not(:disabled):active { .p-picklist-buttons .p-button:not(:disabled):active {
background: var(--p-picklist-control-background-active); background: ${dt('picklist.control.active.background')};
border: 1px solid var(--p-picklist-control-border-color-active); border: 1px solid ${dt('picklist.control.active.border.color')};
color: var(--p-order-listcontrol-text-color-active); color: ${dt('picklist.control.active.color')};
} }
.p-picklist-buttons .p-button:focus-visible { .p-picklist-buttons .p-button:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} var(--p-button-primary-background); outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')}; outline-offset: ${dt('focus.ring.offset')};
} }
` `

8
components/lib/themes/primeone/base/timeline/index.js
View File

@ -88,11 +88,11 @@ export default {
justify-content: center; justify-content: center;
position: relative; position: relative;
align-self: baseline; align-self: baseline;
border: 2px solid var(--p-timeline-marker-border-color); border: 2px solid ${dt('timeline.marker.border.color')};
border-radius: 50%; border-radius: 50%;
width: 1.125rem; width: 1.125rem;
height: 1.125rem; height: 1.125rem;
background-color: var(--p-timeline-marker-background); background-color: ${dt('timeline.marker.background')};
} }
.p-timeline-event-marker::before { .p-timeline-event-marker::before {
@ -100,7 +100,7 @@ export default {
border-radius: 50%; border-radius: 50%;
width: 0.375rem; width: 0.375rem;
height: 0.375rem; height: 0.375rem;
background-color: var(--p-timeline-marker-content-color); background: ${dt('timeline.marker.content.color')};
} }
.p-timeline-event-marker::after { .p-timeline-event-marker::after {
@ -114,7 +114,7 @@ export default {
.p-timeline-event-connector { .p-timeline-event-connector {
flex-grow: 1; flex-grow: 1;
background-color: var(--p-timeline-connector-color); background-color: ${dt('timeline.connector.color')};
} }
.p-timeline-horizontal { .p-timeline-horizontal {

30
components/lib/themes/primeone/base/tree/index.js
View File

@ -1,8 +1,8 @@
export default { export default {
css: ({ dt }) => ` css: ({ dt }) => `
.p-tree { .p-tree {
background: var(--p-tree-background); background: ${dt('tree.background')};
color: var(--p-tree-text-color); color: ${dt('tree.color')};
border-radius: ${dt('rounded.base')}; border-radius: ${dt('rounded.base')};
border: 0 none; border: 0 none;
padding: 1rem; padding: 1rem;
@ -35,7 +35,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
outline-color: transparent; outline-color: transparent;
color: var(--p-tree-node-text-color); color: ${dt('tree.node.color')};
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
} }
@ -45,8 +45,8 @@ export default {
} }
.p-treenode-content.p-highlight { .p-treenode-content.p-highlight {
background: var(--p-highlight-background); background: ${dt('highlight.background')};
color: var(--p-highlight-text-color); color: ${dt('highlight.color')};
} }
.p-tree-toggler { .p-tree-toggler {
@ -61,7 +61,7 @@ export default {
margin-right: 0.5rem; margin-right: 0.5rem;
width: 1.75rem; width: 1.75rem;
height: 1.75rem; height: 1.75rem;
color: var(--p-tree-toggle-color); color: ${dt('tree.toggle.color')};
border: 0 none; border: 0 none;
background: transparent; background: transparent;
border-radius: 50%; border-radius: 50%;
@ -70,8 +70,8 @@ export default {
} }
.p-tree-toggler:enabled:hover { .p-tree-toggler:enabled:hover {
background: var(--p-tree-toggle-background-hover); background: ${dt('tree.toggle.hover.background')};
color: var(--p-tree-toggle-color-hover); color: ${dt('tree.toggle.hover.color')};
} }
.p-treenode-content.p-highlight .p-tree-toggler, .p-treenode-content.p-highlight .p-tree-toggler,
@ -80,20 +80,20 @@ export default {
} }
.p-treenode-content.p-highlight .p-tree-toggler:hover { .p-treenode-content.p-highlight .p-tree-toggler:hover {
background: var(--p-tree-toggle-background-hover-highlight); background: ${dt('tree.toggle.highlight.hover.background')};
} }
.p-treenode-content.p-treenode-selectable:not(.p-highlight):hover { .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover {
background: var(--p-tree-node-background-hover); background: ${dt('tree.node.hover.background')};
color: var(--p-tree-node-text-color-hover); color: ${dt('tree.node.hover.color')};
} }
.p-treenode-content.p-treenode-selectable:not(.p-highlight):hover .p-tree-toggler { .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover .p-tree-toggler {
color: var(--p-tree-toggle-color-hover); color: ${dt('tree.toggle.hover.color')};
} }
.p-treenode-content.p-treenode-selectable:not(.p-highlight):hover .p-treenode-icon { .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover .p-treenode-icon {
color: var(--p-tree-node-icon-color-hover); color: ${dt('tree.icon.hover.color')};
} }
.p-treenode-children { .p-treenode-children {
@ -118,7 +118,7 @@ export default {
.p-treenode-icon { .p-treenode-icon {
margin-right: 0.5rem; margin-right: 0.5rem;
color: var(--p-tree-node-icon-color); color: ${dt('tree.icon.color')};
transition: color ${dt('transition.duration')}; transition: color ${dt('transition.duration')};
} }
@ -127,7 +127,7 @@ export default {
} }
.p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon { .p-treenode-content .p-checkbox.p-indeterminate .p-checkbox-icon {
color: var(--p-tree-indeterminate-color); color: ${dt('tree.indeterminate.color')};
} }
.p-tree-filter { .p-tree-filter {

74
components/lib/themes/primeone/base/treetable/index.js
View File

@ -23,7 +23,7 @@ export default {
} }
.p-treetable .p-sortable-column .p-sortable-column-icon { .p-treetable .p-sortable-column .p-sortable-column-icon {
color: var(--p-treetable-sort-icon-color); color: ${dt('treetable.sort.icon.color')};
margin-left: 0.5rem; margin-left: 0.5rem;
transition: color ${dt('transition.duration')}; transition: color ${dt('transition.duration')};
} }
@ -40,17 +40,17 @@ export default {
} }
.p-treetable .p-sortable-column:not(.p-highlight):hover { .p-treetable .p-sortable-column:not(.p-highlight):hover {
background: var(--p-treetable-header-cell-background-hover); background: ${dt('treetable.header.cell.hover.background')};
color: var(--p-treetable-header-cell-text-color-hover); color: ${dt('treetable.header.cell.hover.color')};
} }
.p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon { .p-treetable .p-sortable-column:not(.p-highlight):hover .p-sortable-column-icon {
color: var(--p-treetable-sort-icon-color-hover); color: ${dt('treetable.sort.icon.hover.color')};
} }
.p-treetable .p-sortable-column.p-highlight { .p-treetable .p-sortable-column.p-highlight {
background: var(--p-highlight-background); background: ${dt('highlight.background')};
color: var(--p-highlight-text-color); color: ${dt('highlight.color')};
} }
.p-treetable .p-sortable-column:focus-visible { .p-treetable .p-sortable-column:focus-visible {
@ -59,7 +59,7 @@ export default {
} }
.p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon { .p-treetable .p-sortable-column.p-highlight .p-sortable-column-icon {
color: var(--p-highlight-text-color); color: ${dt('highlight.color')};
} }
.p-treetable-responsive-scroll > .p-treetable-wrapper { .p-treetable-responsive-scroll > .p-treetable-wrapper {
@ -112,7 +112,7 @@ export default {
position: absolute; position: absolute;
z-index: 10; z-index: 10;
display: none; display: none;
background: var(--p-treetable-resizer-color); background: ${dt('treetable.resizer.color')};
} }
.p-treetable .p-treetable-loading-overlay { .p-treetable .p-treetable-loading-overlay {
@ -200,11 +200,11 @@ export default {
} }
.p-treetable .p-treetable-scrollable-header { .p-treetable .p-treetable-scrollable-header {
background: var(--p-treetable-header-background); background: ${dt('treetable.header.background')};
} }
.p-treetable .p-treetable-scrollable-footer { .p-treetable .p-treetable-scrollable-footer {
background: var(--p-treetable-footer-background); background: ${dt('treetable.footer.background')};
} }
.p-treetable .p-paginator-top { .p-treetable .p-paginator-top {
@ -218,18 +218,18 @@ export default {
} }
.p-treetable-header { .p-treetable-header {
background: var(--p-treetable-header-background); background: ${dt('treetable.header.background')};
color: var(--p-treetable-header-text-color); color: ${dt('treetable.header.color')};
border: 1px solid var(--p-treetable-header-border-color); border: 1px solid ${dt('treetable.header.border.color')};
border-width: 0 0 1px 0; border-width: 0 0 1px 0;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
font-weight: 600; font-weight: 600;
} }
.p-treetable-footer { .p-treetable-footer {
background: var(--p-treetable-header-background); background: ${dt('treetable.footer.background')};
color: var(--p-treetable-header-text-color); color: ${dt('treetable.footer.color')};
border: 1px solid var(--p-treetable-header-border-color); border: 1px solid ${dt('treetable.footer.border.color')};
border-width: 0 0 1px 0; border-width: 0 0 1px 0;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
font-weight: 600; font-weight: 600;
@ -238,44 +238,44 @@ export default {
.p-treetable-thead > tr > th { .p-treetable-thead > tr > th {
text-align: left; text-align: left;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
background: var(--p-treetable-header-cell-background); background: ${dt('treetable.header.cell.background')};
border: 1px solid var(--p-treetable-header-cell-border-color); border: 1px solid ${dt('treetable.header.cell.border.color')};
border-width: 0 0 1px 0; border-width: 0 0 1px 0;
color: var(--p-treetable-header-cell-text-color); color: ${dt('treetable.header.cell.color')});
font-weight: 600; font-weight: 600;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
} }
.p-treetable-tbody > tr { .p-treetable-tbody > tr {
outline-color: transparent; outline-color: transparent;
background: var(--p-treetable-row-background); background: ${dt('treetable.row.background')};
color: var(--p-treetable-row-text-color); color: ${dt('treetable.row.color')};
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
} }
.p-treetable-tbody > tr > td { .p-treetable-tbody > tr > td {
text-align: left; text-align: left;
border: 1px solid var(--p-treetable-body-cell-border-color); border: 1px solid ${dt('treetable.body.cell.border.color')};
border-width: 0 0 1px 0; border-width: 0 0 1px 0;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
} }
.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover { .p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover {
background: var(--p-treetable-row-background-hover); background: ${dt('treetable.row.hover.background')};
color: var(--p-treetable-row-text-color-hover); color: ${dt('treetable.row.hover.color')};
} }
.p-treetable-tbody > tr.p-highlight { .p-treetable-tbody > tr.p-highlight {
background: var(--p-highlight-background); background: ${dt('highlight.background')};
color: var(--p-highlight-text-color); color: ${dt('highlight.color')};
} }
.p-treetable-tbody > tr:has(+ .p-highlight) > td { .p-treetable-tbody > tr:has(+ .p-highlight) > td {
border-bottom-color: var(--p-treetable-body-cell-border-color-selected); border-bottom-color: ${dt('treetable.body.cell.selected.border.color')});
} }
.p-treetable-tbody > tr.p-highlight > td { .p-treetable-tbody > tr.p-highlight > td {
border-bottom-color: var(--p-treetable-body-cell-border-color-selected); border-bottom-color: ${dt('treetable.body.cell.selected.border.color')});
} }
.p-treetable-tbody > tr:focus-visible { .p-treetable-tbody > tr:focus-visible {
@ -294,7 +294,7 @@ export default {
position: relative; position: relative;
width: 1.75rem; width: 1.75rem;
height: 1.75rem; height: 1.75rem;
color: var(--p-treetable-toggle-color); color: ${dt('treetable.toggle.color')};
border: 0 none; border: 0 none;
background: transparent; background: transparent;
border-radius: 50%; border-radius: 50%;
@ -313,16 +313,16 @@ export default {
} }
.p-treetable-toggler + .p-checkbox.p-indeterminate .p-checkbox-icon { .p-treetable-toggler + .p-checkbox.p-indeterminate .p-checkbox-icon {
color: var(--p-treetable-indeterminate-color); color: ${dt('treetable.indeterminate.color')};
} }
.p-treetable-toggler:enabled:hover { .p-treetable-toggler:enabled:hover {
background: var(--p-treetable-toggle-background-hover); background: ${dt('treetable.toggle.hover.background')};
color: var(--p-treetable-toggle-color-hover); color: ${dt('treetable.toggle.hover.color')};
} }
.p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler { .p-treetable-hoverable-rows .p-treetable-tbody > tr:not(.p-highlight):hover .p-treetable-toggler {
color: var(--p-treetable-toggle-color-hover); color: ${dt('treetable.toggle.hover.color')};
background: transparent; background: transparent;
} }
@ -331,18 +331,18 @@ export default {
} }
.p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover { .p-treetable-tbody > tr.p-highlight .p-treetable-toggler:hover {
background: var(--p-treetable-toggle-background-hover-highlight); background: ${dt('treetable.toggle.highlight.hover.background')};
color: inherit; color: inherit;
} }
.p-treetable-tfoot > tr > td { .p-treetable-tfoot > tr > td {
text-align: left; text-align: left;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
border: 1px solid var(--p-treetable-footer-cell-border-color); border: 1px solid ${dt('treetable.footer.cell.border.color')};
border-width: 0 0 1px 0; border-width: 0 0 1px 0;
font-weight: 600; font-weight: 600;
color: var(--p-treetable-footer-cell-text-color); color: ${dt('treetable.footer.cell.color')};
background: var(--p-treetable-footer-cell-background); background: ${dt('treetable.footer.cell.background')};
} }
.p-treetable .p-treetable-loading-icon { .p-treetable .p-treetable-loading-icon {

108
components/lib/themes/primeone/presets/aura/datatable/index.js
View File

@ -4,69 +4,69 @@ export default {
header: { header: {
background: '{surface.0}', background: '{surface.0}',
borderColor: '{surface.200}', borderColor: '{surface.200}',
textColor: '{surface.700}' color: '{surface.700}'
}, },
headerCell: { headerCell: {
background: '{surface.0}', background: '{surface.0}',
backgroundHover: '{surface.100}', hoverBackground: '{surface.100}',
borderColor: '{surface.200}', borderColor: '{surface.200}',
textColor: '{surface.700}', color: '{surface.700}',
textColorHover: '{surface.800}' hoverColor: '{surface.800}'
}, },
row: { row: {
background: '{surface.0}', background: '{surface.0}',
backgroundStriped: '{surface.50}', stripedBackground: '{surface.50}',
backgroundHover: '{surface.100}', hoverBackground: '{surface.100}',
textColor: '{surface.700}', color: '{surface.700}',
textColorHover: '{surface.800}' hoverColor: '{surface.800}'
}, },
bodyCell: { bodyCell: {
borderColor: '{surface.200}', borderColor: '{surface.200}',
borderColorSelected: '{primary.100}' selectedBorderColor: '{primary.100}'
}, },
footerCell: { footerCell: {
background: '{surface.0}', background: '{surface.0}',
borderColor: '{surface.200}', borderColor: '{surface.200}',
textColor: '{surface.700}' color: '{surface.700}'
}, },
footer: { footer: {
background: '{surface.0}', background: '{surface.0}',
borderColor: '{surface.200}', borderColor: '{surface.200}',
textColor: '{surface.700}' color: '{surface.700}'
}, },
dropPointColor: '{primary.color}', dropPointColor: '{primary.color}',
resizerColor: '{primary.color}', resizerColor: '{primary.color}',
sortIcon: { sortIcon: {
color: '{surface.500}', color: '{surface.500}',
colorHover: '{surface.600}' hoverColor: '{surface.600}'
}, },
rowAction: { rowAction: {
backgroundHover: '{surface.100}', hoverBackground: '{surface.100}',
backgroundHoverHighlight: '{surface.0}', highlightHoverBackground: '{surface.0}',
color: '{surface.500}', color: '{surface.500}',
colorHover: '{surface.500}' hoverColor: '{surface.500}'
}, },
filter: { filter: {
menuButton: { menuButton: {
backgroundHover: '{surface.100}', hoverBackground: '{surface.100}',
backgroundOpen: '{surface.100}', openBackground: '{surface.100}',
backgroundActive: '{highlight.background}', activeBackground: '{highlight.background}',
textColor: '{surface.500}', color: '{surface.500}',
textColorOpen: '{surface.500}', openColor: '{surface.500}',
textColorHover: '{surface.600}', hoverColor: '{surface.600}',
textColorActive: '{highlight.textColor}' colorActive: '{highlight.color}'
}, },
clearButton: { clearButton: {
backgroundHover: '{surface.100}', hoverBackground: '{surface.100}',
textColor: '{surface.500}', color: '{surface.500}',
textColorHover: '{surface.600}' hoverColor: '{surface.600}'
}, },
overlay: { overlay: {
background: '{surface.0}', background: '{surface.0}',
borderColor: '{surface.200}', borderColor: '{surface.200}',
textColor: '{surface.700}' color: '{surface.700}'
}, },
contraint: { constraint: {
borderColor: '{surface.200}' borderColor: '{surface.200}'
} }
} }
@ -75,69 +75,69 @@ export default {
header: { header: {
background: '{surface.900}', background: '{surface.900}',
borderColor: '{surface.800}', borderColor: '{surface.800}',
textColor: '{surface.0}' color: '{surface.0}'
}, },
headerCell: { headerCell: {
background: '{surface.900}', background: '{surface.900}',
backgroundHover: '{surface.800}', hoverBackground: '{surface.800}',
borderColor: '{surface.800}', borderColor: '{surface.800}',
textColor: '{surface.0}', color: '{surface.0}',
textColorHover: '{surface.0}' hoverColor: '{surface.0}'
}, },
row: { row: {
background: '{surface.900}', background: '{surface.900}',
backgroundStriped: '{surface.950}', stripedBackground: '{surface.950}',
backgroundHover: '{surface.800}', hoverBackground: '{surface.800}',
textColor: '{surface.0}', color: '{surface.0}',
textColorHover: '{surface.0}' hoverColor: '{surface.0}'
}, },
bodyCell: { bodyCell: {
borderColor: '{surface.800}', borderColor: '{surface.800}',
borderColorSelected: '{primary.900}' selectedBorderColor: '{primary.900}'
}, },
footerCell: { footerCell: {
background: '{surface.900}', background: '{surface.900}',
borderColor: '{surface.800}', borderColor: '{surface.800}',
textColor: '{surface.0}' color: '{surface.0}'
}, },
footer: { footer: {
background: '{surface.900}', background: '{surface.900}',
borderColor: '{surface.800}', borderColor: '{surface.800}',
textColor: '{surface.0}' color: '{surface.0}'
}, },
dropPointColor: '{primary.color}', dropPointColor: '{primary.color}',
resizerColor: '{primary.color}', resizerColor: '{primary.color}',
sortIcon: { sortIcon: {
color: '{surface.400}', color: '{surface.400}',
colorHover: '{surface.300}' hoverColor: '{surface.300}'
}, },
rowAction: { rowAction: {
backgroundHover: '{surface.800}', hoverBackground: '{surface.800}',
backgroundHoverHighlight: '{surface.900}', highlightHoverBackground: '{surface.900}',
color: '{surface.400}', color: '{surface.400}',
colorHover: '{surface.300}' hoverColor: '{surface.300}'
}, },
filter: { filter: {
menuButton: { menuButton: {
backgroundHover: '{surface.800}', hoverBackground: '{surface.800}',
backgroundOpen: '{surface.800}', openBackground: '{surface.800}',
backgroundActive: '{highlight.background}', activeBackground: '{highlight.background}',
textColor: '{surface.400}', color: '{surface.400}',
textColorOpen: '{surface.300}', openColor: '{surface.300}',
textColorHover: '{surface.300}', hoverColor: '{surface.300}',
textColorActive: '{highlight.textColor}' colorActive: '{highlight.color}'
}, },
clearButton: { clearButton: {
backgroundHover: '{surface.800}', hoverBackground: '{surface.800}',
textColor: '{surface.400}', color: '{surface.400}',
textColorHover: '{surface.300}' hoverColor: '{surface.300}'
}, },
overlay: { overlay: {
background: '{surface.900}', background: '{surface.900}',
borderColor: '{surface.700}', borderColor: '{surface.700}',
textColor: '{surface.0}' color: '{surface.0}'
}, },
contraint: { constraint: {
borderColor: '{surface.700}' borderColor: '{surface.700}'
} }
} }

12
components/lib/themes/primeone/presets/aura/dataview/index.js
View File

@ -4,32 +4,32 @@ export default {
header: { header: {
background: '{surface.0}', background: '{surface.0}',
borderColor: '{surface.200}', borderColor: '{surface.200}',
textColor: '{surface.700}' color: '{surface.700}'
}, },
content: { content: {
background: '{surface.0}', background: '{surface.0}',
textColor: '{surface.700}' color: '{surface.700}'
}, },
footer: { footer: {
background: '{surface.0}', background: '{surface.0}',
borderColor: '{surface.200}', borderColor: '{surface.200}',
textColor: '{surface.700}' color: '{surface.700}'
} }
}, },
dark: { dark: {
header: { header: {
background: '{surface.900}', background: '{surface.900}',
borderColor: '{surface.700}', borderColor: '{surface.700}',
textColor: '{surface.0}' color: '{surface.0}'
}, },
content: { content: {
background: '{surface.900}', background: '{surface.900}',
textColor: '{surface.0}' color: '{surface.0}'
}, },
footer: { footer: {
background: '{surface.900}', background: '{surface.900}',
borderColor: '{surface.700}', borderColor: '{surface.700}',
textColor: '{surface.0}' color: '{surface.0}'
} }
} }
} }

47
components/lib/themes/primeone/presets/aura/orderlist/index.js
View File

@ -6,26 +6,24 @@ export default {
borderColor: '{surface.200}' borderColor: '{surface.200}'
}, },
header: { header: {
textColor: '{surface.500}' color: '{surface.500}'
}, },
item: { item: {
background: 'transparent', background: 'transparent',
backgroundHover: '{surface.100}', focusBackground: '{surface.100}',
backgroundFocus: '{surface.100}', color: '{surface.700}',
textColor: '{surface.700}', focusColor: '{surface.800}'
textColorHover: '{surface.800}',
textColorFocus: '{surface.800}'
}, },
control: { control: {
background: '{surface.100}', background: '{surface.100}',
backgroundHover: '{surface.200}', hoverBackground: '{surface.200}',
backgroundActive: '{surface.300}', activeBackground: '{surface.300}',
borderColor: '{surface.100}', borderColor: '{surface.100}',
borderColorHover: '{surface.200}', hoverBorderColor: '{surface.200}',
borderColorActive: '{surface.300}', activeBorderColor: '{surface.300}',
textColor: '{surface.600}', color: '{surface.600}',
textColorHover: '{surface.700}', hoverColor: '{surface.700}',
textColorActive: '{surface.800}' activeColor: '{surface.800}'
} }
}, },
dark: { dark: {
@ -34,26 +32,23 @@ export default {
borderColor: '{surface.700}' borderColor: '{surface.700}'
}, },
header: { header: {
textColor: '{surface.400}' color: '{surface.400}'
}, },
item: { item: {
background: 'transparent', background: 'transparent',
backgroundHover: '{surface.800}', focusBackground: '{surface.800}',
backgroundFocus: '{surface.800}', color: '{surface.0}',
textColor: '{surface.0}', focusColor: '{surface.0}'
textColorHover: '{surface.0}',
textColorFocus: '{surface.0}'
}, },
control: { control: {
background: '{surface.800}', background: '{surface.800}',
backgroundHover: '{surface.700}', activeBackground: '{surface.600}',
backgroundActive: '{surface.600}',
borderColor: '{surface.800}', borderColor: '{surface.800}',
borderColorHover: '{surface.700}', hoverBorderColor: '{surface.700}',
borderColorActive: '{surface.600}', activeBorderColor: '{surface.600}',
textColor: '{surface.300}', color: '{surface.300}',
textColorHover: '{surface.200}', hoverColor: '{surface.200}',
textColorActive: '{surface.100}' activeColor: '{surface.100}'
} }
} }
} }

24
components/lib/themes/primeone/presets/aura/organizationchart/index.js
View File

@ -3,10 +3,10 @@ export default {
light: { light: {
node: { node: {
background: '{surface.0}', background: '{surface.0}',
backgroundHover: '{surface.100}', hoverBackground: '{surface.100}',
borderColor: '{surface.200}', borderColor: '{surface.200}',
textColor: '{surface.700}', color: '{surface.700}',
textColorHover: '{surface.800}' hoverColor: '{surface.800}'
}, },
toggleIcon: { toggleIcon: {
background: '{surface.0}', background: '{surface.0}',
@ -17,6 +17,22 @@ export default {
color: '{surface.200}' color: '{surface.200}'
} }
}, },
dark: {} dark: {
node: {
background: '{surface.900}',
hoverBackground: '{surface.800}',
borderColor: '{surface.700}',
color: '{surface.0}',
hoverColor: '{surface.0}'
},
toggleIcon: {
background: '{surface.800}',
borderColor: '{surface.700}',
color: '{surface.400}'
},
connector: {
color: '{surface.700}'
}
}
} }
}; };

16
components/lib/themes/primeone/presets/aura/paginator/index.js
View File

@ -3,29 +3,29 @@ export default {
light: { light: {
root: { root: {
background: '{surface.0}', background: '{surface.0}',
textColor: '{surface.700}' color: '{surface.700}'
}, },
navigator: { navigator: {
backgroundHover: '{surface.100}', hoverBackground: '{surface.100}',
color: '{surface.500}', color: '{surface.500}',
colorHover: '{surface.600}' hoverColor: '{surface.600}'
}, },
currentPageReport: { currentPageReport: {
textColor: '{surface.500}' color: '{surface.500}'
} }
}, },
dark: { dark: {
root: { root: {
background: '{surface.900}', background: '{surface.900}',
textColor: '{surface.0}' color: '{surface.0}'
}, },
navigator: { navigator: {
backgroundHover: '{surface.800}', hoverBackground: '{surface.800}',
color: '{surface.400}', color: '{surface.400}',
colorHover: '{surface.300}' hoverColor: '{surface.300}'
}, },
currentPageReport: { currentPageReport: {
textColor: '{surface.400}' color: '{surface.400}'
} }
} }
} }

44
components/lib/themes/primeone/presets/aura/picklist/index.js
View File

@ -6,26 +6,24 @@ export default {
borderColor: '{surface.200}' borderColor: '{surface.200}'
}, },
header: { header: {
textColor: '{surface.500}' color: '{surface.500}'
}, },
item: { item: {
background: 'transparent', background: 'transparent',
backgroundHover: '{surface.100}', focusBackground: '{surface.100}',
backgroundFocus: '{surface.100}', color: '{surface.700}',
textColor: '{surface.700}', focusColor: '{surface.800}'
textColorHover: '{surface.800}',
textColorFocus: '{surface.800}'
}, },
control: { control: {
background: '{surface.100}', background: '{surface.100}',
backgroundHover: '{surface.200}', hoverBackground: '{surface.200}',
backgroundActive: '{surface.300}', backgroundActive: '{surface.300}',
borderColor: '{surface.100}', borderColor: '{surface.100}',
borderColorHover: '{surface.200}', hoverBorderColor: '{surface.200}',
borderColorActive: '{surface.300}', activeBorderColor: '{surface.300}',
textColor: '{surface.600}', color: '{surface.600}',
textColorHover: '{surface.700}', hoverColor: '{surface.700}',
textColorActive: '{surface.800}' activeColor: '{surface.800}'
} }
}, },
dark: { dark: {
@ -34,26 +32,24 @@ export default {
borderColor: '{surface.700}' borderColor: '{surface.700}'
}, },
header: { header: {
textColor: '{surface.400}' color: '{surface.400}'
}, },
item: { item: {
background: 'transparent', background: 'transparent',
backgroundHover: '{surface.800}', focusBackground: '{surface.800}',
backgroundFocus: '{surface.800}', color: '{surface.0}',
textColor: '{surface.0}', focusColor: '{surface.0}'
textColorHover: '{surface.0}',
textColorFocus: '{surface.0}'
}, },
control: { control: {
background: '{surface.800}', background: '{surface.800}',
backgroundHover: '{surface.700}', hoverBackground: '{surface.700}',
backgroundActive: '{surface.600}', backgroundActive: '{surface.600}',
borderColor: '{surface.800}', borderColor: '{surface.800}',
borderColorHover: '{surface.700}', hoverBorderColor: '{surface.700}',
borderColorActive: '{surface.600}', activeBorderColor: '{surface.600}',
textColor: '{surface.300}', color: '{surface.300}',
textColorHover: '{surface.200}', hoverColor: '{surface.200}',
textColorActive: '{surface.100}' activeColor: '{surface.100}'
} }
} }
} }

32
components/lib/themes/primeone/presets/aura/tree/index.js
View File

@ -3,22 +3,22 @@ export default {
light: { light: {
root: { root: {
background: '{surface.0}', background: '{surface.0}',
textColor: '{surface.700}' color: '{surface.700}'
}, },
node: { node: {
backgroundHover: '{surface.100}', hoverBackground: '{surface.100}',
textColor: '{surface.700}', color: '{surface.700}',
textColorHover: '{surface.800}' hoverColor: '{surface.800}'
}, },
nodeIcon: { nodeIcon: {
color: '{surface.500}', color: '{surface.500}',
colorHover: '{surface.600}' hoverColor: '{surface.600}'
}, },
toggle: { toggle: {
backgroundHover: '{surface.100}', hoverBackground: '{surface.100}',
backgroundHoverHighlight: '{surface.0}', highlightHoverBackground: '{surface.0}',
color: '{surface.500}', color: '{surface.500}',
colorHover: '{surface.600}' hoverColor: '{surface.600}'
}, },
indeterminate: { indeterminate: {
color: '{surface.500}' color: '{surface.500}'
@ -27,22 +27,22 @@ export default {
dark: { dark: {
root: { root: {
background: '{surface.900}', background: '{surface.900}',
textColor: '{surface.0}' color: '{surface.0}'
}, },
node: { node: {
backgroundHover: '{surface.800}', hoverBackground: '{surface.800}',
textColor: '{surface.0}', color: '{surface.0}',
textColorHover: '{surface.0}' hoverColor: '{surface.0}'
}, },
nodeIcon: { nodeIcon: {
color: '{surface.400}', color: '{surface.400}',
colorHover: '{surface.300}' hoverColor: '{surface.300}'
}, },
toggle: { toggle: {
backgroundHover: '{surface.800}', hoverBackground: '{surface.800}',
backgroundHoverHighlight: '{surface.900}', highlightHoverBackground: '{surface.900}',
color: '{surface.400}', color: '{surface.400}',
colorHover: '{surface.300}' hoverColor: '{surface.300}'
}, },
indeterminate: { indeterminate: {
color: '{surface.400}' color: '{surface.400}'

60
components/lib/themes/primeone/presets/aura/treetable/index.js
View File

@ -4,46 +4,46 @@ export default {
header: { header: {
background: '{surface.0}', background: '{surface.0}',
borderColor: '{surface.200}', borderColor: '{surface.200}',
textColor: '{surface.700}' color: '{surface.700}'
}, },
headerCell: { headerCell: {
background: '{surface.0}', background: '{surface.0}',
backgroundHover: '{surface.100}', hoverBackground: '{surface.100}',
borderColor: '{surface.200}', borderColor: '{surface.200}',
textColor: '{surface.700}', color: '{surface.700}',
textColorHover: '{surface.800}' hoverColor: '{surface.800}'
}, },
row: { row: {
background: '{surface.0}', background: '{surface.0}',
backgroundStriped: '{surface.50}', stripedBackground: '{surface.50}',
backgroundHover: '{surface.100}', hoverBackground: '{surface.100}',
textColor: '{surface.700}', color: '{surface.700}',
textColorHover: '{surface.800}' hoverColor: '{surface.800}'
}, },
bodyCell: { bodyCell: {
borderColor: '{surface.200}', borderColor: '{surface.200}',
borderColorSelected: '{primary.100}' selectedBorderColor: '{primary.100}'
}, },
footerCell: { footerCell: {
background: '{surface.0}', background: '{surface.0}',
borderColor: '{surface.200}', borderColor: '{surface.200}',
textColor: '{surface.700}' color: '{surface.700}'
}, },
footer: { footer: {
background: '{surface.0}', background: '{surface.0}',
borderColor: '{surface.200}', borderColor: '{surface.200}',
textColor: '{surface.700}' color: '{surface.700}'
}, },
resizerColor: '{primary.color}', resizerColor: '{primary.color}',
sortIcon: { sortIcon: {
color: '{surface.500}', color: '{surface.500}',
colorHover: '{surface.600}' hoverColor: '{surface.600}'
}, },
toggle: { toggle: {
backgroundHover: '{surface.100}', hoverBackground: '{surface.100}',
backgroundHoverHighlight: '{surface.0}', highlightHoverBackground: '{surface.0}',
color: '{surface.500}', color: '{surface.500}',
colorHover: '{surface.600}' hoverColor: '{surface.600}'
}, },
indeterminate: { indeterminate: {
color: '{surface.500}' color: '{surface.500}'
@ -53,46 +53,46 @@ export default {
header: { header: {
background: '{surface.900}', background: '{surface.900}',
borderColor: '{surface.800}', borderColor: '{surface.800}',
textColor: '{surface.0}' color: '{surface.0}'
}, },
headerCell: { headerCell: {
background: '{surface.900}', background: '{surface.900}',
backgroundHover: '{surface.800}', hoverBackground: '{surface.800}',
borderColor: '{surface.800}', borderColor: '{surface.800}',
textColor: '{surface.0}', color: '{surface.0}',
textColorHover: '{surface.0}' hoverColor: '{surface.0}'
}, },
row: { row: {
background: '{surface.900}', background: '{surface.900}',
backgroundStriped: '{surface.950}', stripedBackground: '{surface.950}',
backgroundHover: '{surface.800}', hoverBackground: '{surface.800}',
textColor: '{surface.0}', color: '{surface.0}',
textColorHover: '{surface.0}' hoverColor: '{surface.0}'
}, },
bodyCell: { bodyCell: {
borderColor: '{surface.800}', borderColor: '{surface.800}',
borderColorSelected: '{primary.900}' selectedBorderColor: '{primary.900}'
}, },
footerCell: { footerCell: {
background: '{surface.900}', background: '{surface.900}',
borderColor: '{surface.800}', borderColor: '{surface.800}',
textColor: '{surface.0}' color: '{surface.0}'
}, },
footer: { footer: {
background: '{surface.900}', background: '{surface.900}',
borderColor: '{surface.800}', borderColor: '{surface.800}',
textColor: '{surface.0}' color: '{surface.0}'
}, },
resizerColor: '{primary.color}', resizerColor: '{primary.color}',
sortIcon: { sortIcon: {
color: '{surface.400}', color: '{surface.400}',
colorHover: '{surface.300}' hoverColor: '{surface.300}'
}, },
toggle: { toggle: {
backgroundHover: '{surface.800}', hoverBackground: '{surface.800}',
backgroundHoverHighlight: '{surface.900}', highlightHoverBackground: '{surface.900}',
color: '{surface.400}', color: '{surface.400}',
colorHover: '{surface.300}' hoverColor: '{surface.300}'
}, },
indeterminate: { indeterminate: {
color: '{surface.400}' color: '{surface.400}'