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

Replaced light-dark for compatibility

pull/7277/head
Cagatay Civici 2025-02-18 14:48:31 +03:00
parent af2ffbaa3f
commit c55e6fa54d
3 changed files with 31 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
apps/showcase/assets/styles/layout/_designer.scss
View File

@ -25,15 +25,15 @@
} }
&.p-drawer { &.p-drawer {
background: light-dark(var(--p-surface-0), var(--p-surface-900)); background: var(--overlay-background);
border-color: light-dark(var(--p-surface-200), var(--p-surface-700)); border-color: var(--border-color);
color: light-dark(#09090b, #ffffff); color: var(--high-contrast-text-color);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
} }
.p-fieldset { .p-fieldset {
background: transparent; background: transparent;
border-color: light-dark(var(--p-surface-200), var(--p-surface-700)); border-color: var(--border-color);
border-radius: 4px; border-radius: 4px;
color: inherit; color: inherit;
padding: 0 1.125rem 1.125rem 1.125rem; padding: 0 1.125rem 1.125rem 1.125rem;
@ -84,15 +84,15 @@
.p-tablist-tab-list { .p-tablist-tab-list {
background: transparent; background: transparent;
border-style: solid; border-style: solid;
border-color: light-dark(var(--p-surface-200), var(--p-surface-700)); border-color: var(--border-color);
border-width: 0 0 1px 0; border-width: 0 0 1px 0;
} }
.p-tab { .p-tab {
background: transparent; background: transparent;
border-width: 0 0 1px 0; border-width: 0 0 1px 0;
border-color: light-dark(var(--p-surface-200), var(--p-surface-700)); border-color: var(--border-color);
color: light-dark(var(--p-surface-500), var(--p-surface-400)); color: var(--text-secondary-color);
padding: 1rem 1.125rem; padding: 1rem 1.125rem;
font-weight: 600; font-weight: 600;
transition: none; transition: none;
@ -102,19 +102,19 @@
.p-tab:not(.p-tab-active):not(.p-disabled):hover { .p-tab:not(.p-tab-active):not(.p-disabled):hover {
background: transparent; background: transparent;
border-color: transparent; border-color: transparent;
color: light-dark(var(--p-surface-700), var(--p-surface-0)); color: var(--high-contrast-text-color);
} }
.p-tab-active { .p-tab-active {
background: transparent; background: transparent;
border-color: transparent; border-color: transparent;
color: light-dark(#09090b, #ffffff); color: var(--high-contrast-text-color);
} }
.p-tablist-active-bar { .p-tablist-active-bar {
inset-block-end: -1px; inset-block-end: -1px;
height: 1px; height: 1px;
background: light-dark(#09090b, #ffffff); background: var(--high-contrast-text-color);
transition: 250ms cubic-bezier(0.35, 0, 0.25, 1); transition: 250ms cubic-bezier(0.35, 0, 0.25, 1);
} }
@ -128,12 +128,12 @@
.p-accordion { .p-accordion {
.p-accordionpanel { .p-accordionpanel {
border-width: 0 0 1px 0; border-width: 0 0 1px 0;
border-color: light-dark(var(--p-surface-200), var(--p-surface-700)); border-color: var(--border-color);
} }
.p-accordionheader { .p-accordionheader {
padding: 1.125rem; padding: 1.125rem;
color: light-dark(var(--p-surface-500), var(--p-surface-400)); color: var(--text-secondary-color);
background: transparent; background: transparent;
border-width: 0; border-width: 0;
border-color: unset; border-color: unset;
@ -159,13 +159,13 @@
} }
.p-accordionheader-toggle-icon { .p-accordionheader-toggle-icon {
color: light-dark(var(--p-surface-500), var(--p-surface-400)); color: var(--text-secondary-color);
} }
.p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled)>.p-accordionheader:hover, .p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled)>.p-accordionheader:hover,
.p-accordionpanel:not(.p-disabled).p-accordionpanel-active>.p-accordionheader { .p-accordionpanel:not(.p-disabled).p-accordionpanel-active>.p-accordionheader {
background: transparent; background: transparent;
color: light-dark(var(--p-surface-700), var(--p-surface-0)); color: var(--text-color);
} }
.p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled) .p-accordionheader:hover .p-accordionheader-toggle-icon, .p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled) .p-accordionheader:hover .p-accordionheader-toggle-icon,
@ -175,7 +175,7 @@
.p-accordioncontent-content { .p-accordioncontent-content {
border-width: 0; border-width: 0;
border-color: light-dark(var(--p-surface-200), var(--p-surface-700)); border-color: var(--border-color);
background-color: transparent; background-color: transparent;
color: inherit; color: inherit;
padding: 0 1.125rem 1.125rem 1.125rem; padding: 0 1.125rem 1.125rem 1.125rem;
@ -184,21 +184,21 @@
.p-fileupload-choose-button { .p-fileupload-choose-button {
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
background: light-dark(#09090b, #ffffff); background: var(--designer-primary-color);
border-color: light-dark(#09090b, #ffffff); border-color: var(--designer-primary-color);
color: light-dark(#ffffff, #000000); color: var(--designer-primary-contrast-color);
cursor: pointer; cursor: pointer;
font-weight: medium; font-weight: medium;
border-radius: 4px; border-radius: 4px;
transition: background 0.2s; transition: background 0.2s;
&:hover { &:hover {
background: light-dark(#27272a, #f3f4f6); background: var(--designer-primary--emphasis-color);
border-color: light-dark(#27272a, #f3f4f6); border-color: var(--designer-primary--emphasis-color);
} }
&:focus-visible { &:focus-visible {
outline: 1px solid light-dark(#09090b, #ffffff); outline: 1px solid var(--designer-primary-color);
outline-offset: 2px; outline-offset: 2px;
box-shadow: none; box-shadow: none;
} }

11
apps/showcase/assets/styles/layout/variables/main/_dark.scss
View File

@ -1,14 +1,14 @@
:root[class="p-dark"] { :root[class="p-dark"] {
--primary-text-color:var(--p-primary-400); --primary-text-color: var(--p-primary-400);
--primary-color: var(--p-primary-color); --primary-color: var(--p-primary-color);
--primary-contrast-color:var(--p-primary-contrast-color); --primary-contrast-color: var(--p-primary-contrast-color);
--primary-hover-color: var(--p-primary-hover-color); --primary-hover-color: var(--p-primary-hover-color);
--text-color: var(--p-surface-0); --text-color: var(--p-surface-0);
--text-secondary-color: var(--p-surface-400); --text-secondary-color: var(--p-surface-400);
--glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png), radial-gradient(50% 50% at center -25px, var(--p-primary-color) 0%, #000000 100%); --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png), radial-gradient(50% 50% at center -25px, var(--p-primary-color) 0%, #000000 100%);
--glow-blend: hard-light, color-dodge; --glow-blend: hard-light, color-dodge;
--topbar-sticky-background:rgba(0,0,0,.3); --topbar-sticky-background: rgba(0, 0, 0, .3);
--mobile-menu-background: rgba(0,0,0,.3); --mobile-menu-background: rgba(0, 0, 0, .3);
--card-border: 1px solid transparent; --card-border: 1px solid transparent;
--card-background: var(--p-surface-900); --card-background: var(--p-surface-900);
--border-color: var(--p-surface-700); --border-color: var(--p-surface-700);
@ -25,4 +25,7 @@
--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);
--logo-color: var(--text-secondary-color); --logo-color: var(--text-secondary-color);
--designer-primary-color: #ffffff;
--designer-primary-emphasis-color: #f3f4f6;
--designer-primary-contrast-color: #000000;
} }

3
apps/showcase/assets/styles/layout/variables/main/_light.scss
View File

@ -25,4 +25,7 @@
--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);
--logo-color: var(--text-secondary-color); --logo-color: var(--text-secondary-color);
--designer-primary-color: #09090b;
--designer-primary-emphasis-color: #27272a;
--designer-primary-contrast-color: #ffffff;
} }