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

Compatibility with PrimeFlex and Demos

pull/5507/head
Cagatay Civici 2024-03-27 00:11:27 +03:00
parent 94fe94bf52
commit c06dd3f14c
3 changed files with 162 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
assets/styles/layout/variables/main/_dark.scss
View File

@ -24,3 +24,18 @@
--code-button-text-color: var(--p-surface-300); --code-button-text-color: var(--p-surface-300);
--docsearch-mask-background: var(--p-mask-background); --docsearch-mask-background: var(--p-mask-background);
} }
/* PrimeFlex Compat */
:root[class="p-dark"] {
--surface-0: var(--p-surface-900);
--surface-50: var(--p-surface-800);
--surface-100: var(--p-surface-700);
--surface-200: var(--p-surface-600);
--surface-300: var(--p-surface-500);
--surface-400: var(--p-surface-400);
--surface-500: var(--p-surface-300);
--surface-600: var(--p-surface-200);
--surface-700: var(--p-surface-100);
--surface-800: var(--p-surface-50);
--surface-900: var(--p-surface-0);
}

15
assets/styles/layout/variables/main/_light.scss
View File

@ -24,3 +24,18 @@
--code-button-text-color: var(--p-surface-300); --code-button-text-color: var(--p-surface-300);
--docsearch-mask-background: var(--p-mask-background); --docsearch-mask-background: var(--p-mask-background);
} }
/* Compat */
:root {
--surface-0: var(--p-surface-0);
--surface-50: var(--p-surface-50);
--surface-100: var(--p-surface-100);
--surface-200: var(--p-surface-200);
--surface-300: var(--p-surface-300);
--surface-400: var(--p-surface-400);
--surface-500: var(--p-surface-500);
--surface-600: var(--p-surface-600);
--surface-700: var(--p-surface-700);
--surface-800: var(--p-surface-800);
--surface-900: var(--p-surface-900);
}

264
assets/styles/primeflex/primeflex-compat.css
View File

