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);
--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);
--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 {
color: var(--p-surface-0) !important;
color: var(--surface-0) !important;
}
.text-50 {
color: var(--p-surface-50) !important;
color: var(--surface-50) !important;
}
.text-100 {
color: var(--p-surface-100) !important;
color: var(--surface-100) !important;
}
.text-200 {
color: var(--p-surface-200) !important;
color: var(--surface-200) !important;
}
.text-300 {
color: var(--p-surface-300) !important;
color: var(--surface-300) !important;
}
.text-400 {
color: var(--p-surface-400) !important;
color: var(--surface-400) !important;
}
.text-500 {
color: var(--p-surface-500) !important;
color: var(--surface-500) !important;
}
.text-600 {
color: var(--p-surface-600) !important;
color: var(--surface-600) !important;
}
.text-700 {
color: var(--p-surface-700) !important;
color: var(--surface-700) !important;
}
.text-800 {
color: var(--p-surface-800) !important;
color: var(--surface-800) !important;
}
.text-900 {
color: var(--p-surface-900) !important;
color: var(--surface-900) !important;
}
.focus\:text-0:focus {
color: var(--p-surface-0) !important;
color: var(--surface-0) !important;
}
.hover\:text-0:hover {
color: var(--p-surface-0) !important;
color: var(--surface-0) !important;
}
.active\:text-0:active {
color: var(--p-surface-0) !important;
color: var(--surface-0) !important;
}
.focus\:text-50:focus {
color: var(--p-surface-50) !important;
color: var(--surface-50) !important;
}
.hover\:text-50:hover {
color: var(--p-surface-50) !important;
color: var(--surface-50) !important;
}
.active\:text-50:active {
color: var(--p-surface-50) !important;
color: var(--surface-50) !important;
}
.focus\:text-100:focus {
color: var(--p-surface-100) !important;
color: var(--surface-100) !important;
}
.hover\:text-100:hover {
color: var(--p-surface-100) !important;
color: var(--surface-100) !important;
}
.active\:text-100:active {
color: var(--p-surface-100) !important;
color: var(--surface-100) !important;
}
.focus\:text-200:focus {
color: var(--p-surface-200) !important;
color: var(--surface-200) !important;
}
.hover\:text-200:hover {
color: var(--p-surface-200) !important;
color: var(--surface-200) !important;
}
.active\:text-200:active {
color: var(--p-surface-200) !important;
color: var(--surface-200) !important;
}
.focus\:text-300:focus {
color: var(--p-surface-300) !important;
color: var(--surface-300) !important;
}
.hover\:text-300:hover {
color: var(--p-surface-300) !important;
color: var(--surface-300) !important;
}
.active\:text-300:active {
color: var(--p-surface-300) !important;
color: var(--surface-300) !important;
}
.focus\:text-400:focus {
color: var(--p-surface-400) !important;
color: var(--surface-400) !important;
}
.hover\:text-400:hover {
color: var(--p-surface-400) !important;
color: var(--surface-400) !important;
}
.active\:text-400:active {
color: var(--p-surface-400) !important;
color: var(--surface-400) !important;
}
.focus\:text-500:focus {
color: var(--p-surface-500) !important;
color: var(--surface-500) !important;
}
.hover\:text-500:hover {
color: var(--p-surface-500) !important;
color: var(--surface-500) !important;
}
.active\:text-500:active {
color: var(--p-surface-500) !important;
color: var(--surface-500) !important;
}
.focus\:text-600:focus {
color: var(--p-surface-600) !important;
color: var(--surface-600) !important;
}
.hover\:text-600:hover {
color: var(--p-surface-600) !important;
color: var(--surface-600) !important;
}
.active\:text-600:active {
color: var(--p-surface-600) !important;
color: var(--surface-600) !important;
}
.focus\:text-700:focus {
color: var(--p-surface-700) !important;
color: var(--surface-700) !important;
}
.hover\:text-700:hover {
color: var(--p-surface-700) !important;
color: var(--surface-700) !important;
}
.active\:text-700:active {
color: var(--p-surface-700) !important;
color: var(--surface-700) !important;
}
.focus\:text-800:focus {
color: var(--p-surface-800) !important;
color: var(--surface-800) !important;
}
.hover\:text-800:hover {
color: var(--p-surface-800) !important;
color: var(--surface-800) !important;
}
.active\:text-800:active {
color: var(--p-surface-800) !important;
color: var(--surface-800) !important;
}
.focus\:text-900:focus {
color: var(--p-surface-900) !important;
color: var(--surface-900) !important;
}
.hover\:text-900:hover {
color: var(--p-surface-900) !important;
color: var(--surface-900) !important;
}
.active\:text-900:active {
color: var(--p-surface-900) !important;
color: var(--surface-900) !important;
}
.surface-0 {
background-color: var(--p-surface-0) !important;
background-color: var(--surface-0) !important;
}
.surface-50 {
background-color: var(--p-surface-50) !important;
background-color: var(--surface-50) !important;
}
.surface-100 {
background-color: var(--p-surface-100) !important;
background-color: var(--surface-100) !important;
}
.surface-200 {
background-color: var(--p-surface-200) !important;
background-color: var(--surface-200) !important;
}
.surface-300 {
background-color: var(--p-surface-300) !important;
background-color: var(--surface-300) !important;
}
.surface-400 {
background-color: var(--p-surface-400) !important;
background-color: var(--surface-400) !important;
}
.surface-500 {
background-color: var(--p-surface-500) !important;
background-color: var(--surface-500) !important;
}
.surface-600 {
background-color: var(--p-surface-600) !important;
background-color: var(--surface-600) !important;
}
.surface-700 {
background-color: var(--p-surface-700) !important;
background-color: var(--surface-700) !important;
}
.surface-800 {
background-color: var(--p-surface-800) !important;
background-color: var(--surface-800) !important;
}
.surface-900 {
background-color: var(--p-surface-900) !important;
background-color: var(--surface-900) !important;
}
.focus\:surface-0:focus {
background-color: var(--p-surface-0) !important;
background-color: var(--surface-0) !important;
}
.hover\:surface-0:hover {
background-color: var(--p-surface-0) !important;
background-color: var(--surface-0) !important;
}
.active\:surface-0:active {
background-color: var(--p-surface-0) !important;
background-color: var(--surface-0) !important;
}
.focus\:surface-50:focus {
background-color: var(--p-surface-50) !important;
background-color: var(--surface-50) !important;
}
.hover\:surface-50:hover {
background-color: var(--p-surface-50) !important;
background-color: var(--surface-50) !important;
}
.active\:surface-50:active {
background-color: var(--p-surface-50) !important;
background-color: var(--surface-50) !important;
}
.focus\:surface-100:focus {
background-color: var(--p-surface-100) !important;
background-color: var(--surface-100) !important;
}
.hover\:surface-100:hover {
background-color: var(--p-surface-100) !important;
background-color: var(--surface-100) !important;
}
.active\:surface-100:active {
background-color: var(--p-surface-100) !important;
background-color: var(--surface-100) !important;
}
.focus\:surface-200:focus {
background-color: var(--p-surface-200) !important;
background-color: var(--surface-200) !important;
}
.hover\:surface-200:hover {
background-color: var(--p-surface-200) !important;
background-color: var(--surface-200) !important;
}
.active\:surface-200:active {
background-color: var(--p-surface-200) !important;
background-color: var(--surface-200) !important;
}
.focus\:surface-300:focus {
background-color: var(--p-surface-300) !important;
background-color: var(--surface-300) !important;
}
.hover\:surface-300:hover {
background-color: var(--p-surface-300) !important;
background-color: var(--surface-300) !important;
}
.active\:surface-300:active {
background-color: var(--p-surface-300) !important;
background-color: var(--surface-300) !important;
}
.focus\:surface-400:focus {
background-color: var(--p-surface-400) !important;
background-color: var(--surface-400) !important;
}
.hover\:surface-400:hover {
background-color: var(--p-surface-400) !important;
background-color: var(--surface-400) !important;
}
.active\:surface-400:active {
background-color: var(--p-surface-400) !important;
background-color: var(--surface-400) !important;
}
.focus\:surface-500:focus {
background-color: var(--p-surface-500) !important;
background-color: var(--surface-500) !important;
}
.hover\:surface-500:hover {
background-color: var(--p-surface-500) !important;
background-color: var(--surface-500) !important;
}
.active\:surface-500:active {
background-color: var(--p-surface-500) !important;
background-color: var(--surface-500) !important;
}
.focus\:surface-600:focus {
background-color: var(--p-surface-600) !important;
background-color: var(--surface-600) !important;
}
.hover\:surface-600:hover {
background-color: var(--p-surface-600) !important;
background-color: var(--surface-600) !important;
}
.active\:surface-600:active {
background-color: var(--p-surface-600) !important;
background-color: var(--surface-600) !important;
}
.focus\:surface-700:focus {
background-color: var(--p-surface-700) !important;
background-color: var(--surface-700) !important;
}
.hover\:surface-700:hover {
background-color: var(--p-surface-700) !important;
background-color: var(--surface-700) !important;
}
.active\:surface-700:active {
background-color: var(--p-surface-700) !important;
background-color: var(--surface-700) !important;
}
.focus\:surface-800:focus {
background-color: var(--p-surface-800) !important;
background-color: var(--surface-800) !important;
}
.hover\:surface-800:hover {
background-color: var(--p-surface-800) !important;
background-color: var(--surface-800) !important;
}
.active\:surface-800:active {
background-color: var(--p-surface-800) !important;
background-color: var(--surface-800) !important;
}
.focus\:surface-900:focus {
background-color: var(--p-surface-900) !important;
background-color: var(--surface-900) !important;
}
.hover\:surface-900:hover {
background-color: var(--p-surface-900) !important;
background-color: var(--surface-900) !important;
}
.active\:surface-900:active {
background-color: var(--p-surface-900) !important;
background-color: var(--surface-900) !important;
}
.border-0 {
border-color: var(--p-surface-0) !important;
border-color: var(--surface-0) !important;
}
.border-50 {
border-color: var(--p-surface-50) !important;
border-color: var(--surface-50) !important;
}
.border-100 {
border-color: var(--p-surface-100) !important;
border-color: var(--surface-100) !important;
}
.border-200 {
border-color: var(--p-surface-200) !important;
border-color: var(--surface-200) !important;
}
.border-300 {
border-color: var(--p-surface-300) !important;
border-color: var(--surface-300) !important;
}
.border-400 {
border-color: var(--p-surface-400) !important;
border-color: var(--surface-400) !important;
}
.border-500 {
border-color: var(--p-surface-500) !important;
border-color: var(--surface-500) !important;
}
.border-600 {
border-color: var(--p-surface-600) !important;
border-color: var(--surface-600) !important;
}
.border-700 {
border-color: var(--p-surface-700) !important;
border-color: var(--surface-700) !important;
}
.border-800 {
border-color: var(--p-surface-800) !important;
border-color: var(--surface-800) !important;
}
.border-900 {
border-color: var(--p-surface-900) !important;
border-color: var(--surface-900) !important;
}
.focus\:border-0:focus {
border-color: var(--p-surface-0) !important;
border-color: var(--surface-0) !important;
}
.hover\:border-0:hover {
border-color: var(--p-surface-0) !important;
border-color: var(--surface-0) !important;
}
.active\:border-0:active {
border-color: var(--p-surface-0) !important;
border-color: var(--surface-0) !important;
}
.focus\:border-50:focus {
border-color: var(--p-surface-50) !important;
border-color: var(--surface-50) !important;
}
.hover\:border-50:hover {
border-color: var(--p-surface-50) !important;
border-color: var(--surface-50) !important;
}
.active\:border-50:active {
border-color: var(--p-surface-50) !important;
border-color: var(--surface-50) !important;
}
.focus\:border-100:focus {
border-color: var(--p-surface-100) !important;
border-color: var(--surface-100) !important;
}
.hover\:border-100:hover {
border-color: var(--p-surface-100) !important;
border-color: var(--surface-100) !important;
}
.active\:border-100:active {
border-color: var(--p-surface-100) !important;
border-color: var(--surface-100) !important;
}
.focus\:border-200:focus {
border-color: var(--p-surface-200) !important;
border-color: var(--surface-200) !important;
}
.hover\:border-200:hover {
border-color: var(--p-surface-200) !important;
border-color: var(--surface-200) !important;
}
.active\:border-200:active {
border-color: var(--p-surface-200) !important;
border-color: var(--surface-200) !important;
}
.focus\:border-300:focus {
border-color: var(--p-surface-300) !important;
border-color: var(--surface-300) !important;
}
.hover\:border-300:hover {
border-color: var(--p-surface-300) !important;
border-color: var(--surface-300) !important;
}
.active\:border-300:active {
border-color: var(--p-surface-300) !important;
border-color: var(--surface-300) !important;
}
.focus\:border-400:focus {
border-color: var(--p-surface-400) !important;
border-color: var(--surface-400) !important;
}
.hover\:border-400:hover {
border-color: var(--p-surface-400) !important;
border-color: var(--surface-400) !important;
}
.active\:border-400:active {
border-color: var(--p-surface-400) !important;
border-color: var(--surface-400) !important;
}
.focus\:border-500:focus {
border-color: var(--p-surface-500) !important;
border-color: var(--surface-500) !important;
}
.hover\:border-500:hover {
border-color: var(--p-surface-500) !important;
border-color: var(--surface-500) !important;
}
.active\:border-500:active {
border-color: var(--p-surface-500) !important;
border-color: var(--surface-500) !important;
}
.focus\:border-600:focus {
border-color: var(--p-surface-600) !important;
border-color: var(--surface-600) !important;
}
.hover\:border-600:hover {
border-color: var(--p-surface-600) !important;
border-color: var(--surface-600) !important;
}
.active\:border-600:active {
border-color: var(--p-surface-600) !important;
border-color: var(--surface-600) !important;
}
.focus\:border-700:focus {
border-color: var(--p-surface-700) !important;
border-color: var(--surface-700) !important;
}
.hover\:border-700:hover {
border-color: var(--p-surface-700) !important;
border-color: var(--surface-700) !important;
}
.active\:border-700:active {
border-color: var(--p-surface-700) !important;
border-color: var(--surface-700) !important;
}
.focus\:border-800:focus {
border-color: var(--p-surface-800) !important;
border-color: var(--surface-800) !important;
}
.hover\:border-800:hover {
border-color: var(--p-surface-800) !important;
border-color: var(--surface-800) !important;
}
.active\:border-800:active {
border-color: var(--p-surface-800) !important;
border-color: var(--surface-800) !important;
}
.focus\:border-900:focus {
border-color: var(--p-surface-900) !important;
border-color: var(--surface-900) !important;
}
.hover\:border-900:hover {
border-color: var(--p-surface-900) !important;
border-color: var(--surface-900) !important;
}
.active\:border-900:active {
border-color: var(--p-surface-900) !important;
border-color: var(--surface-900) !important;
}
.bg-transparent {