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

Refactored named surfaces

pull/5507/head
Cagatay Civici 2024-02-08 01:44:27 +03:00
parent bd0a6a1085
commit 57867cf640
10 changed files with 45 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/styles/layout/_content.scss
View File

@ -10,7 +10,7 @@
}
.card {
background: var(--p-surface-card);
background: var(--surface-card);
border: var(--card-border);
padding: 2rem;
border-radius: 10px;

4
assets/styles/layout/_core.scss
View File

@ -7,7 +7,7 @@ body {
min-height: 100%;
overflow-x: hidden;
overflow-y: auto;
background-color: var(--p-surface-ground);
background-color: var(--surface-ground);
font-weight: normal;
color: var(--p-text-color);
-webkit-font-smoothing: antialiased;
@ -17,7 +17,7 @@ body {
}
.layout-wrapper {
background-color: var(--p-surface-ground);
background-color: var(--surface-ground);
}
a {

14
assets/styles/layout/_doc.scss
View File

@ -12,7 +12,7 @@
position: absolute;
bottom: 0;
width: 100%;
border-bottom: 1px solid var(--p-surface-border);
border-bottom: 1px solid var(--surface-border);
content: '';
}
@ -163,7 +163,7 @@
> .navbar-item {
.navbar-item-content {
border-left: 1px solid var(--p-surface-border);
border-left: 1px solid var(--surface-border);
padding-left: .25rem;
transition: all .2s;
@ -293,7 +293,7 @@
margin-bottom: 1.5rem;
th {
border-bottom: 1px solid var(--p-surface-border);
border-bottom: 1px solid var(--surface-border);
padding: .75rem 1rem;
text-align: left;
text-transform: capitalize;
@ -301,12 +301,12 @@
tbody {
tr:hover {
background: var(--p-surface-hover);
background: var(--surface-hover);
}
td {
padding: .75rem 1rem;
border-bottom: 1px solid var(--p-surface-border);
border-bottom: 1px solid var(--surface-border);
white-space: pre-line;
line-height: 1.5;
scroll-margin-top: 6.5rem;
@ -381,8 +381,8 @@
border-radius: 6px;
padding: 2px 6px;
max-width: min-content;
border-color: var(--p-surface-border);
background-color: var(--p-surface-card);
border-color: var(--surface-border);
background-color: var(--surface-card);
color: var(--p-text-secondary-color);
}

26
assets/styles/layout/_docsearch.scss
View File

@ -1,8 +1,8 @@
.DocSearch-Button {
border-radius: var(--p-border-radius);
border: 1px solid var(--p-surface-border);
border: 1px solid var(--surface-border);
height: 2rem;
background-color: var(--p-surface-card);
background-color: var(--surface-card);
margin: 0;
transition: all .3s;
padding: 0 .5rem;
@ -79,20 +79,20 @@
}
.DocSearch-Modal {
border: 1px solid var(--p-surface-border);
border: 1px solid var(--surface-border);
box-shadow: none;
}
.DocSearch-Footer {
box-shadow: none;
border-top: 1px solid var(--p-surface-border);
background-color: var(--p-surface-overlay);
border-top: 1px solid var(--surface-border);
background-color: var(--surface-overlay);
}
.DocSearch-Form {
background: var(--p-surface-card);
background: var(--surface-card);
box-shadow: none;
border: 1px solid var(--p-surface-border);
border: 1px solid var(--surface-border);
border-radius: var(--p-border-radius);
transition: border-color .3s;
@ -106,7 +106,7 @@
}
.DocSearch-Hit {
border-bottom: 1px solid var(--p-surface-border);
border-bottom: 1px solid var(--surface-border);
padding-bottom: 0;
margin-bottom: .25rem;
}
@ -130,16 +130,16 @@
}
:root {
--docsearch-searchbox-focus-background: var(--p-surface-card);
--docsearch-searchbox-focus-background: var(--surface-card);
--docsearch-text-color: var(--p-text-color);
--docsearch-muted-color: var(--p-text-color);
--docsearch-searchbox-background: var(--p-surface-card);
--docsearch-searchbox-background: var(--surface-card);
--docsearch-text-color: var(--p-text-color);
--docsearch-modal-background: var(--p-surface-overlay);
--docsearch-key-gradient: var(--p-surface-ground);
--docsearch-modal-background: var(--surface-overlay);
--docsearch-key-gradient: var(--surface-ground);
--docsearch-key-shadow: none;
--docsearch-container-background: var(--p-mask-bg);
--docsearch-hit-background: var(--p-surface-overlay);
--docsearch-hit-background: var(--surface-overlay);
--docsearch-hit-shadow: none;
--docsearch-spacing: 1rem;
--docsearch-hit-color: var(--p-text-color);

2
assets/styles/layout/_footer.scss
View File

@ -7,7 +7,7 @@
flex-wrap: wrap;
font-weight: 500;
color: var(--text-800);
border-top: 1px solid var(--p-surface-border);
border-top: 1px solid var(--surface-border);
a {
color: var(--primary-color-default);

6
assets/styles/layout/_sidebar.scss
View File

@ -48,7 +48,7 @@
height: 2rem;
border-radius: var(--p-border-radius);
margin-right: .5rem;
border: 1px solid var(--p-surface-border);
border: 1px solid var(--surface-border);
display: inline-flex;
align-items: center;
justify-content: center;
@ -69,7 +69,7 @@
&:hover {
.menu-icon {
background-color: var(--p-surface-card);
background-color: var(--surface-card);
i {
color: var(--primary-color-default);
@ -102,7 +102,7 @@
li {
a {
border-left: 1px solid var(--p-surface-border);
border-left: 1px solid var(--surface-border);
transition: all .2s;
font-weight: 450;
display: flex;

16
assets/styles/layout/_topbar.scss
View File

@ -8,7 +8,7 @@
border-bottom: 1px solid transparent;
&.layout-topbar-sticky {
border-bottom: 1px solid var(--p-surface-border);
border-bottom: 1px solid var(--surface-border);
background-color: var(--topbar-sticky-bg);
backdrop-filter: blur(8px);
}
@ -73,14 +73,14 @@
align-items: center;
justify-content: center;
flex-shrink: 0;
border: 1px solid var(--p-surface-border);
border: 1px solid var(--surface-border);
width: 2rem;
height: 2rem;
transition: all .2s;
border-radius: 6px;
margin: 0;
padding: 0;
background-color: var(--p-surface-card);
background-color: var(--surface-card);
cursor: pointer;
@include focus-visible();
@ -108,9 +108,9 @@
right: 0;
width: 14rem;
padding: .75rem;
background-color: var(--p-surface-overlay);
background-color: var(--surface-overlay);
border-radius: var(--p-border-radius);
border: 1px solid var(--p-surface-border);
border: 1px solid var(--surface-border);
transform-origin: top;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
@ -179,12 +179,12 @@
.versions-panel {
padding: .25rem;
background-color: var(--p-surface-overlay);
background-color: var(--surface-overlay);
position: absolute;
right: 0;
top: calc(100% + 2px);
border-radius: var(--p-border-radius);
border: 1px solid var(--p-surface-border);
border: 1px solid var(--surface-border);
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
transform-origin: top;
width: 8rem;
@ -210,7 +210,7 @@
overflow: hidden;
&:hover {
background-color: var(--p-surface-hover);
background-color: var(--surface-hover);
}
span:first-child {

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

@ -6,4 +6,9 @@
--glow-blend: hard-light, color-dodge;
--topbar-sticky-bg:rgba(0,0,0,.3);
--mobile-menu-bg: rgba(0,0,0,.3);
--surface-card: var(--p-dark-surface-900);
--surface-border: var(--p-dark-surface-800);
--surface-ground: var(--p-dark-surface-950);
--surface-overlay: var(--p-dark-surface-900);
--surface-hover: var(--p-dark-hover-bg);
}

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

@ -6,4 +6,9 @@
--glow-blend: hard-light, multiply;
--topbar-sticky-bg:rgba(255,255,255,.7);
--mobile-menu-bg: var(--p-surface-0);
--surface-card: var(--p-surface-0);
--surface-border: var(--p-surface-200);
--surface-ground: var(--p-surface-50);
--surface-overlay: var(--p-surface-0);
--surface-hover: var(--p-hover-bg);
}

7
components/lib/theme/aura/index.js
View File

@ -133,13 +133,6 @@ export default {
color: '{primary.500}',
offset: '2px'
},
surface: {
card: 'var(--p-dark-surface-900, var(--p-surface-0))',
border: 'var(--p-dark-surface-800, var(--p-surface-200))',
ground: 'var(--p-dark-surface-950, var(--p-surface-50))',
overlay: 'var(--p-dark-surface-900, var(--p-surface-0))',
hover: 'var(--p-dark-hover-bg, var(--p-hover-bg))'
},
text: {
color: 'var(--p-dark-surface-0, var(--p-surface-700))',
secondaryColor: 'var(--p-dark-surface-400, var(--p-surface-500))'