@ -606,531 +606,531 @@
} }
} }
.text-0 { .text-0 {
color: var(--p-surface-0) !important; color: var(--surface-0) !important;
} }
.text-50 { .text-50 {
color: var(--p-surface-50) !important; color: var(--surface-50) !important;
} }
.text-100 { .text-100 {
color: var(--p-surface-100) !important; color: var(--surface-100) !important;
} }
.text-200 { .text-200 {
color: var(--p-surface-200) !important; color: var(--surface-200) !important;
} }
.text-300 { .text-300 {
color: var(--p-surface-300) !important; color: var(--surface-300) !important;
} }
.text-400 { .text-400 {
color: var(--p-surface-400) !important; color: var(--surface-400) !important;
} }
.text-500 { .text-500 {
color: var(--p-surface-500) !important; color: var(--surface-500) !important;
} }
.text-600 { .text-600 {
color: var(--p-surface-600) !important; color: var(--surface-600) !important;
} }
.text-700 { .text-700 {
color: var(--p-surface-700) !important; color: var(--surface-700) !important;
} }
.text-800 { .text-800 {
color: var(--p-surface-800) !important; color: var(--surface-800) !important;
} }
.text-900 { .text-900 {
color: var(--p-surface-900) !important; color: var(--surface-900) !important;
} }
.focus\:text-0:focus { .focus\:text-0:focus {
color: var(--p-surface-0) !important; color: var(--surface-0) !important;
} }
.hover\:text-0:hover { .hover\:text-0:hover {
color: var(--p-surface-0) !important; color: var(--surface-0) !important;
} }
.active\:text-0:active { .active\:text-0:active {
color: var(--p-surface-0) !important; color: var(--surface-0) !important;
} }
.focus\:text-50:focus { .focus\:text-50:focus {
color: var(--p-surface-50) !important; color: var(--surface-50) !important;
} }
.hover\:text-50:hover { .hover\:text-50:hover {
color: var(--p-surface-50) !important; color: var(--surface-50) !important;
} }
.active\:text-50:active { .active\:text-50:active {
color: var(--p-surface-50) !important; color: var(--surface-50) !important;
} }
.focus\:text-100:focus { .focus\:text-100:focus {
color: var(--p-surface-100) !important; color: var(--surface-100) !important;
} }
.hover\:text-100:hover { .hover\:text-100:hover {
color: var(--p-surface-100) !important; color: var(--surface-100) !important;
} }
.active\:text-100:active { .active\:text-100:active {
color: var(--p-surface-100) !important; color: var(--surface-100) !important;
} }
.focus\:text-200:focus { .focus\:text-200:focus {
color: var(--p-surface-200) !important; color: var(--surface-200) !important;
} }
.hover\:text-200:hover { .hover\:text-200:hover {
color: var(--p-surface-200) !important; color: var(--surface-200) !important;
} }
.active\:text-200:active { .active\:text-200:active {
color: var(--p-surface-200) !important; color: var(--surface-200) !important;
} }
.focus\:text-300:focus { .focus\:text-300:focus {
color: var(--p-surface-300) !important; color: var(--surface-300) !important;
} }
.hover\:text-300:hover { .hover\:text-300:hover {
color: var(--p-surface-300) !important; color: var(--surface-300) !important;
} }
.active\:text-300:active { .active\:text-300:active {
color: var(--p-surface-300) !important; color: var(--surface-300) !important;
} }
.focus\:text-400:focus { .focus\:text-400:focus {
color: var(--p-surface-400) !important; color: var(--surface-400) !important;
} }
.hover\:text-400:hover { .hover\:text-400:hover {
color: var(--p-surface-400) !important; color: var(--surface-400) !important;
} }
.active\:text-400:active { .active\:text-400:active {
color: var(--p-surface-400) !important; color: var(--surface-400) !important;
} }
.focus\:text-500:focus { .focus\:text-500:focus {
color: var(--p-surface-500) !important; color: var(--surface-500) !important;
} }
.hover\:text-500:hover { .hover\:text-500:hover {
color: var(--p-surface-500) !important; color: var(--surface-500) !important;
} }
.active\:text-500:active { .active\:text-500:active {
color: var(--p-surface-500) !important; color: var(--surface-500) !important;
} }
.focus\:text-600:focus { .focus\:text-600:focus {
color: var(--p-surface-600) !important; color: var(--surface-600) !important;
} }
.hover\:text-600:hover { .hover\:text-600:hover {
color: var(--p-surface-600) !important; color: var(--surface-600) !important;
} }
.active\:text-600:active { .active\:text-600:active {
color: var(--p-surface-600) !important; color: var(--surface-600) !important;
} }
.focus\:text-700:focus { .focus\:text-700:focus {
color: var(--p-surface-700) !important; color: var(--surface-700) !important;
} }
.hover\:text-700:hover { .hover\:text-700:hover {
color: var(--p-surface-700) !important; color: var(--surface-700) !important;
} }
.active\:text-700:active { .active\:text-700:active {
color: var(--p-surface-700) !important; color: var(--surface-700) !important;
} }
.focus\:text-800:focus { .focus\:text-800:focus {
color: var(--p-surface-800) !important; color: var(--surface-800) !important;
} }
.hover\:text-800:hover { .hover\:text-800:hover {
color: var(--p-surface-800) !important; color: var(--surface-800) !important;
} }
.active\:text-800:active { .active\:text-800:active {
color: var(--p-surface-800) !important; color: var(--surface-800) !important;
} }
.focus\:text-900:focus { .focus\:text-900:focus {
color: var(--p-surface-900) !important; color: var(--surface-900) !important;
} }
.hover\:text-900:hover { .hover\:text-900:hover {
color: var(--p-surface-900) !important; color: var(--surface-900) !important;
} }
.active\:text-900:active { .active\:text-900:active {
color: var(--p-surface-900) !important; color: var(--surface-900) !important;
} }
.surface-0 { .surface-0 {
background-color: var(--p-surface-0) !important; background-color: var(--surface-0) !important;
} }
.surface-50 { .surface-50 {
background-color: var(--p-surface-50) !important; background-color: var(--surface-50) !important;
} }
.surface-100 { .surface-100 {
background-color: var(--p-surface-100) !important; background-color: var(--surface-100) !important;
} }
.surface-200 { .surface-200 {
background-color: var(--p-surface-200) !important; background-color: var(--surface-200) !important;
} }
.surface-300 { .surface-300 {
background-color: var(--p-surface-300) !important; background-color: var(--surface-300) !important;
} }
.surface-400 { .surface-400 {
background-color: var(--p-surface-400) !important; background-color: var(--surface-400) !important;
} }
.surface-500 { .surface-500 {
background-color: var(--p-surface-500) !important; background-color: var(--surface-500) !important;
} }
.surface-600 { .surface-600 {
background-color: var(--p-surface-600) !important; background-color: var(--surface-600) !important;
} }
.surface-700 { .surface-700 {
background-color: var(--p-surface-700) !important; background-color: var(--surface-700) !important;
} }
.surface-800 { .surface-800 {
background-color: var(--p-surface-800) !important; background-color: var(--surface-800) !important;
} }
.surface-900 { .surface-900 {
background-color: var(--p-surface-900) !important; background-color: var(--surface-900) !important;
} }
.focus\:surface-0:focus { .focus\:surface-0:focus {
background-color: var(--p-surface-0) !important; background-color: var(--surface-0) !important;
} }
.hover\:surface-0:hover { .hover\:surface-0:hover {
background-color: var(--p-surface-0) !important; background-color: var(--surface-0) !important;
} }
.active\:surface-0:active { .active\:surface-0:active {
background-color: var(--p-surface-0) !important; background-color: var(--surface-0) !important;
} }
.focus\:surface-50:focus { .focus\:surface-50:focus {
background-color: var(--p-surface-50) !important; background-color: var(--surface-50) !important;
} }
.hover\:surface-50:hover { .hover\:surface-50:hover {
background-color: var(--p-surface-50) !important; background-color: var(--surface-50) !important;
} }
.active\:surface-50:active { .active\:surface-50:active {
background-color: var(--p-surface-50) !important; background-color: var(--surface-50) !important;
} }
.focus\:surface-100:focus { .focus\:surface-100:focus {
background-color: var(--p-surface-100) !important; background-color: var(--surface-100) !important;
} }
.hover\:surface-100:hover { .hover\:surface-100:hover {
background-color: var(--p-surface-100) !important; background-color: var(--surface-100) !important;
} }
.active\:surface-100:active { .active\:surface-100:active {
background-color: var(--p-surface-100) !important; background-color: var(--surface-100) !important;
} }
.focus\:surface-200:focus { .focus\:surface-200:focus {
background-color: var(--p-surface-200) !important; background-color: var(--surface-200) !important;
} }
.hover\:surface-200:hover { .hover\:surface-200:hover {
background-color: var(--p-surface-200) !important; background-color: var(--surface-200) !important;
} }
.active\:surface-200:active { .active\:surface-200:active {
background-color: var(--p-surface-200) !important; background-color: var(--surface-200) !important;
} }
.focus\:surface-300:focus { .focus\:surface-300:focus {
background-color: var(--p-surface-300) !important; background-color: var(--surface-300) !important;
} }
.hover\:surface-300:hover { .hover\:surface-300:hover {
background-color: var(--p-surface-300) !important; background-color: var(--surface-300) !important;
} }
.active\:surface-300:active { .active\:surface-300:active {
background-color: var(--p-surface-300) !important; background-color: var(--surface-300) !important;
} }
.focus\:surface-400:focus { .focus\:surface-400:focus {
background-color: var(--p-surface-400) !important; background-color: var(--surface-400) !important;
} }
.hover\:surface-400:hover { .hover\:surface-400:hover {
background-color: var(--p-surface-400) !important; background-color: var(--surface-400) !important;
} }
.active\:surface-400:active { .active\:surface-400:active {
background-color: var(--p-surface-400) !important; background-color: var(--surface-400) !important;
} }
.focus\:surface-500:focus { .focus\:surface-500:focus {
background-color: var(--p-surface-500) !important; background-color: var(--surface-500) !important;
} }
.hover\:surface-500:hover { .hover\:surface-500:hover {
background-color: var(--p-surface-500) !important; background-color: var(--surface-500) !important;
} }
.active\:surface-500:active { .active\:surface-500:active {
background-color: var(--p-surface-500) !important; background-color: var(--surface-500) !important;
} }
.focus\:surface-600:focus { .focus\:surface-600:focus {
background-color: var(--p-surface-600) !important; background-color: var(--surface-600) !important;
} }
.hover\:surface-600:hover { .hover\:surface-600:hover {
background-color: var(--p-surface-600) !important; background-color: var(--surface-600) !important;
} }
.active\:surface-600:active { .active\:surface-600:active {
background-color: var(--p-surface-600) !important; background-color: var(--surface-600) !important;
} }
.focus\:surface-700:focus { .focus\:surface-700:focus {
background-color: var(--p-surface-700) !important; background-color: var(--surface-700) !important;
} }
.hover\:surface-700:hover { .hover\:surface-700:hover {
background-color: var(--p-surface-700) !important; background-color: var(--surface-700) !important;
} }
.active\:surface-700:active { .active\:surface-700:active {
background-color: var(--p-surface-700) !important; background-color: var(--surface-700) !important;
} }
.focus\:surface-800:focus { .focus\:surface-800:focus {
background-color: var(--p-surface-800) !important; background-color: var(--surface-800) !important;
} }
.hover\:surface-800:hover { .hover\:surface-800:hover {
background-color: var(--p-surface-800) !important; background-color: var(--surface-800) !important;
} }
.active\:surface-800:active { .active\:surface-800:active {
background-color: var(--p-surface-800) !important; background-color: var(--surface-800) !important;
} }
.focus\:surface-900:focus { .focus\:surface-900:focus {
background-color: var(--p-surface-900) !important; background-color: var(--surface-900) !important;
} }
.hover\:surface-900:hover { .hover\:surface-900:hover {
background-color: var(--p-surface-900) !important; background-color: var(--surface-900) !important;
} }
.active\:surface-900:active { .active\:surface-900:active {
background-color: var(--p-surface-900) !important; background-color: var(--surface-900) !important;
} }
.border-0 { .border-0 {
border-color: var(--p-surface-0) !important; border-color: var(--surface-0) !important;
} }
.border-50 { .border-50 {
border-color: var(--p-surface-50) !important; border-color: var(--surface-50) !important;
} }
.border-100 { .border-100 {
border-color: var(--p-surface-100) !important; border-color: var(--surface-100) !important;
} }
.border-200 { .border-200 {
border-color: var(--p-surface-200) !important; border-color: var(--surface-200) !important;
} }
.border-300 { .border-300 {
border-color: var(--p-surface-300) !important; border-color: var(--surface-300) !important;
} }
.border-400 { .border-400 {
border-color: var(--p-surface-400) !important; border-color: var(--surface-400) !important;
} }
.border-500 { .border-500 {
border-color: var(--p-surface-500) !important; border-color: var(--surface-500) !important;
} }
.border-600 { .border-600 {
border-color: var(--p-surface-600) !important; border-color: var(--surface-600) !important;
} }
.border-700 { .border-700 {
border-color: var(--p-surface-700) !important; border-color: var(--surface-700) !important;
} }
.border-800 { .border-800 {
border-color: var(--p-surface-800) !important; border-color: var(--surface-800) !important;
} }
.border-900 { .border-900 {
border-color: var(--p-surface-900) !important; border-color: var(--surface-900) !important;
} }
.focus\:border-0:focus { .focus\:border-0:focus {
border-color: var(--p-surface-0) !important; border-color: var(--surface-0) !important;
} }
.hover\:border-0:hover { .hover\:border-0:hover {
border-color: var(--p-surface-0) !important; border-color: var(--surface-0) !important;
} }
.active\:border-0:active { .active\:border-0:active {
border-color: var(--p-surface-0) !important; border-color: var(--surface-0) !important;
} }
.focus\:border-50:focus { .focus\:border-50:focus {
border-color: var(--p-surface-50) !important; border-color: var(--surface-50) !important;
} }
.hover\:border-50:hover { .hover\:border-50:hover {
border-color: var(--p-surface-50) !important; border-color: var(--surface-50) !important;
} }
.active\:border-50:active { .active\:border-50:active {
border-color: var(--p-surface-50) !important; border-color: var(--surface-50) !important;
} }
.focus\:border-100:focus { .focus\:border-100:focus {
border-color: var(--p-surface-100) !important; border-color: var(--surface-100) !important;
} }
.hover\:border-100:hover { .hover\:border-100:hover {
border-color: var(--p-surface-100) !important; border-color: var(--surface-100) !important;
} }
.active\:border-100:active { .active\:border-100:active {
border-color: var(--p-surface-100) !important; border-color: var(--surface-100) !important;
} }
.focus\:border-200:focus { .focus\:border-200:focus {
border-color: var(--p-surface-200) !important; border-color: var(--surface-200) !important;
} }
.hover\:border-200:hover { .hover\:border-200:hover {
border-color: var(--p-surface-200) !important; border-color: var(--surface-200) !important;
} }
.active\:border-200:active { .active\:border-200:active {
border-color: var(--p-surface-200) !important; border-color: var(--surface-200) !important;
} }
.focus\:border-300:focus { .focus\:border-300:focus {
border-color: var(--p-surface-300) !important; border-color: var(--surface-300) !important;
} }
.hover\:border-300:hover { .hover\:border-300:hover {
border-color: var(--p-surface-300) !important; border-color: var(--surface-300) !important;
} }
.active\:border-300:active { .active\:border-300:active {
border-color: var(--p-surface-300) !important; border-color: var(--surface-300) !important;
} }
.focus\:border-400:focus { .focus\:border-400:focus {
border-color: var(--p-surface-400) !important; border-color: var(--surface-400) !important;
} }
.hover\:border-400:hover { .hover\:border-400:hover {
border-color: var(--p-surface-400) !important; border-color: var(--surface-400) !important;
} }
.active\:border-400:active { .active\:border-400:active {
border-color: var(--p-surface-400) !important; border-color: var(--surface-400) !important;
} }
.focus\:border-500:focus { .focus\:border-500:focus {
border-color: var(--p-surface-500) !important; border-color: var(--surface-500) !important;
} }
.hover\:border-500:hover { .hover\:border-500:hover {
border-color: var(--p-surface-500) !important; border-color: var(--surface-500) !important;
} }
.active\:border-500:active { .active\:border-500:active {
border-color: var(--p-surface-500) !important; border-color: var(--surface-500) !important;
} }
.focus\:border-600:focus { .focus\:border-600:focus {
border-color: var(--p-surface-600) !important; border-color: var(--surface-600) !important;
} }
.hover\:border-600:hover { .hover\:border-600:hover {
border-color: var(--p-surface-600) !important; border-color: var(--surface-600) !important;
} }
.active\:border-600:active { .active\:border-600:active {
border-color: var(--p-surface-600) !important; border-color: var(--surface-600) !important;
} }
.focus\:border-700:focus { .focus\:border-700:focus {
border-color: var(--p-surface-700) !important; border-color: var(--surface-700) !important;
} }
.hover\:border-700:hover { .hover\:border-700:hover {
border-color: var(--p-surface-700) !important; border-color: var(--surface-700) !important;
} }
.active\:border-700:active { .active\:border-700:active {
border-color: var(--p-surface-700) !important; border-color: var(--surface-700) !important;
} }
.focus\:border-800:focus { .focus\:border-800:focus {
border-color: var(--p-surface-800) !important; border-color: var(--surface-800) !important;
} }
.hover\:border-800:hover { .hover\:border-800:hover {
border-color: var(--p-surface-800) !important; border-color: var(--surface-800) !important;
} }
.active\:border-800:active { .active\:border-800:active {
border-color: var(--p-surface-800) !important; border-color: var(--surface-800) !important;
} }
.focus\:border-900:focus { .focus\:border-900:focus {
border-color: var(--p-surface-900) !important; border-color: var(--surface-900) !important;
} }
.hover\:border-900:hover { .hover\:border-900:hover {
border-color: var(--p-surface-900) !important; border-color: var(--surface-900) !important;
} }
.active\:border-900:active { .active\:border-900:active {
border-color: var(--p-surface-900) !important; border-color: var(--surface-900) !important;
} }
.bg-transparent { .bg-transparent {