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

Initiated refactor of token convention and use of dt

pull/5507/head
Cagatay Civici 2024-03-12 11:19:23 +03:00
parent 9d84a9f92c
commit 31e56ea73a
92 changed files with 516 additions and 507 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
components/lib/themes/primeone/base/accordion/index.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-accordion-header-link {
cursor: pointer;
display: flex;
@ -9,11 +9,11 @@ export default {
user-select: none;
text-decoration: none;
padding: 1.125rem 1.125rem 1.125rem 1.125rem;
color: var(--p-accordion-header-text-color);
background: var(--p-accordion-header-background);
color: ${dt('accordion.header.color')};
background: ${dt('accordion.header.background')};
font-weight: 600;
border-radius: var(--p-rounded-base);
transition: color var(--p-transition-duration), outline-color var(--p-transition-duration);
border-radius: ${dt('rounded.base')};
transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
outline-color: transparent;
}
@ -22,14 +22,16 @@ export default {
}
.p-accordion-header:not(.p-disabled) .p-accordion-header-link:focus-visible {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: -2px;
}
.p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
color: var(--p-accordion-header-text-color-hover);
color: ${dt('accordion.header.hover.color')}
}
.p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
color: var(--p-accordion-header-text-color-active);
color: ${dt('accordion.header.active.color')}
}
.p-accordion-toggle-icon {
@ -42,12 +44,12 @@ export default {
.p-accordion-content {
padding: 0 1.125rem 1.125rem 1.125rem;
background: var(--p-accordion-content-background);
color: var(--p-accordion-content-text-color);
background: color: ${dt('accordion.content.background')}
color: ${dt('accordion.content.color')}
}
.p-accordion-tab {
border-bottom: 1px solid var(--p-accordion-content-border-color);
border-bottom: 1px solid ${dt('accordion.content.border.color')};
}
.p-accordion-tab:last-child {

10
components/lib/themes/primeone/base/autocomplete/index.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-autocomplete {
display: inline-flex;
}
@ -43,7 +43,7 @@ export default {
background: var(--p-autocomplete-overlay-background);
color: var(--p-autocomplete-overlay-text-color);
border: 1px solid var(--p-autocomplete-overlay-border-color);
border-radius: var(--p-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);
}
@ -64,7 +64,7 @@ export default {
border: 0 none;
color: var(--p-autocomplete-item-text-color);
background: transparent;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration);
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')};
border-radius: var(--p-rounded-sm);
}
@ -113,9 +113,9 @@ export default {
color: var(--p-autocomplete-input-multiple-text-color);
background: var(--p-autocomplete-input-multiple-background);
border: 1px solid var(--p-autocomplete-input-multiple-border-color);
border-radius: var(--p-rounded-base);
border-radius: ${dt('rounded.base')};
width: 100%;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), outline-color var(--p-transition-duration);
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
outline-color: transparent;
box-shadow: var(--p-autocomplete-input-multiple-box-shadow);
}

4
components/lib/themes/primeone/base/avatar/index.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-avatar {
display: inline-flex;
align-items: center;
@ -8,7 +8,7 @@ export default {
height: 2rem;
font-size: 1rem;
background: var(--p-avatar-background);
border-radius: var(--p-rounded-base);
border-radius: ${dt('rounded.base')};
}
.p-avatar-image {

2
components/lib/themes/primeone/base/badge/index.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-badge {
display: inline-flex;
border-radius: 10px;

4
components/lib/themes/primeone/base/blockui/index.js
View File

@ -1,7 +1,7 @@
export default {
css: `
css: ({ dt }) => `
.p-blockui {
border-radius: var(--p-rounded-base);
border-radius: ${dt('rounded.base')};
}
.p-blockui-container {
position: relative;

12
components/lib/themes/primeone/base/breadcrumb/index.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-breadcrumb {
background: var(--p-breadcrumb-background);
border: 0 none;
@ -33,19 +33,19 @@ export default {
}
.p-breadcrumb .p-menuitem-link {
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
border-radius: var(--p-rounded-base);
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
border-radius: ${dt('rounded.base')};
outline-color: transparent;
}
.p-breadcrumb .p-menuitem-link:focus-visible {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline-offset: var(--p-focus-ring-offset);
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-breadcrumb .p-menuitem-text {
color: var(--p-breadcrumb-item-text-color);
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
line-height: 1;
}

10
components/lib/themes/primeone/base/button/index.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-button {
display: inline-flex;
cursor: pointer;
@ -13,8 +13,8 @@ export default {
border: 1px solid var(--p-button-primary-border-color);
padding: 0.5rem 1rem;
font-size: 1rem;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), outline-color var(--p-transition-duration);
border-radius: var(--p-rounded-base);
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
border-radius: ${dt('rounded.base')};
outline-color: transparent;
}
@ -116,8 +116,8 @@ export default {
}
.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);
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} var(--p-button-primary-background);
outline-offset: ${dt('focus.ring.offset')};
}
.p-button .p-badge {

36
components/lib/themes/primeone/base/calendar/index.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-calendar {
display: inline-flex;
max-width: 100%;
@ -42,7 +42,7 @@ export default {
background: var(--p-calendar-background);
color: var(--p-calendar-text-color);
border: 1px solid var(--p-calendar-border-color);
border-radius: var(--p-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);
}
@ -82,7 +82,7 @@ export default {
border: 0 none;
background: transparent;
border-radius: 50%;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-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')};
outline-color: transparent;
}
@ -94,15 +94,15 @@ export default {
.p-datepicker-prev:focus-visible,
.p-datepicker-next:focus-visible {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline-offset: var(--p-focus-ring-offset);
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-datepicker-year,
.p-datepicker-month {
font-weight: 500;
padding: 0.25rem;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-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-datepicker-month {
@ -179,7 +179,7 @@ export default {
width: 2rem;
height: 2rem;
border-radius: 50%;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-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')};
border: 1px solid transparent;
outline-color: transparent;
color: var(--p-calendar-date-text-color);
@ -191,8 +191,8 @@ export default {
}
.p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus-visible {
outline: 1px solid var(--p-focus-ring-color);
outline-offset: var(--p-focus-ring-offset);
outline: 1px solid ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-datepicker table td > span.p-highlight {
@ -223,8 +223,8 @@ export default {
overflow: hidden;
position: relative;
padding: 0.25rem;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
border-radius: var(--p-rounded-base);
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')};
border-radius: ${dt('rounded.base')};
outline-color: transparent;
color: var(--p-calendar-month-text-color);
}
@ -240,7 +240,7 @@ export default {
}
.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus-visible {
outline: var(--p-focus-ring-width) solid var(--p-focus-ring-color);
outline: ${dt('focus.ring.width')} solid ${dt('focus.ring.color')};
outline-offset: 0;
}
@ -258,8 +258,8 @@ export default {
overflow: hidden;
position: relative;
padding: 0.25rem;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
border-radius: var(--p-rounded-base);
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')};
border-radius: ${dt('rounded.base')};
outline-color: transparent;
color: var(--p-calendar-year-text-color);
}
@ -275,7 +275,7 @@ export default {
}
.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus-visible {
outline: var(--p-focus-ring-width) solid var(--p-focus-ring-color);
outline: ${dt('focus.ring.width')} solid ${dt('focus.ring.color')};
outline-offset: 0;
}
@ -326,7 +326,7 @@ export default {
border: 0 none;
background: transparent;
border-radius: 50%;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-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')};
outline-color: transparent;
}
@ -336,8 +336,8 @@ export default {
}
.p-timepicker button:focus-visible {
outline: 1px solid var(--p-focus-ring-color);
outline-offset: var(--p-focus-ring-offset);
outline: 1px solid ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-timepicker button:last-child {

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

@ -1,8 +1,8 @@
export default {
css: `
css: ({ dt }) => `
.p-card {
background: var(--p-card-background);
color: var(--p-card-text-color);
background: ${dt('card.background')};
color: ${dt('card.color')};
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
border-radius: 12px;
display: flex;
@ -29,7 +29,7 @@ export default {
.p-card-subtitle {
font-weight: 400;
color: var(--p-card-subtitle-text-color);
color: ${dt('card.subtitle.color')};
}
`
};

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

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-carousel {
display: flex;
flex-direction: column;
@ -42,7 +42,7 @@ export default {
border: 0 none;
background: transparent;
border-radius: 50%;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration),outline-color var(--p-transition-duration);
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')},outline-color ${dt('transition.duration')};
outline-color: transparent;
margin: 0.5rem;
}
@ -55,8 +55,8 @@ export default {
.p-carousel-prev:focus-visible,
.p-carousel-next:focus-visible {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline-offset: var(--p-focus-ring-offset);
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-carousel-indicators {
@ -76,14 +76,14 @@ export default {
width: 2rem;
height: 0.5rem;
border: 0 none;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
outline-color: transparent;
border-radius: var(--p-rounded-base);
border-radius: ${dt('rounded.base')};
}
.p-carousel-indicator button:focus-visible {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline-offset: var(--p-focus-ring-offset);
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-carousel-indicator button:hover {

10
components/lib/themes/primeone/base/cascadeselect/index.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-cascadeselect {
display: inline-flex;
cursor: pointer;
@ -7,8 +7,8 @@ export default {
user-select: none;
background: var(--p-cascadeselect-background);
border: 1px solid var(--p-cascadeselect-border-color);
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), outline-color var(--p-transition-duration);
border-radius: var(--p-rounded-base);
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
border-radius: ${dt('rounded.base')};
outline-color: transparent;
box-shadow: var(--p-cascadeselect-box-shadow);
}
@ -47,8 +47,8 @@ export default {
background: transparent;
color: var(--p-cascadeselect-toggle-color);
width: 2.5rem;
border-top-right-radius: var(--p-rounded-base);
border-bottom-right-radius: var(--p-rounded-base);
border-top-right-radius: ${dt('rounded.base')};
border-bottom-right-radius: ${dt('rounded.base')};
}
.p-cascadeselect-label {

10
components/lib/themes/primeone/base/checkbox/index.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-checkbox {
position: relative;
display: inline-flex;
@ -35,13 +35,13 @@ export default {
background: var(--p-checkbox-background);
width: var(--p-checkbox-width);
height: var(--p-checkbox-height);
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-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')};
outline-color: transparent;
box-shadow: var(--p-checkbox-box-shadow);
}
.p-checkbox-icon {
transition-duration: var(--p-transition-duration);
transition-duration: ${dt('transition.duration')};
color: var(--p-checkbox-icon-color);
font-size: var(--p-checkbox-icon-size);
width: var(--p-checkbox-icon-size);
@ -71,8 +71,8 @@ export default {
}
.p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline-offset: var(--p-focus-ring-offset);
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-checkbox.p-invalid > .p-checkbox-box {

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

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-chip {
display: inline-flex;
align-items: center;
@ -27,7 +27,7 @@ export default {
cursor: pointer;
margin-left: 0.375rem;
border-radius: 6px;
transition: outline-color var(--p-transition-duration);
transition: outline-color ${dt('transition.duration')};
outline-color: transparent;
}
@ -40,8 +40,8 @@ export default {
}
.p-chip-remove-icon:focus-visible {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline-offset: var(--p-focus-ring-offset);
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
`
};

6
components/lib/themes/primeone/base/chips/index.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-chips {
display: inline-flex;
}
@ -18,9 +18,9 @@ export default {
color: var(--p-chips-text-color);
background: var(--p-chips-background);
border: 1px solid var(--p-chips-border-color);
border-radius: var(--p-rounded-base);
border-radius: ${dt('rounded.base')};
width: 100%;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), outline-color var(--p-transition-duration);
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
outline-color: transparent;
box-shadow: var(--p-chips-box-shadow);
}

12
components/lib/themes/primeone/base/colorpicker/index.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-colorpicker-color {
background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
}
@ -20,20 +20,20 @@ export default {
height: 1.5rem;
padding: 0;
border: 0 none;
border-radius: var(--p-rounded-base);
transition: outline-color var(--p-transition-duration);
border-radius: ${dt('rounded.base')};
transition: outline-color ${dt('transition.duration')};
outline-color: transparent;
}
.p-colorpicker-preview:enabled:focus-visible {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline-offset: var(--p-focus-ring-offset);
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-colorpicker > .p-colorpicker-panel {
background: var(--p-colorpicker-panel-background);
border: 1px solid var(--p-colorpicker-panel-border-color);
border-radius: var(--p-rounded-base);
border-radius: ${dt('rounded.base')};
}
.p-colorpicker-panel .p-colorpicker-color-handle,

2
components/lib/themes/primeone/base/confirmdialog/index.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-confirm-dialog .p-dialog-content {
display: flex;
align-items: center;

4
components/lib/themes/primeone/base/confirmpopup/index.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-confirm-popup {
position: absolute;
margin-top: 10px;
@ -8,7 +8,7 @@ export default {
background: var(--p-confirmpopup-background);
color: var(--p-confirmpopup-text-color);
border: 1px solid var(--p-confirmpopup-border-color);
border-radius: var(--p-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);
}

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

@ -1,11 +1,11 @@
export default {
css: `
css: ({ dt }) => `
.p-contextmenu {
padding: 0.25rem 0.25rem;
background: var(--p-contextmenu-background);
color: var(--p-contextmenu-text-color);
border: 1px solid var(--p-contextmenu-border-color);
border-radius: var(--p-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);
min-width: 12.5rem;
}
@ -28,7 +28,7 @@ export default {
background: var(--p-contextmenu-background);
color: var(--p-contextmenu-text-color);
border: 1px solid var(--p-contextmenu-border-color);
border-radius: var(--p-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);
}
@ -61,7 +61,7 @@ export default {
}
.p-contextmenu .p-menuitem-content {
transition: background-color var(--p-transition-duration), color var(--p-transition-duration);
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')};
border-radius: var(--p-rounded-sm);
color: var(--p-contextmenu-item-text-color);
}

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

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-datatable {
position: relative;
}
@ -24,7 +24,7 @@ export default {
.p-datatable .p-sortable-column .p-sortable-column-icon {
color: var(--p-datatable-sort-icon-color);
margin-left: 0.5rem;
transition: color var(--p-transition-duration);
transition: color ${dt('transition.duration')};
}
.p-datatable .p-sortable-column .p-sortable-column-badge {
@ -53,7 +53,7 @@ export default {
}
.p-datatable .p-sortable-column:focus-visible {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: -1px;
}
@ -178,7 +178,7 @@ export default {
color: var(--p-datatable-row-action-color);
border: 0 none;
border-radius: 50%;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-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')};
outline-color: transparent;
}
@ -194,7 +194,7 @@ export default {
.p-datatable .p-row-editor-init:focus-visible,
.p-datatable .p-row-editor-save:focus-visible,
.p-datatable .p-row-editor-cancel:focus-visible {
outline: 1px solid var(--p-focus-ring-color);
outline: 1px solid ${dt('focus.ring.color')};
outline-offset: 2px;
}
@ -255,7 +255,7 @@ export default {
border: 0 none;
background: transparent;
border-radius: 50%;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-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')};
outline-color: transparent;
}
@ -277,8 +277,8 @@ export default {
}
.p-column-filter-menu-button:focus-visible {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline-offset: var(--p-focus-ring-offset);
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-column-filter-clear-button {
@ -295,7 +295,7 @@ export default {
border: 0 none;
background: transparent;
border-radius: 50%;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-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')};
outline-color: transparent;
}
@ -305,8 +305,8 @@ export default {
}
.p-column-filter-clear-button:focus-visible {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline-offset: var(--p-focus-ring-offset);
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-column-filter-menu {
@ -349,7 +349,7 @@ export default {
background: var(--p-datatable-filter-overlay-background);
color: var(--p-datatable-filter-overlay-text-color);
border: 1px solid var(--p-datatable-filter-overlay-border-color);
border-radius: var(--p-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);
min-width: 12.5rem;
padding: 0.75rem;
@ -434,14 +434,14 @@ export default {
border-width: 0 0 1px 0;
color: var(--p-datatable-header-cell-text-color);
font-weight: 600;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-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 {
outline-color: transparent;
background: var(--p-datatable-row-background);
color: var(--p-datatable-row-text-color);
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-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 {
@ -470,12 +470,12 @@ export default {
}
.p-datatable-tbody > tr:focus-visible {
outline: 1px solid var(--p-focus-ring-color);
outline: 1px solid ${dt('focus.ring.color')};
outline-offset: -1px;
}
.p-datatable-tbody > tr.p-highlight-contextmenu {
outline: 1px solid var(--p-focus-ring-color);
outline: 1px solid ${dt('focus.ring.color')};
outline-offset: -1px;
}

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

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-dataview .p-paginator-top {
border-width: 0 0 1px 0;
border-radius: 0;

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

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-dialog {
max-height: 90%;
transform: scale(1);
@ -54,7 +54,7 @@ export default {
border: 0 none;
background: transparent;
border-radius: 50%;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
outline-color: transparent;
}
@ -64,8 +64,8 @@ export default {
}
.p-dialog-header-icon:focus-visible {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline-offset: var(--p-focus-ring-offset);
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-dialog-enter-active {

10
components/lib/themes/primeone/base/divider/index.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-divider-horizontal {
display: flex;
width: 100%;
@ -16,7 +16,7 @@ export default {
left: 0;
width: 100%;
content: "";
border-top: 1px solid var(--p-divider-border-color);
border-top: 1px solid ${dt('divider.border.color')};
}
.p-divider-horizontal .p-divider-content {
@ -40,7 +40,7 @@ export default {
left: 50%;
height: 100%;
content: "";
border-left: 1px solid var(--p-divider-border-color);
border-left: 1px solid ${dt('divider.border.color')};
}
.p-divider.p-divider-vertical .p-divider-content {
@ -49,8 +49,8 @@ export default {
.p-divider-content {
z-index: 1;
background: var(--p-divider-content-background);
color: var(--p-divider-content-text-color);
background: ${dt('divider.content.background')};
color: ${dt('divider.content.color')};
}
.p-divider-solid.p-divider-horizontal:before {

6
components/lib/themes/primeone/base/dock/index.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-dock {
position: absolute;
z-index: 1;
@ -36,8 +36,8 @@ export default {
}
p-dock-item.p-focus {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline-offset: var(--p-focus-ring-offset);
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-dock-link {

14
components/lib/themes/primeone/base/dropdown/index.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-dropdown {
display: inline-flex;
cursor: pointer;
@ -7,8 +7,8 @@ export default {
user-select: none;
background: var(--p-dropdown-background);
border: 1px solid var(--p-dropdown-border-color);
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), outline-color var(--p-transition-duration);
border-radius: var(--p-rounded-base);
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
border-radius: ${dt('rounded.base')};
outline-color: transparent;
box-shadow: var(--p-dropdown-box-shadow);
}
@ -55,8 +55,8 @@ export default {
background: transparent;
color: var(--p-dropdown-toggle-color);
width: 2.5rem;
border-top-right-radius: var(--p-rounded-base);
border-bottom-right-radius: var(--p-rounded-base);
border-top-right-radius: ${dt('rounded.base')};
border-bottom-right-radius: ${dt('rounded.base')};
}
.p-dropdown-label {
@ -106,7 +106,7 @@ input.p-dropdown-label {
background: var(--p-dropdown-overlay-background);
color: var(--p-dropdown-overlay-text-color);
border: 1px solid var(--p-dropdown-overlay-border-color);
border-radius: var(--p-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);
}
@ -166,7 +166,7 @@ input.p-dropdown-label {
border: 0 none;
color: var(--p-dropdown-item-text-color);
background: transparent;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-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')};
border-radius: var(--p-rounded-sm);
}

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

@ -1,9 +1,9 @@
export default {
css: `
css: ({ dt }) => `
.p-editor-container .p-editor-toolbar {
background: var(--p-editor-toolbar-background);
border-top-right-radius: var(--p-rounded-base);
border-top-left-radius: var(--p-rounded-base);
border-top-right-radius: ${dt('rounded.base')};
border-top-left-radius: ${dt('rounded.base')};
}
.p-editor-container .p-editor-toolbar.ql-snow {
@ -51,7 +51,7 @@ export default {
background: var(--p-editor-overlay-background);
border: 1px solid var(--p-editor-overlay-border-color);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
border-radius: var(--p-rounded-base);
border-radius: ${dt('rounded.base')};
padding: 0.25rem 0.25rem;
}
@ -69,8 +69,8 @@ export default {
}
.p-editor-container .p-editor-content {
border-bottom-right-radius: var(--p-rounded-base);
border-bottom-left-radius: var(--p-rounded-base);
border-bottom-right-radius: ${dt('rounded.base')};
border-bottom-left-radius: ${dt('rounded.base')};
}
.p-editor-container .p-editor-content.ql-snow {
@ -80,8 +80,8 @@ export default {
.p-editor-container .p-editor-content .ql-editor {
background: var(--p-editor-content-background);
color: var(--p-editor-content-text-color);
border-bottom-right-radius: var(--p-rounded-base);
border-bottom-left-radius: var(--p-rounded-base);
border-bottom-right-radius: ${dt('rounded.base')};
border-bottom-left-radius: ${dt('rounded.base')};
}
.p-editor-container .ql-snow.ql-toolbar button:hover,

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

@ -1,10 +1,10 @@
export default {
css: `
css: ({ dt }) => `
.p-fieldset {
border: 1px solid var(--p-fieldset-border-color);
background: var(--p-fieldset-background);
color: var(--p-fieldset-text-color);
border-radius: var(--p-rounded-base);
background: ${dt('fieldset.background')};
border: 1px solid ${dt('fieldset.border.color')};
border-radius: ${dt('rounded.base')};
color: ${dt('fieldset.color')};
padding: 0 1.125rem 1.125rem 1.125rem;
margin: 0;
}
@ -32,29 +32,29 @@ export default {
align-items: center;
justify-content: center;
padding: 0.5rem 0.75rem;
color: var(--p-legend-text-color);
border-radius: var(--p-rounded-base);
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
color: ${dt('fieldset.legend.color')};
border-radius: ${dt('rounded.base')};
transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
outline-color: transparent;
}
.p-fieldset-toggleable > .p-fieldset-legend > a:focus-visible {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline-offset: var(--p-focus-ring-offset);
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-fieldset-toggleable > .p-fieldset-legend > a:hover {
color: var(--p-fieldset-legend-text-color-hover);
background: var(--p-fieldset-legend-background-hover);
color: ${dt('fieldset.legend.hover.color')};
background: ${dt('fieldset.legend.hover.background')};
}
.p-fieldset-toggler {
color: var(--p-fieldset-toggle-icon-color);
transition: color var(--p-transition-duration);
color: ${dt('fieldset.toggle.icon.color')};
transition: color ${dt('transition.duration')};
}
.p-fieldset-toggleable > .p-fieldset-legend > a:hover > .p-fieldset-toggler {
color: var(--p-fieldset-toggle-icon-color-hover);
color: ${dt('fieldset.toggle.icon.hover.color')};
}
.p-fieldset .p-fieldset-content {

12
components/lib/themes/primeone/base/fileupload/index.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-fileupload-choose {
position: relative;
overflow: hidden;
@ -21,8 +21,8 @@ export default {
border: 1px solid var(--p-fileupload-header-border-color);
color: var(--p-fileupload-header-text-color);
border-bottom: 0 none;
border-top-right-radius: var(--p-rounded-base);
border-top-left-radius: var(--p-rounded-base);
border-top-right-radius: ${dt('rounded.base')};
border-top-left-radius: ${dt('rounded.base')};
gap: 0.5rem;
}
@ -32,8 +32,8 @@ export default {
padding: 0 1.125rem 1.125rem 1.125rem;
border: 1px solid var(--p-fileupload-content-border-color);
color: var(--p-fileupload-content-text-color);
border-bottom-right-radius: var(--p-rounded-base);
border-bottom-left-radius: var(--p-rounded-base);
border-bottom-right-radius: ${dt('rounded.base')};
border-bottom-left-radius: ${dt('rounded.base')};
border-top: 0 none;
}
@ -51,7 +51,7 @@ export default {
align-items: center;
padding: 1rem;
border: 1px solid var(--p-fileupload-file-border-color);
border-radius: var(--p-rounded-base);
border-radius: ${dt('rounded.base')};
gap: 0.5rem;
margin-bottom: 0.5rem;
}

4
components/lib/themes/primeone/base/floatlabel/index.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-float-label {
display: block;
position: relative;
@ -15,7 +15,7 @@ export default {
line-height: 1;
left: 0.75rem;
color: var(--p-float-label-text-color);
transition-duration: var(--p-transition-duration);
transition-duration: ${dt('transition.duration')};
}
.p-float-label:has(textarea) label {

28
components/lib/themes/primeone/base/galleria/index.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-galleria-content {
display: flex;
flex-direction: column;
@ -29,7 +29,7 @@ export default {
color: var(--p-galleria-navigator-color);
width: 3rem;
height: 3rem;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
border-radius: 50%;
margin: 0 0.5rem;
}
@ -64,7 +64,7 @@ export default {
.p-galleria-item-nav-onhover .p-galleria-item-nav {
pointer-events: none;
opacity: 0;
transition: opacity var(--p-transition-duration) ease-in-out;
transition: opacity ${dt('transition.duration')} ease-in-out;
}
.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav {
@ -107,7 +107,7 @@ export default {
color: var(--p-galleria-thumbnail-navigator-color);
width: 2rem;
height: 2rem;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
outline-color: transparent;
border-radius: 50%;
}
@ -120,8 +120,8 @@ export default {
.p-galleria-thumbnail-prev:focus-visible,
.p-galleria-thumbnail-next:focus-visible {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline-offset: var(--p-focus-ring-offset);
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-galleria-thumbnail-prev span,
@ -161,8 +161,8 @@ export default {
}
.p-galleria-thumbnail-item-content:focus-visible {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline-offset: var(--p-focus-ring-offset);
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-galleria-thumbnail-item:hover {
@ -220,7 +220,7 @@ export default {
background-color: var(--p-galleria-indicator-background);
width: 1rem;
height: 1rem;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
outline-color: transparent;
border-radius: 50%;
}
@ -230,8 +230,8 @@ export default {
}
.p-galleria-indicator > button:focus-visible {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline-offset: var(--p-focus-ring-offset);
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-galleria-indicator.p-highlight > button {
@ -330,7 +330,7 @@ export default {
height: 3rem;
border-radius: 50%;
outline-color: transparent;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
}
.p-galleria-close-icon {
@ -345,8 +345,8 @@ export default {
}
.p-galleria-close:focus-visible {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline-offset: var(--p-focus-ring-offset);
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-galleria-mask .p-galleria-item-nav {

6
components/lib/themes/primeone/base/global.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-component,
.p-component * {
box-sizing: border-box;
@ -137,7 +137,7 @@ export default {
.p-component-overlay {
background-color: rgba(0, 0, 0, 0.4);
transition-duration: var(--p-transition-duration);
transition-duration: ${dt('transition.duration')};
}
.p-disabled,
@ -170,7 +170,7 @@ export default {
outline-color: transparent;
}
.p-link:focus-visible {
outline: 1px solid var(--p-focus-ring-color);
outline: 1px solid ${dt('focus.ring.color')};
outline-offset: 2px;
box-shadow: none;
}

2
components/lib/themes/primeone/base/iconfield/index.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-icon-field {
position: relative;
}

10
components/lib/themes/primeone/base/image/index.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-image-mask {
display: flex;
align-items: center;
@ -29,7 +29,7 @@ export default {
cursor: pointer;
background: transparent;
color: var(--p-image-preview-indicator-text-color);
transition: background-color var(--p-transition-duration);
transition: background-color ${dt('transition.duration')};
}
.p-image-preview-container:hover > .p-image-preview-indicator {
@ -63,7 +63,7 @@ export default {
height: 3rem;
border-radius: 50%;
outline-color: transparent;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
}
.p-image-action:hover {
@ -72,8 +72,8 @@ export default {
}
.p-image-action:focus-visible {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline-offset: var(--p-focus-ring-offset);
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-image-action .p-icon {

4
components/lib/themes/primeone/base/inlinemessage/index.js
View File

@ -1,12 +1,12 @@
export default {
css: `
css: ({ dt }) => `
.p-inline-message {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.5rem 0.75rem;
margin: 0;
border-radius: var(--p-rounded-base);
border-radius: ${dt('rounded.base')};
}
.p-inline-message-text {

10
components/lib/themes/primeone/base/inplace/index.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-inplace .p-inplace-display {
display: inline;
cursor: pointer;
@ -20,8 +20,8 @@ export default {
.p-inplace-display {
padding: 0.5rem 0.75rem;
border-radius: var(--p-rounded-base);
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
border-radius: ${dt('rounded.base')};
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
outline-color: transparent;
}
@ -31,8 +31,8 @@ export default {
}
.p-inplace-display:focus-visible {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline-offset: var(--p-focus-ring-offset);
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
`
};

2
components/lib/themes/primeone/base/inputgroup/index.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-inputgroup {
display: flex;
align-items: stretch;

2
components/lib/themes/primeone/base/inputotp/index.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-inputotp {
display: flex;
align-items: center;

10
components/lib/themes/primeone/base/inputswitch/index.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-inputswitch {
display: inline-block;
width: 2.5rem;
@ -31,7 +31,7 @@ export default {
bottom: 0;
border: 0 none;
background: var(--p-inputswitch-background);
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-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')};
border-radius: var(--p-inputswitch-border-radius);
outline-color: transparent;
}
@ -46,7 +46,7 @@ export default {
left: 0.25rem;
margin-top: -0.5rem;
border-radius: 50%;
transition: all var(--p-transition-duration);
transition: all ${dt('transition.duration')};
}
.p-inputswitch.p-highlight .p-inputswitch-slider {
@ -75,8 +75,8 @@ export default {
}
.p-inputswitch:not(.p-disabled):has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline-offset: var(--p-focus-ring-offset);
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-inputswitch.p-invalid > .p-inputswitch-slider {

6
components/lib/themes/primeone/base/inputtext/index.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-inputtext {
font-family: inherit;
font-feature-settings: inherit;
@ -8,9 +8,9 @@ export default {
background: var(--p-inputtext-background);
padding: 0.5rem 0.75rem;
border: 1px solid var(--p-inputtext-border-color);
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), outline-color var(--p-transition-duration);
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
appearance: none;
border-radius: var(--p-rounded-base);
border-radius: ${dt('rounded.base')};
outline-color: transparent;
box-shadow: var(--p-inputtext-box-shadow);
}

10
components/lib/themes/primeone/base/knob/index.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-knob-range {
fill: none;
transition: stroke 0.1s ease-in;
@ -17,13 +17,13 @@ export default {
}
.p-knob svg {
border-radius: var(--p-rounded-base);
border-radius: ${dt('rounded.base')};
outline-color: transparent;
transition: outline-color var(--p-transition-duration);
transition: outline-color ${dt('transition.duration')};
}
.p-knob svg:focus-visible {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline-offset: var(--p-focus-ring-offset);
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
@keyframes p-knob-dash-frame {

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

@ -1,11 +1,11 @@
export default {
css: `
css: ({ dt }) => `
.p-listbox {
background: var(--p-listbox-background);
color: var(--p-listbox-text-color);
border: 1px solid var(--p-listbox-border-color);
border-radius: var(--p-rounded-base);
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
border-radius: ${dt('rounded.base')};
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')};
outline-color: transparent;
box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05);
}
@ -68,7 +68,7 @@ export default {
border: 0 none;
border-radius: var(--p-rounded-sm);
color: var(--p-listbox-item-text-color);
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-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-listbox-item:first-child {

14
components/lib/themes/primeone/base/megamenu/index.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-megamenu {
display: flex;
position: relative;
@ -7,7 +7,7 @@ export default {
background: var(--p-megamenu-background);
color: var(--p-megamenu-text-color);
border: 1px solid var(--p-megamenu-border-color);
border-radius: var(--p-rounded-base);
border-radius: ${dt('rounded.base')};
}
.p-megamenu-root-list {
@ -17,7 +17,7 @@ export default {
}
.p-megamenu .p-menuitem-content {
transition: background-color var(--p-transition-duration), color var(--p-transition-duration);
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')};
border-radius: var(--p-rounded-sm);
color: var(--p-megamenu-item-text-color);
}
@ -91,7 +91,7 @@ export default {
background: var(--p-megamenu-background);
color: var(--p-megamenu-text-color);
border: 1px solid var(--p-megamenu-border-color);
border-radius: var(--p-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)
}
@ -211,7 +211,7 @@ export default {
border: 0 none;
background: transparent;
border-radius: 50%;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
outline-color: transparent;
}
@ -221,8 +221,8 @@ export default {
}
.p-megamenu-button:focus-visible {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline-offset: var(--p-focus-ring-offset);
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-megamenu-mobile {

6
components/lib/themes/primeone/base/menu/index.js
View File

@ -1,11 +1,11 @@
export default {
css: `
css: ({ dt }) => `
.p-menu {
padding: 0.25rem 0.25rem;
background: var(--p-menu-background);
color: var(--p-menu-text-color);
border: 1px solid var(--p-menu-border-color);
border-radius: var(--p-rounded-base);
border-radius: ${dt('rounded.base')};
min-width: 12.5rem;
}
@ -44,7 +44,7 @@ export default {
}
.p-menu .p-menuitem-content {
transition: background-color var(--p-transition-duration), color var(--p-transition-duration);
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')};
border-radius: var(--p-rounded-sm);
color: var(--p-menu-item-text-color);
}

14
components/lib/themes/primeone/base/menubar/index.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-menubar {
display: flex;
align-items: center;
@ -7,7 +7,7 @@ export default {
background: var(--p-menubar-background);
color: var(--p-menubar-text-color);
border: 1px solid var(--p-menubar-border-color);
border-radius: var(--p-rounded-base);
border-radius: ${dt('rounded.base')};
}
.p-menubar ul {
@ -44,7 +44,7 @@ export default {
}
.p-menubar .p-menuitem-content {
transition: background-color var(--p-transition-duration), color var(--p-transition-duration);
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')};
border-radius: var(--p-rounded-sm);
color: var(--p-menubar-item-text-color);
}
@ -105,7 +105,7 @@ export default {
background: var(--p-menubar-background);
color: var(--p-menubar-text-color);
border: 1px solid var(--p-menubar-border-color);
border-radius: var(--p-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);
}
@ -150,7 +150,7 @@ export default {
border: 0 none;
background: transparent;
border-radius: 50%;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
outline-color: transparent;
}
@ -160,8 +160,8 @@ export default {
}
.p-menubar-button:focus-visible {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline-offset: var(--p-focus-ring-offset);
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-menubar-mobile {

10
components/lib/themes/primeone/base/message/index.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-message-wrapper {
display: flex;
align-items: center;
@ -27,15 +27,15 @@ export default {
height: 1.75rem;
border-radius: 50%;
background: transparent;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
outline-color: transparent;
color: inherit;
}
.p-message-close:focus-visible {
outline-width: var(--p-focus-ring-width);
outline-style: var(--p-focus-ring-style);
outline-offset: var(--p-focus-ring-offset);
outline-width: ${dt('focus.ring.width')};
outline-style: ${dt('focus.ring.style')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-message-info {

20
components/lib/themes/primeone/base/metergroup/index.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-metergroup {
display: flex;
gap: 1rem;
@ -8,7 +8,7 @@ export default {
.p-metergroup-meters {
display: flex;
background: var(--p-metergroup-meters-background);
border-radius: var(--p-rounded-base);
border-radius: ${dt('rounded.base')};
}
.p-metergroup-meter {
@ -56,12 +56,12 @@ export default {
}
.p-metergroup-horizontal .p-metergroup-meter:first-of-type {
border-top-left-radius: var(--p-rounded-base);
border-bottom-left-radius: var(--p-rounded-base);
border-top-left-radius: ${dt('rounded.base')};
border-bottom-left-radius: ${dt('rounded.base')};
}
.p-metergroup-horizontal .p-metergroup-meter:last-of-type {
border-top-right-radius: var(--p-rounded-base);
border-bottom-right-radius: var(--p-rounded-base);
border-top-right-radius: ${dt('rounded.base')};
border-bottom-right-radius: ${dt('rounded.base')};
}
.p-metergroup-vertical {
@ -84,12 +84,12 @@ export default {
}
.p-metergroup-vertical .p-metergroup-meter:first-of-type {
border-top-left-radius: var(--p-rounded-base);
border-top-right-radius: var(--p-rounded-base);
border-top-left-radius: ${dt('rounded.base')};
border-top-right-radius: ${dt('rounded.base')};
}
.p-metergroup-vertical .p-metergroup-meter:last-of-type {
border-bottom-left-radius: var(--p-rounded-base);
border-bottom-right-radius: var(--p-rounded-base);
border-bottom-left-radius: ${dt('rounded.base')};
border-bottom-right-radius: ${dt('rounded.base')};
}
`
};

14
components/lib/themes/primeone/base/multiselect/index.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-multiselect {
display: inline-flex;
cursor: pointer;
@ -7,8 +7,8 @@ export default {
user-select: none;
background: var(--p-multiselect-background);
border: 1px solid var(--p-multiselect-border-color);
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), outline-color var(--p-transition-duration);
border-radius: var(--p-rounded-base);
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
border-radius: ${dt('rounded.base')};
outline-color: transparent;
box-shadow: var(--p-multiselect-box-shadow);
}
@ -47,8 +47,8 @@ export default {
background: transparent;
color: var(--p-multiselect-toggle-color);
width: 2.5rem;
border-top-right-radius: var(--p-rounded-base);
border-bottom-right-radius: var(--p-rounded-base);
border-top-right-radius: ${dt('rounded.base')};
border-bottom-right-radius: ${dt('rounded.base')};
}
.p-multiselect-label-container {
@ -112,7 +112,7 @@ export default {
background: var(--p-multiselect-overlay-background);
color: var(--p-multiselect-overlay-text-color);
border: 1px solid var(--p-multiselect-overlay-border-color);
border-radius: var(--p-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);
}
@ -169,7 +169,7 @@ export default {
border: 0 none;
color: var(--p-multiselect-item-text-color);
background: transparent;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-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')};
border-radius: var(--p-rounded-sm);
}

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

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-orderlist {
display: flex;
gap: 1.125rem;
@ -16,7 +16,7 @@ export default {
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);
border-radius: ${dt('rounded.base')};
}
.p-orderlist .p-orderlist-header {
@ -43,12 +43,12 @@ export default {
position: relative;
padding: 0.5rem 0.75rem;
margin: 2px 0;
border-radius: var(--p-rounded-base);
border-radius: ${dt('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);
transition: transform ${dt('transition.duration')}, background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
}
.p-orderlist-item:first-child {
@ -84,7 +84,7 @@ export default {
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);
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 {
@ -100,8 +100,8 @@ export default {
}
.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);
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} var(--p-button-primary-background);
outline-offset: ${dt('focus.ring.offset')};
}
`
};

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

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-organizationchart-table {
border-spacing: 0;
border-collapse: separate;
@ -19,8 +19,8 @@ export default {
background: var(--p-organizationchart-node-background);
color: var(--p-organizationchart-node-text-color);
padding: 0.75rem 1rem;
border-radius: var(--p-rounded-base);
transition: background-color var(--p-transition-duration), color var(--p-transition-duration);
border-radius: ${dt('rounded.base')};
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')};
}
.p-organizationchart-node-content:has(.p-node-toggler) {
@ -56,12 +56,12 @@ export default {
justify-content: center;
align-items: center;
outline-color: transparent;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), outline-color var(--p-transition-duration);
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
}
.p-organizationchart-node-content .p-node-toggler:focus-visible {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline-offset: var(--p-focus-ring-offset);
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon {
@ -79,7 +79,7 @@ export default {
.p-organizationchart-line-right {
border-radius: 0;
border-left: 1px solid var(--p-organizationchart-connector-color);
border-top-left-radius: var(--p-rounded-base);
border-top-left-radius: ${dt('rounded.base')};
}
.p-organizationchart-line-left {
@ -100,12 +100,12 @@ export default {
}
.p-organizationchart-lines :nth-last-child(1 of .p-organizationchart-line-left) {
border-top-right-radius: var(--p-rounded-base);
border-top-right-radius: ${dt('rounded.base')};
}
.p-organizationchart-lines :nth-child(1 of .p-organizationchart-line-right) {
border-left: 1px solid var(--p-organizationchart-connector-color);
border-top-left-radius: var(--p-rounded-base);
border-top-left-radius: ${dt('rounded.base')};
}
`
};

10
components/lib/themes/primeone/base/overlaypanel/index.js
View File

@ -1,11 +1,11 @@
export default {
css: `
css: ({ dt }) => `
.p-overlaypanel {
margin-top: 10px;
background: var(--p-overlaypanel-background);
color: var(--p-overlaypanel-text-color);
border: 1px solid var(--p-overlaypanel-border-color);
border-radius: var(--p-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);
}
@ -29,7 +29,7 @@ export default {
color: var(--p-overlaypanel-close-icon-color);
border: 0 none;
border-radius: 50%;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
outline-color: transparent;
position: absolute;
top: 0.25rem;
@ -42,8 +42,8 @@ export default {
}
.p-overlaypanel-close:focus-visible {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline-offset: var(--p-focus-ring-offset);
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-overlaypanel-enter-from {

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

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-paginator {
display: flex;
align-items: center;
@ -9,7 +9,7 @@ export default {
color: var(--p-paginator-text-color);
border: 0 none;
padding: 0.5rem 1rem;
border-radius: var(--p-rounded-base);
border-radius: ${dt('rounded.base')};
gap: 0.25rem;
}
@ -39,7 +39,7 @@ export default {
color: var(--p-paginator-navigator-color);
min-width: 2.5rem;
height: 2.5rem;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
border-radius: 50%;
}

6
components/lib/themes/primeone/base/panel/index.js
View File

@ -4,7 +4,7 @@ export default {
border: 1px solid ${dt('panel.border.color')};
border-radius: ${dt('rounded.base')};
background: ${dt('panel.background')};
color: ${dt('panel.text.color')};
color: ${dt('panel.color')};
}
.p-panel-header {
@ -40,8 +40,8 @@ export default {
}
.p-panel-header-icon:enabled:hover {
color: ${dt('panel.header.icon.color.hover')};
background: ${dt('panel.header.icon.background.hover')};
color: ${dt('panel.header.icon.hover.color')};
background: ${dt('panel.header.icon.hover.background')};
}
.p-panel-header-icon:focus-visible {

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

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-panelmenu {
display: flex;
flex-direction: column;
@ -10,7 +10,7 @@ export default {
background: var(--p-panelmenu-panel-background);
border: 1px solid var(--p-panelmenu-panel-border-color);
color: var(--p-panelmenu-panel-text-color);
border-radius: var(--p-rounded-base);
border-radius: ${dt('rounded.base')};
padding: 0.25rem 0.25rem;
}
@ -22,7 +22,7 @@ export default {
.p-panelmenu-header-content {
border: 0 none;
color: var(--p-panelmenu-item-text-color);
border-radius: var(--p-rounded-base);
border-radius: ${dt('rounded.base')};
transition: background-color 0.2s, color 0.2s, outline-color 0.2s;
outline-color: transparent;
}
@ -101,7 +101,7 @@ export default {
}
.p-panelmenu .p-menuitem-content {
transition: background-color var(--p-transition-duration), color var(--p-transition-duration);
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')};
border-radius: var(--p-rounded-sm);
color: var(--p-menu-item-text-color);
}

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

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-password {
display: inline-flex;
position: relative;
@ -13,14 +13,14 @@ export default {
height: 10px;
margin-bottom: 0.75rem;
background: var(--p-password-meter-border-color);
border-radius: var(--p-rounded-base);
border-radius: ${dt('rounded.base')};
}
.p-password-strength {
height: 100%;
width: 0;
transition: width 1s ease-in-out;
border-radius: var(--p-rounded-base);
border-radius: ${dt('rounded.base')};
}
.p-password-strength.weak {
@ -50,7 +50,7 @@ export default {
color: var(--p-password-overlay-text-color);
border: 1px solid var(--p-password-overlay-border-color);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
border-radius: var(--p-rounded-base);
border-radius: ${dt('rounded.base')};
}
.p-password > svg:last-of-type,

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

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-picklist {
display: flex;
gap: 1.125rem;
@ -43,12 +43,12 @@ export default {
position: relative;
padding: 0.5rem 0.75rem;
margin: 2px 0;
border-radius: var(--p-rounded-base);
border-radius: ${dt('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);
transition: transform ${dt('transition.duration')}, background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
}
.p-picklist-item:first-child {
@ -84,7 +84,7 @@ export default {
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);
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 {
@ -100,8 +100,8 @@ export default {
}
.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);
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} var(--p-button-primary-background);
outline-offset: ${dt('focus.ring.offset')};
}
`
};

4
components/lib/themes/primeone/base/progressbar/index.js
View File

@ -1,12 +1,12 @@
export default {
css: `
css: ({ dt }) => `
.p-progressbar {
position: relative;
overflow: hidden;
border: 0 none;
height: 1.25rem;
background: var(--p-progressbar-background);
border-radius: var(--p-rounded-base);
border-radius: ${dt('rounded.base')};
}
.p-progressbar-value {

2
components/lib/themes/primeone/base/progressspinner/index.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-progress-spinner {
position: relative;
margin: 0 auto;

10
components/lib/themes/primeone/base/radiobutton/index.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-radiobutton {
position: relative;
display: inline-flex;
@ -35,13 +35,13 @@ export default {
background: var(--p-radiobutton-background);
width: var(--p-radiobutton-width);
height: var(--p-radiobutton-height);
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-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')};
outline-color: transparent;
box-shadow: var(--p-radiobutton-box-shadow);
}
.p-radiobutton-icon {
transition-duration: var(--p-transition-duration);
transition-duration: ${dt('transition.duration')};
background: transparent;
font-size: var(--p-radiobutton-icon-size);
width: var(--p-radiobutton-icon-size);
@ -76,8 +76,8 @@ export default {
}
.p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline-offset: var(--p-focus-ring-offset);
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-radiobutton.p-invalid > .p-radiobutton-box {

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

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-rating {
position: relative;
display: flex;
@ -17,13 +17,13 @@ export default {
}
.p-rating-item.p-focus-visible {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline-offset: var(--p-focus-ring-offset);
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-rating-icon {
color: var(--p-rating-icon-color);
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), outline-color var(--p-transition-duration);
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
font-size: 1rem;
width: 1rem;
height: 1rem;

12
components/lib/themes/primeone/base/scrollpanel/index.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-scrollpanel-wrapper {
overflow: hidden;
width: 100%;
@ -30,15 +30,15 @@ export default {
cursor: pointer;
opacity: 0;
outline-color: transparent;
transition: outline-color var(--p-transition-duration);
background: var(--p-scrollpanel-bar-background);
transition: outline-color ${dt('transition.duration')};
background: ${dt('scrollpanel.bar.background')};
border: 0 none;
transition: outline-color var(--p-transition-duration), opacity var(--p-transition-duration);
transition: outline-color ${dt('transition.duration')}, opacity ${dt('transition.duration')};
}
.p-scrollpanel-bar:focus-visible {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline-offset: var(--p-focus-ring-offset);
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-scrollpanel-bar-y {

4
components/lib/themes/primeone/base/scrolltop/index.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-scrolltop {
position: fixed;
bottom: 20px;
@ -51,7 +51,7 @@ export default {
height: 3rem;
border-radius: 50%;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
transition: background var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
outline-color: transparent;
}
`

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

@ -1,14 +1,14 @@
export default {
css: `
css: ({ dt }) => `
.p-selectbutton {
display: inline-flex;
user-select: none;
vertical-align: bottom;
border: 1px solid transparent;
background: var(--p-selectbutton-background);
border-radius: var(--p-rounded-base);
border-radius: ${dt('rounded.base')};
outline-color: transparent;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-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-selectbutton .p-button {
@ -16,13 +16,13 @@ export default {
background: transparent;
border: 0 none;
color: var(--p-selectbutton-item-text-color);
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-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')};
outline-color: transparent;
padding: 0.5rem 1rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--p-rounded-base);
border-radius: ${dt('rounded.base')};
gap: 0.5rem;
position: relative;
cursor: pointer;
@ -31,7 +31,7 @@ export default {
.p-selectbutton .p-button::before {
content: "";
background: transparent;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-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')};
position: absolute;
left: 0.25rem;
top: 0.25rem;
@ -59,8 +59,8 @@ export default {
}
.p-selectbutton .p-button:focus-visible {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline-offset: var(--p-focus-ring-offset);
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
--p-focus-ring-offset: 0;
}

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

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-sidebar {
display: flex;
flex-direction: column;
@ -44,7 +44,7 @@ export default {
border: 0 none;
background: transparent;
border-radius: 50%;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
outline-color: transparent;
}
@ -54,8 +54,8 @@ export default {
}
.p-sidebar-icon:focus-visible {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline-offset: var(--p-focus-ring-offset);
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-sidebar-full .p-sidebar {

4
components/lib/themes/primeone/base/skeleton/index.js
View File

@ -1,9 +1,9 @@
export default {
css: `
css: ({ dt }) => `
.p-skeleton {
overflow: hidden;
background-color: var(--p-skeleton-background);
border-radius: var(--p-rounded-base);
border-radius: ${dt('rounded.base')};
}
.p-skeleton::after {

10
components/lib/themes/primeone/base/slider/index.js
View File

@ -1,9 +1,9 @@
export default {
css: `
css: ({ dt }) => `
.p-slider {
position: relative;
background: var(--p-slider-track-background);
border-radius: var(--p-rounded-base);
border-radius: ${dt('rounded.base')};
}
.p-slider-handle {
@ -17,7 +17,7 @@ export default {
background: var(--p-slider-handle-background);
border: 0 none;
border-radius: 50%;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-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')};
outline-color: transparent;
}
@ -37,14 +37,14 @@ export default {
}
.p-slider-handle:focus-visible {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: 0;
}
.p-slider-range {
display: block;
background: var(--p-slider-range-background);
border-radius: var(--p-rounded-base);
border-radius: ${dt('rounded.base')};
}
.p-slider.p-slider-horizontal {

14
components/lib/themes/primeone/base/speeddial/index.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-speeddial {
position: absolute;
display: flex;
@ -13,7 +13,9 @@ export default {
}
.p-speeddial-button.p-speeddial-rotate {
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt(
'transition.duration'
)}, outline-color ${dt('transition.duration')};
will-change: transform;
}
@ -24,7 +26,7 @@ export default {
display: flex;
align-items: center;
justify-content: center;
transition: top 0s linear var(--p-transition-duration);
transition: top 0s linear ${dt('transition.duration')};
pointer-events: none;
outline: 0 none;
z-index: 2;
@ -39,8 +41,8 @@ export default {
}
.p-speeddial-item.p-focus > .p-speeddial-action {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline-offset: var(--p-focus-ring-offset);
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-speeddial-action {
@ -55,7 +57,7 @@ export default {
background: var(--p-speeddial-item-background);
color: var(--p-speeddial-item-text-color);
outline-color: transparent;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-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-speeddial-action:hover {

4
components/lib/themes/primeone/base/splitbutton/index.js
View File

@ -1,9 +1,9 @@
export default {
css: `
css: ({ dt }) => `
.p-splitbutton {
display: inline-flex;
position: relative;
border-radius: var(--p-rounded-base);
border-radius: ${dt('rounded.base')};
}
.p-splitbutton-defaultbutton {

20
components/lib/themes/primeone/base/splitter/index.js
View File

@ -1,12 +1,12 @@
export default {
css: `
css: ({ dt }) => `
.p-splitter {
display: flex;
flex-wrap: nowrap;
border: 1px solid var(--p-splitter-border-color);
background: var(--p-splitter-background);
border-radius: var(--p-rounded-base);
color: var(--p-splitter-text-color);
border: 1px solid ${dt('splitter.border.color')};
background: ${dt('splitter.background')};
border-radius: ${dt('rounded.base')};
color: ${dt('splitter.color')};
}
.p-splitter-vertical {
@ -20,19 +20,19 @@ export default {
align-items: center;
justify-content: center;
z-index: 1;
background: var(--p-splitter-gutter-background);
background: ${dt('splitter.gutter.background')};
}
.p-splitter-gutter-handle {
border-radius: var(--p-rounded-base);
border-radius: ${dt('rounded.base')};
background: transparent;
transition: outline-color var(--p-transition-duration);
transition: outline-color ${dt('transition.duration')};
outline-color: transparent;
}
.p-splitter-gutter-handle:focus-visible {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline-offset: var(--p-focus-ring-offset);
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-splitter-horizontal.p-splitter-resizing {

44
components/lib/themes/primeone/base/stepper/index.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-stepper-nav {
position: relative;
display: flex;
@ -29,15 +29,15 @@ export default {
align-items: center;
text-decoration: none;
cursor: pointer;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-transition-duration);
border-radius: var(--p-rounded-base);
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')};
border-radius: ${dt('rounded.base')};
outline-color: transparent;
background: transparent;
}
.p-stepper-header .p-stepper-action:focus-visible {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline-offset: var(--p-focus-ring-offset);
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-stepper.p-stepper-readonly .p-stepper-header {
@ -51,26 +51,26 @@ export default {
text-overflow: ellipsis;
max-width: 100%;
margin-left: 0.5rem;
color: var(--p-stepper-title-text-color);
color: ${dt('stepper.title.color')};
font-weight: 500;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-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-stepper-number {
display: flex;
align-items: center;
justify-content: center;
color: var(--p-stepper-marker-text-color);
border: 1px solid var(--p-stepper-marker-border-color);
color: ${dt('stepper.marker.color')};
border: 1px solid ${dt('stepper.marker.border.color')};
border-width: 2px;
background: var(--p-stepper-marker-background);
background: ${dt('stepper.marker.background')};
min-width: 2rem;
height: 2rem;
line-height: 2rem;
font-size: 1.143rem;
border-radius: 50%;
box-shadow: 0px 0.5px 0px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.12);
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-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-stepper-header.p-highlight .p-stepper-action {
@ -78,35 +78,35 @@ export default {
}
.p-stepper-header.p-highlight .p-stepper-number {
background: var(--p-stepper-marker-background-highlight);
color: var(--p-stepper-marker-text-color-highlight);
background: ${dt('stepper.marker.active.background')};
color: ${dt('stepper.marker.active.background')};
}
.p-stepper-header.p-highlight .p-stepper-title {
color: var(--p-stepper-title-text-color-highlight);
color: ${dt('stepper.title.active.background')};
}
.p-stepper-header:not(.p-disabled):focus-visible {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline-offset: var(--p-focus-ring-offset);
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-stepper-header:has(~ .p-highlight) .p-stepper-separator {
background: var(--p-stepper-connector-background-highlight);
background: ${dt('stepper.connector.active.background')};
}
.p-stepper-separator {
flex: 1 1 0;
background: var(--p-stepper-connector-background);
background: ${dt('stepper.connector.background')};
width: 100%;
height: 2px;
margin-inline-start: 1rem;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-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-stepper-content {
background: var(--p-stepper-content-background);
color: var(--p-stepper-content-text-color);
background: ${dt('stepper.content.background')};
color: ${dt('stepper.content.color')};
padding: 0.875rem 1.125rem 1.125rem 1.125rem;
}
@ -151,7 +151,7 @@ export default {
}
.p-stepper-vertical .p-stepper-panel:has(~ .p-stepper-panel-active) .p-stepper-separator {
background: var(--p-stepper-connector-background-highlight);
background: ${dt('stepper.connector.active.background')};
}
.p-stepper-vertical .p-stepper-panel:last-of-type .p-stepper-content {

10
components/lib/themes/primeone/base/steps/index.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-steps {
position: relative;
}
@ -53,14 +53,14 @@ export default {
align-items: center;
overflow: hidden;
text-decoration: none;
transition: outline-color var(--p-transition-duration);
border-radius: var(--p-rounded-base);
transition: outline-color ${dt('transition.duration')};
border-radius: ${dt('rounded.base')};
outline-color: transparent;
}
.p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline-offset: var(--p-focus-ring-offset);
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-steps-title {

10
components/lib/themes/primeone/base/tabmenu/index.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-tabmenu {
overflow-x: auto;
}
@ -30,15 +30,15 @@ export default {
color: var(--p-tabmenu-header-text-color);
padding: 1rem 1.125rem;
font-weight: 600;
border-top-right-radius: var(--p-rounded-base);
border-top-left-radius: var(--p-rounded-base);
transition: color var(--p-transition-duration), outline-color var(--p-transition-duration);
border-top-right-radius: ${dt('rounded.base')};
border-top-left-radius: ${dt('rounded.base')};
transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
margin: 0 0 -1px 0;
outline-color: transparent;
}
.p-tabmenuitem .p-menuitem-link:focus-visible {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: -1px;
}

42
components/lib/themes/primeone/base/tabview/index.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-tabview-nav-container {
position: relative;
}
@ -22,8 +22,8 @@ export default {
padding: 0;
list-style-type: none;
flex: 1 1 auto;
background: var(--p-tabview-nav-background);
border: 1px solid var(--p-tabview-nav-border-color);
background: ${dt('tabview.nav.background')};
border: 1px solid ${dt('tabview.nav.border.color')};
border-width: 0 0 1px 0;
position: relative;
}
@ -38,28 +38,28 @@ export default {
overflow: hidden;
border-style: solid;
border-width: 0 0 1px 0;
border-color: transparent transparent var(--p-tabview-header-border-color) transparent;
color: var(--p-tabview-header-text-color);
border-color: transparent transparent ${dt('tabview.header.border.color')} transparent;
color: ${dt('tabview.header.color')};
padding: 1rem 1.125rem;
font-weight: 600;
border-top-right-radius: var(--p-rounded-base);
border-top-left-radius: var(--p-rounded-base);
transition: color var(--p-transition-duration), outline-color var(--p-transition-duration);
border-top-right-radius: ${dt('rounded.base')};
border-top-left-radius: ${dt('rounded.base')};
transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
margin: 0 0 -1px 0;
outline-color: transparent;
}
.p-tabview-header:not(.p-disabled) .p-tabview-nav-link:focus-visible {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: -1px;
}
.p-tabview-header:not(.p-highlight):not(.p-disabled):hover >.p-tabview-nav-link {
color: var(--p-tabview-header-text-color-hover);
color: ${dt('tabview.header.hover.color')};
}
.p-tabview-header.p-highlight > .p-tabview-nav-link {
color: var(--p-primary-color);
color: ${dt('tabview.header.active.color')};
}
.p-tabview-title {
@ -75,22 +75,22 @@ export default {
display: flex;
align-items: center;
justify-content: center;
background: var(--p-tabview-navigator-icon-background);
color: var(--p-tabview-navigator-icon-color);
background: ${dt('tabview.navigatior.icon.background')};
color: ${dt('tabview.navigatior.icon.color')};
width: 2.5rem;
border-radius: 0;
outline-color: transparent;
transition: color var(--p-transition-duration), outline-color var(--p-transition-duration);
box-shadow: var(--p-tabview-navigator-icon-box-shadow);
transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
box-shadow: ${dt('tabview.navigatior.icon.box.shadow')};
}
.p-tabview-nav-btn:focus-visible {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline-offset: -2px;
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-tabview-nav-btn:hover {
color: var(--p-tabview-navigator-icon-color-hover);
color: ${dt('tabview.navigatior.icon.hover.color')};
}
.p-tabview-nav-prev {
@ -106,8 +106,8 @@ export default {
}
.p-tabview-panels {
background: var(--p-tabview-content-background);
color: var(--p-tabview-content-text-color);
background: ${dt('tabview.navigatior.content.background')};
color: ${dt('tabview.navigatior.content.color')};
padding: 0.875rem 1.125rem 1.125rem 1.125rem;
}
@ -117,7 +117,7 @@ export default {
position: absolute;
bottom: -1px;
height: 1px;
background-color: var(--p-primary-color);
background-color: ${dt('tabview.header.active.border.color')};
transition: 250ms cubic-bezier(0.35, 0, 0.25, 1);
}
`

2
components/lib/themes/primeone/base/tag/index.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-tag {
display: inline-flex;
align-items: center;

4
components/lib/themes/primeone/base/terminal/index.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-terminal {
height: 18rem;
overflow: auto;
@ -7,7 +7,7 @@ export default {
color: var(--p-terminal-text-color);
border: 1px solid var(--p-terminal-border-color);
padding: 0.5rem 0.75rem;
border-radius: var(--p-rounded-base);
border-radius: ${dt('rounded.base')};
}
.p-terminal-prompt-container {

6
components/lib/themes/primeone/base/textarea/index.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-inputtextarea {
font-family: inherit;
font-feature-settings: inherit;
@ -8,9 +8,9 @@ export default {
background: var(--p-textarea-background);
padding: 0.5rem 0.75rem;
border: 1px solid var(--p-textarea-border-color);
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), outline-color var(--p-transition-duration);
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
appearance: none;
border-radius: var(--p-rounded-base);
border-radius: ${dt('rounded.base')};
outline-color: transparent;
box-shadow: var(--p-textarea-box-shadow);
}

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

@ -1,11 +1,11 @@
export default {
css: `
css: ({ dt }) => `
.p-tieredmenu {
padding: 0.25rem 0.25rem;
background: var(--p-tieredmenu-background);
color: var(--p-tieredmenu-text-color);
border: 1px solid var(--p-tieredmenu-border-color);
border-radius: var(--p-rounded-base);
border-radius: ${dt('rounded.base')};
min-width: 12.5rem;
}
@ -27,7 +27,7 @@ export default {
background: var(--p-tieredmenu-background);
color: var(--p-tieredmenu-text-color);
border: 1px solid var(--p-tieredmenu-border-color);
border-radius: var(--p-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);
}
@ -60,7 +60,7 @@ export default {
}
.p-tieredmenu .p-menuitem-content {
transition: background-color var(--p-transition-duration), color var(--p-transition-duration);
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')};
border-radius: var(--p-rounded-sm);
color: var(--p-tieredmenu-item-text-color);
}

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

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-timeline {
display: flex;
flex-grow: 1;

12
components/lib/themes/primeone/base/toast/index.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-toast {
width: 25rem;
white-space: pre-line;
@ -9,7 +9,7 @@ export default {
.p-toast-message {
backdrop-filter: blur(var(--p-toast-blur));
margin: 0 0 1rem 0;
border-radius: var(--p-rounded-base);
border-radius: ${dt('rounded.base')};
}
.p-toast-message-icon {
@ -47,7 +47,7 @@ export default {
border-radius: 50%;
cursor: pointer;
background: transparent;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
outline-color: transparent;
color: inherit;
width: 1.75rem;
@ -57,9 +57,9 @@ export default {
}
.p-toast-icon-close:focus-visible {
outline-width: var(--p-focus-ring-width);
outline-style: var(--p-focus-ring-style);
outline-offset: var(--p-focus-ring-offset);
outline-width: ${dt('focus.ring.width')};
outline-style: ${dt('focus.ring.style')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-toast-message-info {

18
components/lib/themes/primeone/base/togglebutton/index.js
View File

@ -1,15 +1,15 @@
export default {
css: `
css: ({ dt }) => `
.p-togglebutton {
display: inline-flex;
user-select: none;
vertical-align: bottom;
border: 1px solid transparent;
background: var(--p-togglebutton-background);
border-radius: var(--p-rounded-base);
border-radius: ${dt('rounded.base')};
outline-color: transparent;
position: relative;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-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-togglebutton-input {
@ -26,7 +26,7 @@ export default {
z-index: 1;
outline: 0 none;
border: 1px solid transparent;
border-radius: var(--p-rounded-base);;
border-radius: ${dt('rounded.base')};;
}
.p-togglebutton .p-button {
@ -34,13 +34,13 @@ export default {
background: transparent;
border: 0 none;
color: var(--p-togglebutton-item-text-color);
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-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')};
outline-color: transparent;
padding: 0.5rem 1rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--p-rounded-base);
border-radius: ${dt('rounded.base')};
gap: 0.5rem;
position: relative;
}
@ -48,7 +48,7 @@ export default {
.p-togglebutton .p-button::before {
content: "";
background: transparent;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-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')};
position: absolute;
left: 0.25rem;
top: 0.25rem;
@ -92,8 +92,8 @@ export default {
}
.p-togglebutton:not(.p-disabled):has(.p-togglebutton-input:focus-visible) {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline-offset: var(--p-focus-ring-offset);
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')};
}
.p-togglebutton.p-invalid {

10
components/lib/themes/primeone/base/toolbar/index.js
View File

@ -1,15 +1,15 @@
export default {
css: `
css: ({ dt }) => `
.p-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding: 0.75rem;
background: var(--p-toolbar-background);
border: 1px solid var(--p-toolbar-border-color);
color: var(--p-toolbar-text-color);
border-radius: var(--p-rounded-base);
background: ${dt('toolbar.background')};
border: 1px solid ${dt('toolbar.border.color')};
color: ${dt('toolbar.color')};
border-radius: ${dt('rounded.base')};
gap: 0.5rem;
}

2
components/lib/themes/primeone/base/tooltip/index.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-tooltip {
position: absolute;
display: none;

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

@ -1,9 +1,9 @@
export default {
css: `
css: ({ dt }) => `
.p-tree {
background: var(--p-tree-background);
color: var(--p-tree-text-color);
border-radius: var(--p-rounded-base);
border-radius: ${dt('rounded.base')};
border: 0 none;
padding: 1rem;
}
@ -30,17 +30,17 @@ export default {
}
.p-treenode-content {
border-radius: var(--p-rounded-base);
border-radius: ${dt('rounded.base')};
padding: 0.25rem 0.5rem;
display: flex;
align-items: center;
outline-color: transparent;
color: var(--p-tree-node-text-color);
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
}
.p-treenode:focus-visible > .p-treenode-content {
outline: 1px solid var(--p-focus-ring-color);
outline: 1px solid ${dt('focus.ring.color')};
outline-offset: -2px;
}
@ -65,7 +65,7 @@ export default {
border: 0 none;
background: transparent;
border-radius: 50%;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-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')};
outline-color: transparent;
}
@ -119,7 +119,7 @@ export default {
.p-treenode-icon {
margin-right: 0.5rem;
color: var(--p-tree-node-icon-color);
transition: color var(--p-transition-duration);
transition: color ${dt('transition.duration')};
}
.p-treenode-content .p-checkbox {

12
components/lib/themes/primeone/base/treeselect/index.js
View File

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-treeselect {
display: inline-flex;
cursor: pointer;
@ -7,8 +7,8 @@ export default {
user-select: none;
background: var(--p-treeselect-background);
border: 1px solid var(--p-treeselect-border-color);
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), outline-color var(--p-transition-duration);
border-radius: var(--p-rounded-base);
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
border-radius: ${dt('rounded.base')};
outline-color: transparent;
box-shadow: var(--p-treeselect-box-shadow);
}
@ -47,8 +47,8 @@ export default {
background: transparent;
color: var(--p-treeselect-toggle-color);
width: 2.5rem;
border-top-right-radius: var(--p-rounded-base);
border-bottom-right-radius: var(--p-rounded-base);
border-top-right-radius: ${dt('rounded.base')};
border-bottom-right-radius: ${dt('rounded.base')};
}
.p-treeselect-label-container {
@ -112,7 +112,7 @@ export default {
background: var(--p-treeselect-overlay-background);
color: var(--p-treeselect-overlay-text-color);
border: 1px solid var(--p-treeselect-overlay-border-color);
border-radius: var(--p-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);
}

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

@ -1,5 +1,5 @@
export default {
css: `
css: ({ dt }) => `
.p-treetable {
position: relative;
}
@ -25,7 +25,7 @@ export default {
.p-treetable .p-sortable-column .p-sortable-column-icon {
color: var(--p-treetable-sort-icon-color);
margin-left: 0.5rem;
transition: color var(--p-transition-duration);
transition: color ${dt('transition.duration')};
}
.p-treetable .p-sortable-column .p-sortable-column-badge {
@ -54,7 +54,7 @@ export default {
}
.p-treetable .p-sortable-column:focus-visible {
outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: -1px;
}
@ -243,14 +243,14 @@ export default {
border-width: 0 0 1px 0;
color: var(--p-treetable-header-cell-text-color);
font-weight: 600;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-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 {
outline-color: transparent;
background: var(--p-treetable-row-background);
color: var(--p-treetable-row-text-color);
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-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 {
@ -279,7 +279,7 @@ export default {
}
.p-treetable-tbody > tr:focus-visible {
outline: 1px solid var(--p-focus-ring-color);
outline: 1px solid ${dt('focus.ring.color')};
outline-offset: -1px;
}
@ -298,7 +298,7 @@ export default {
border: 0 none;
background: transparent;
border-radius: 50%;
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), border-color var(--p-transition-duration), box-shadow var(--p-transition-duration), outline-color var(--p-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')};
outline-color: transparent;
margin-right: 0.5rem;
}

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

@ -3,27 +3,27 @@ export default {
light: {
header: {
background: '{surface.0}',
textColor: '{surface.500}',
textColorHover: '{surface.700}',
textColorActive: '{surface.700}'
color: '{surface.500}',
hoverColor: '{surface.700}',
activeColor: '{surface.700}'
},
content: {
background: '{surface.0}',
borderColor: '{surface.200}',
textColor: '{surface.700}'
color: '{surface.700}'
}
},
dark: {
header: {
background: '{surface.900}',
textColor: '{surface.400}',
textColorHover: '{surface.0}',
textColorActive: '{surface.0}'
color: '{surface.400}',
hoverColor: '{surface.0}',
activeColor: '{surface.0}'
},
content: {
background: '{surface.900}',
borderColor: '{surface.700}',
textColor: '{surface.0}'
color: '{surface.0}'
}
}
}

8
components/lib/themes/primeone/presets/aura/card/index.js
View File

@ -3,19 +3,19 @@ export default {
light: {
root: {
background: '{surface.0}',
textColor: '{surface.700}'
color: '{surface.700}'
},
subtitle: {
textColor: '{surface.500}'
color: '{surface.500}'
}
},
dark: {
root: {
background: '{surface.900}',
textColor: '{surface.0}'
color: '{surface.0}'
},
subtitle: {
textColor: '{surface.400}'
color: '{surface.400}'
}
}
}

4
components/lib/themes/primeone/presets/aura/divider/index.js
View File

@ -6,7 +6,7 @@ export default {
},
content: {
background: '{surface.0}',
textColor: '{surface.700}'
color: '{surface.700}'
}
},
dark: {
@ -15,7 +15,7 @@ export default {
},
content: {
background: '{surface.900}',
textColor: '{surface.0}'
color: '{surface.0}'
}
}
}

20
components/lib/themes/primeone/presets/aura/fieldset/index.js
View File

@ -4,32 +4,32 @@ export default {
root: {
background: '{surface.0}',
borderColor: '{surface.200}',
textColor: '{surface.700}'
color: '{surface.700}'
},
legend: {
backgroundHover: '{surface.100}',
textColor: '{surface.700}',
textColorHover: '{surface.800}'
color: '{surface.700}',
hoverBackground: '{surface.100}',
hoverColor: '{surface.800}'
},
toggleIcon: {
color: '{surface.500}',
colorHover: '{surface.600}'
hoverColor: '{surface.600}'
}
},
dark: {
root: {
background: '{surface.900}',
borderColor: '{surface.700}',
textColor: '{surface.0}'
color: '{surface.0}'
},
legend: {
backgroundHover: '{surface.800}',
textColor: '{surface.0}',
textColorHover: '{surface.0}'
color: '{surface.0}',
hoverBackground: '{surface.800}',
hoverColor: '{surface.0}'
},
toggleIcon: {
color: '{surface.400}',
colorHover: '{surface.300}'
hoverColor: '{surface.300}'
}
}
}

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

@ -4,24 +4,24 @@ export default {
root: {
background: '{surface.0}',
borderColor: '{surface.200}',
textColor: '{surface.700}'
color: '{surface.700}'
},
headerIcon: {
color: '{surface.500}',
colorHover: '{surface.600}',
backgroundHover: '{surface.100}'
hoverColor: '{surface.600}',
hoverBackground: '{surface.100}'
}
},
dark: {
root: {
background: '{surface.900}',
borderColor: '{surface.700}',
textColor: '{surface.0}'
color: '{surface.0}'
},
headerIcon: {
color: '{surface.400}',
colorHover: '{surface.300}',
backgroundHover: '{surface.800}'
hoverColor: '{surface.300}',
hoverBackground: '{surface.800}'
}
}
}

4
components/lib/themes/primeone/presets/aura/splitter/index.js
View File

@ -4,7 +4,7 @@ export default {
root: {
background: '{surface.0}',
borderColor: '{surface.200}',
textColor: '{surface.700}'
color: '{surface.700}'
},
gutter: {
background: '{surface.200}'
@ -14,7 +14,7 @@ export default {
root: {
background: '{surface.900}',
borderColor: '{surface.700}',
textColor: '{surface.0}'
color: '{surface.0}'
},
gutter: {
background: '{surface.700}'

28
components/lib/themes/primeone/presets/aura/stepper/index.js
View File

@ -3,43 +3,43 @@ export default {
light: {
connector: {
background: '{surface.200}',
backgroundHighlight: '{primary.color}'
activeBackground: '{primary.color}'
},
title: {
textColor: '{surface.700}',
textColorHighlight: '{primary.color}'
color: '{surface.700}',
activeColor: '{primary.color}'
},
marker: {
background: '{surface.0}',
backgroundHighlight: '{surface.0}',
activeBackground: '{surface.0}',
borderColor: '{surface.200}',
textColor: '{surface.500}',
textColorHighlight: '{primary.color}'
color: '{surface.500}',
activeColor: '{primary.color}'
},
content: {
background: '{surface.0}',
textColor: '{surface.700}'
color: '{surface.700}'
}
},
dark: {
connector: {
background: '{surface.700}',
backgroundHighlight: '{primary.color}'
activeBackground: '{primary.color}'
},
title: {
textColor: '{surface.0}',
textColorHighlight: '{primary.color}'
color: '{surface.0}',
activeColor: '{primary.color}'
},
marker: {
background: '{surface.900}',
backgroundHighlight: '{surface.900}',
activeBackground: '{surface.900}',
borderColor: '{surface.700}',
textColor: '{surface.400}',
textColorHighlight: '{primary.color}'
color: '{surface.400}',
activeColor: '{primary.color}'
},
content: {
background: '{surface.900}',
textColor: '{surface.0}'
color: '{surface.0}'
}
}
}

23
components/lib/themes/primeone/presets/aura/tabview/index.js
View File

@ -7,19 +7,22 @@ export default {
},
header: {
borderColor: '{surface.200}',
textColor: '{surface.500}',
textColorHover: '{surface.700}'
activeBorderColor: '{primary.color}',
color: '{surface.500}',
hoverColor: '{surface.700}',
activeColor: '{primary.color}'
},
navigatorIcon: {
background: '{surface.0}',
color: '{surface.500}',
colorHover: '{surface.700}',
hoverColor: '{surface.700}',
boxShadow: '0px 0px 10px 50px rgba(255, 255, 255, 0.6)'
},
content: {
background: '{surface.0}',
textColor: '{surface.700}'
}
color: '{surface.700}'
},
},
dark: {
nav: {
@ -28,18 +31,20 @@ export default {
},
header: {
borderColor: '{surface.700}',
textColor: '{surface.400}',
textColorHover: '{surface.0}'
activeBorderColor: '{primary.color}',
color: '{surface.400}',
hoverColor: '{surface.0}',
activeColor: '{primary.color}'
},
navigatorIcon: {
background: '{surface.900}',
color: '{surface.400}',
colorHover: '{surface.0}',
hoverColor: '{surface.0}',
boxShadow: '0px 0px 10px 50px color-mix(in srgb, var(--p-surface-900), transparent 50%)'
},
content: {
background: '{surface.900}',
textColor: '{surface.0}'
color: '{surface.0}'
}
}
}

4
components/lib/themes/primeone/presets/aura/toolbar/index.js
View File

@ -4,14 +4,14 @@ export default {
root: {
background: '{surface.0}',
borderColor: '{surface.200}',
textColor: '{surface.700}'
color: '{surface.700}'
}
},
dark: {
root: {
background: '{surface.900}',
borderColor: '{surface.700}',
textColor: '{surface.0}'
color: '{surface.0}'
}
}
}