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 { .card {
background: var(--p-surface-card); background: var(--surface-card);
border: var(--card-border); border: var(--card-border);
padding: 2rem; padding: 2rem;
border-radius: 10px; border-radius: 10px;

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -6,4 +6,9 @@
--glow-blend: hard-light, color-dodge; --glow-blend: hard-light, color-dodge;
--topbar-sticky-bg:rgba(0,0,0,.3); --topbar-sticky-bg:rgba(0,0,0,.3);
--mobile-menu-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; --glow-blend: hard-light, multiply;
--topbar-sticky-bg:rgba(255,255,255,.7); --topbar-sticky-bg:rgba(255,255,255,.7);
--mobile-menu-bg: var(--p-surface-0); --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}', color: '{primary.500}',
offset: '2px' 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: { text: {
color: 'var(--p-dark-surface-0, var(--p-surface-700))', color: 'var(--p-dark-surface-0, var(--p-surface-700))',
secondaryColor: 'var(--p-dark-surface-400, var(--p-surface-500))' secondaryColor: 'var(--p-dark-surface-400, var(--p-surface-500))'