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-"] { pre[class*="language-"] {
code { code {
background: var(--demo-code-bg); background: var(--p-dark-surface-900, var(--p-surface-800));
}
}
.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);
}
}
} }
} }

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); font-feature-settings: var(--p-font-feature-settings);
} }
.layout-wrapper {
background-color: var(--p-surface-ground);
}
a { a {
text-decoration: none; text-decoration: none;
} }

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

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

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

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

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

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

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

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

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

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

@ -9,7 +9,6 @@
@import './_content'; @import './_content';
@import './_news'; @import './_news';
@import './_footer'; @import './_footer';
@import './_config';
@import './_code'; @import './_code';
@import './_doc'; @import './_doc';
@import './_docsearch'; @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-default:var(--p-dark-primary-400);
--primary-color-inverse-default:var(--p-dark-zinc-900); --primary-color-inverse-default:var(--p-dark-zinc-900);
--card-border: 1px solid transparent; --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; --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);
--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; --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);
--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: { surface: {
card: 'var(--p-dark-surface-900, var(--p-surface-0))', 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))', ground: 'var(--p-dark-surface-950, var(--p-surface-50))',
overlay: 'var(--p-dark-surface-900, var(--p-surface-0))', overlay: 'var(--p-dark-surface-900, var(--p-surface-0))',
hover: 'var(--p-dark-hover-bg, var(--p-hover-bg))' hover: 'var(--p-dark-hover-bg, var(--p-hover-bg))'

7
layouts/AppTopBar.vue
View File

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

17
layouts/default.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="layout-wrapper" :class="containerClass" :data-p-theme="$appState.theme"> <div class="layout-wrapper" :class="containerClass" :data-p-theme="$appState.theme">
<AppNews /> <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-mask', { 'layout-mask-active': sidebarActive }]" @click="onMaskClick"></div>
<div class="layout-content"> <div class="layout-content">
<app-menu :active="sidebarActive" /> <app-menu :active="sidebarActive" />
@ -19,7 +19,6 @@
<script> <script>
import DomHandler from '@/components/lib/utils/DomHandler'; import DomHandler from '@/components/lib/utils/DomHandler';
import EventBus from '@/layouts/AppEventBus';
import AppFooter from './AppFooter.vue'; import AppFooter from './AppFooter.vue';
import AppMenu from './AppMenu.vue'; import AppMenu from './AppMenu.vue';
import AppNews from './AppNews.vue'; import AppNews from './AppNews.vue';
@ -67,20 +66,6 @@ export default {
} }
return false; 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: { computed: {

2
pages/index.vue
View File

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