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

Migrated app to CSS variables

pull/5507/head
Cagatay Civici 2024-02-07 15:14:37 +03:00
parent db3a0777b8
commit d698dbe3b9
16 changed files with 58 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
assets/styles/layout/_code.scss
View File

@ -128,24 +128,6 @@ pre[class*="language-"] {
pre[class*="language-"] {
code {
background: var(--demo-code-bg);
}
}
.layout-light {
&[data-p-theme^="md"] {
pre[class*="language-"] {
code {
background: var(--surface-900);
}
}
}
&[data-p-theme^="aura-light-noir"] {
pre[class*="language-"] {
code {
background: var(--surface-950);
}
}
background: var(--p-dark-surface-900, var(--p-surface-800));
}
}

42
assets/styles/layout/_config.scss
View File

@ -1,42 +0,0 @@
.layout-config {
backdrop-filter: blur(20px);
background-color: var(--mobile-menu-bg);
.p-selectbutton {
.p-button {
padding: 0.5rem 1rem;
}
}
button {
&:focus-visible {
outline: 0 none;
border-color: var(--surface-500) !important;
}
}
.grid {
> div {
padding: 1rem;
}
}
.p-inputswitch {
.p-inputswitch-slider {
border-radius: 30px;
&:before {
border-radius: 30px;
}
}
}
&.layout-light {
background: var(--surface-overlay);
}
&.layout-dark {
background: var(rgba(0,0,0,.3));
border: 0 none;
}
}

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

@ -16,6 +16,10 @@ body {
font-feature-settings: var(--p-font-feature-settings);
}
.layout-wrapper {
background-color: var(--p-surface-ground);
}
a {
text-decoration: none;
}

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

@ -12,7 +12,7 @@
position: absolute;
bottom: 0;
width: 100%;
border-bottom: 1px solid var(--surface-border);
border-bottom: 1px solid var(--p-surface-border);
content: '';
}
@ -26,19 +26,19 @@
display: block;
padding: 0 2rem 1rem 2rem;
text-align: center;
color: var(--surface-700);
color: var(--p-text-color);
font-size: 1rem;
letter-spacing: 1px;
cursor: pointer;
margin: 0;
transition: all 0.2s;
border-bottom: 1px solid transparent;
border-top-right-radius: var(--border-round);
border-top-left-radius: var(--border-round);
border-top-right-radius: var(--p-border-radius);
border-top-left-radius: var(--p-border-radius);
white-space: nowrap;
&:hover {
border-bottom-color: var(--surface-500);
border-bottom-color: var(--p-dark-surface-600, var(--p-surface-400));
}
&:focus {
@ -78,7 +78,7 @@
p {
font-size: 1.125rem;
color: var(--text-color);
color: var(--p-text-color);
margin: 0;
a {
@ -102,7 +102,7 @@
margin-left: 1rem;
display: none;
transition: all .2s;
border-radius: var(--border-radius);
border-radius: var(--p-border-radius);
@include focus-visible();
}
@ -120,7 +120,7 @@
.doc-section-description {
> p {
font-size: 1rem;
color: var(--text-color);
color: var(--p-text-color);
i {
border-radius: 6px;
@ -128,8 +128,8 @@
font-size: .875rem;
font-weight: 500;
font-style: normal;
background-color: var(--doc-highlight-text-bg);
color: var(--doc-highlight-text-color);
background-color: var(--p-dark-surface-800, var(--p-surface-200));
color: var(--p-dark-surface-300, var(--p-surface-700));
}
a {
@ -142,8 +142,8 @@
padding: 1rem;
font-weight: 500;
border-radius: 10px;
background-color: var(--doc-highlight-text-bg);
color: var(--doc-highlight-text-color);
background-color: var(--p-dark-surface-800, var(--p-surface-200));
color: var(--p-dark-surface-300, var(--p-surface-700));
}
}
@ -163,12 +163,12 @@
> .navbar-item {
.navbar-item-content {
border-left: 1px solid var(--surface-border);
border-left: 1px solid var(--p-surface-border);
padding-left: .25rem;
transition: all .2s;
&:hover {
border-left-color: var(--surface-500);
border-left-color: var(--p-dark-surface-600, var(--p-surface-400));
}
}
}
@ -179,7 +179,7 @@
.px-link {
padding: 0.25rem 1rem 0.25rem 1rem;
color: var(--surface-800);
color: var(--p-text-color);
font-weight: 400;
white-space: nowrap;
min-width: 0;
@ -190,7 +190,7 @@
&:hover {
.px-link {
color: var(--surface-900);
color: var(--p-text-color);
}
}
}
@ -261,12 +261,12 @@
background-color: transparent;
transition: background-color .2s, box-shadow .2s;
border: 0 none;
color: var(--demo-code-button-color);
color: var(--p-dark-surface-300, var(--p-surface-300));
cursor: pointer;
&:hover {
background-color: var(--demo-code-button-hover-bg);
color: var(--demo-code-button-hover-color);
background-color: rgba(255,255,255,.1);
color: var(--p-dark-surface-100, var(--p-surface-100));
}
&.code-active {
@ -293,7 +293,7 @@
margin-bottom: 1.5rem;
th {
border-bottom: 1px solid var(--surface-border);
border-bottom: 1px solid var(--p-surface-border);
padding: .75rem 1rem;
text-align: left;
text-transform: capitalize;
@ -301,12 +301,12 @@
tbody {
tr:hover {
background: var(--surface-hover);
background: var(--p-surface-hover);
}
td {
padding: .75rem 1rem;
border-bottom: 1px solid var(--surface-border);
border-bottom: 1px solid var(--p-surface-border);
white-space: pre-line;
line-height: 1.5;
scroll-margin-top: 6.5rem;
@ -327,10 +327,6 @@
align-items: center;
}
span.doc-option-type-options {
color: var(--primary-700);
}
&.doc-option-link {
&:hover {
text-decoration: underline;
@ -343,8 +339,8 @@
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
position: relative;
scroll-margin-top: 6.5rem;
background-color: var(--doc-highlight-text-bg);
color: var(--doc-highlight-text-color);
background-color: var(--p-dark-surface-800, var(--p-surface-200));
color: var(--p-dark-surface-300, var(--p-surface-700));
border-radius: 6px;
padding: 2px 6px;
font-weight: 600;
@ -385,6 +381,9 @@
border-radius: 6px;
padding: 2px 6px;
max-width: min-content;
border-color: var(--p-surface-border);
background-color: var(--p-surface-card);
color: var(--p-text-secondary-color);
}
.doc-option-parameter-name {
@ -399,16 +398,6 @@
.doc-option-params {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
}
.doc-option-light {
background: var(--bluegray-50);
border-color: var(--bluegray-100);
}
.doc-option-dark {
background: var(--bluegray-800);
border-color: var(--bluegray-800);
}
}
}
}

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

@ -7,13 +7,13 @@
flex-wrap: wrap;
font-weight: 500;
color: var(--text-800);
border-top: 1px solid var(--surface-border);
border-top: 1px solid var(--p-surface-border);
a {
color: var(--primary-color-default);
font-weight: 700;
transition: all .3s;
border-radius: var(--border-radius);
border-radius: var(--p-border-radius);
@include focus-visible();

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

@ -1,7 +1,7 @@
.landing, .layout-wrapper {
background-image: var(--glow-image);
background-blend-mode: var(--glow-blend);
background-position: top center;
background-image: var(--glow-image);
background-position: top;
background-repeat: no-repeat;
background-size: auto 20rem;
}

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

@ -10,7 +10,7 @@
color: var(--primary-color-default);
font-weight: 500;
transition: all .2s;
border-radius: var(--border-radius);
border-radius: var(--p-border-radius);
@include focus-visible();
&:hover {

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

@ -41,7 +41,7 @@
.layout-news-link,
.layout-news-link:visited,
.layout-news-link:active {
color:var(--primary-color-text);
color:var(--p-primary-color-inverse);
font-weight:700;
}
.layout-news-link:hover {

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

@ -37,18 +37,18 @@
width: 100%;
align-items: center;
padding: .5rem 0;
color: var(--surface-900);
color: var(--p-text-color);
font-weight: 600;
transition: all .2s;
position: relative;
border-radius: var(--border-radius);
border-radius: var(--p-border-radius);
.menu-icon {
width: 2rem;
height: 2rem;
border-radius: var(--border-radius);
border-radius: var(--p-border-radius);
margin-right: .5rem;
border: 1px solid var(--surface-border);
border: 1px solid var(--p-surface-border);
display: inline-flex;
align-items: center;
justify-content: center;
@ -57,19 +57,19 @@
background-color: transparent;
i {
color: var(--surface-700);
color: var(--p-text-color);
transition: all .2s;
}
}
.menu-toggle-icon {
color: var(--surface-700);
color: var(--p-text-secondary-color);
margin-left: auto;
}
&:hover {
.menu-icon {
background-color: var(--surface-card);
background-color: var(--p-surface-card);
i {
color: var(--primary-color-default);
@ -102,15 +102,14 @@
li {
a {
color: var(--surface-700);
border-left: 1px solid var(--surface-border);
border-left: 1px solid var(--p-surface-border);
transition: all .2s;
font-weight: 450;
display: flex;
align-items: center;
padding: .5rem .5rem .5rem 1rem;
color: var(--surface-700);
transition: all .2s;
color: var(--p-text-color);
transition: border-color .2s;
position: relative;
&:focus-visible {
@ -119,8 +118,7 @@
}
&:hover {
color: var(--surface-900);
border-left-color: var(--surface-500);
border-left-color: var(--p-dark-surface-600, var(--p-surface-400));
}
&.router-link-active {
@ -163,7 +161,7 @@
font-size: .875rem;
font-weight: 600;
letter-spacing: 1px;
color: var(--surface-900);
color: var(--p-text-secondary-color);
margin-bottom: .25rem;
}
}

1
assets/styles/layout/layout.scss
View File

@ -9,7 +9,6 @@
@import './_content';
@import './_news';
@import './_footer';
@import './_config';
@import './_code';
@import './_doc';
@import './_docsearch';

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

@ -2,14 +2,8 @@
--primary-color-default:var(--p-dark-primary-400);
--primary-color-inverse-default:var(--p-dark-zinc-900);
--card-border: 1px solid transparent;
--glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png), radial-gradient(50% 50% at center -25px, var(--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;
--topbar-sticky-bg:rgba(0,0,0,.3);
--mobile-menu-bg: rgba(0,0,0,.3);
--demo-code-bg: var(--p-dark-surface-900);
--demo-code-button-color: var(--p-dark-surface-300);
--demo-code-button-hover-bg: rgba(255,255,255,.1);
--demo-code-button-hover-color: var(--p-dark-surface-100);
--doc-highlight-text-bg: var(--p-dark-surface-800);
--doc-highlight-text-color: var(--p-dark-surface-300);
}

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

@ -6,10 +6,4 @@
--glow-blend: hard-light, multiply;
--topbar-sticky-bg:rgba(255,255,255,.7);
--mobile-menu-bg: var(--p-surface-0);
--demo-code-bg: var(--p-surface-800);
--demo-code-button-color: var(--p-surface-300);
--demo-code-button-hover-bg: rgba(255,255,255,.1);
--demo-code-button-hover-color: var(--p-surface-100);
--doc-highlight-text-bg: var(--p-surface-200);
--doc-highlight-text-color: var(--p-surface-700);
}

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

@ -131,7 +131,7 @@ export default {
},
surface: {
card: 'var(--p-dark-surface-900, var(--p-surface-0))',
border: 'var(--p-dark-surface-700, var(--p-surface-200))',
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))'

7
layouts/AppTopBar.vue
View File

@ -128,11 +128,12 @@
<script>
import AppConfigurator from '@/layouts/AppConfigurator';
import EventBus from '@/layouts/AppEventBus';
import pkg from '@/package.json';
import docsearch from '@docsearch/js';
export default {
emits: ['menubutton-click', 'configbutton-click', 'darkswitch-click'],
emits: ['menubutton-click'],
outsideClickListener: null,
props: {
showMenuButton: {
@ -193,8 +194,8 @@ export default {
onMenuButtonClick(event) {
this.$emit('menubutton-click', event);
},
toggleDarkMode(event) {
this.$emit('darkswitch-click', event);
toggleDarkMode() {
EventBus.emit('theme-change', { dark: !this.$appState.darkTheme });
},
bindScrollListener() {
if (!this.scrollListener) {

17
layouts/default.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="layout-wrapper" :class="containerClass" :data-p-theme="$appState.theme">
<AppNews />
<AppTopBar @menubutton-click="onMenuButtonClick" @darkswitch-click="onDarkModeToggle" />
<AppTopBar @menubutton-click="onMenuButtonClick" />
<div :class="['layout-mask', { 'layout-mask-active': sidebarActive }]" @click="onMaskClick"></div>
<div class="layout-content">
<app-menu :active="sidebarActive" />
@ -19,7 +19,6 @@
<script>
import DomHandler from '@/components/lib/utils/DomHandler';
import EventBus from '@/layouts/AppEventBus';
import AppFooter from './AppFooter.vue';
import AppMenu from './AppMenu.vue';
import AppNews from './AppNews.vue';
@ -67,20 +66,6 @@ export default {
}
return false;
},
onDarkModeToggle() {
/*let newTheme = null;
let currentTheme = this.$appState.theme;
if (this.$appState.darkTheme) {
newTheme = currentTheme.replace('dark', 'light');
} else {
if (currentTheme.includes('light')) newTheme = currentTheme.replace('light', 'dark');
else newTheme = 'aura-dark-green'; //fallback
}
EventBus.emit('theme-change', { theme: newTheme, dark: !this.$appState.darkTheme });*/
EventBus.emit('theme-change', { dark: !this.$appState.darkTheme });
}
},
computed: {

2
pages/index.vue
View File

@ -1,7 +1,7 @@
<template>
<div :class="landingClass">
<AppNews />
<AppTopBar :showConfigurator="false" :showMenuButton="false" @darkswitch-click="onDarkModeToggle" />
<AppTopBar :showMenuButton="false" @darkswitch-click="onDarkModeToggle" />
<HeroSection />
<FeaturesSection />
<UsersSection />