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

Initiate Lara panel

pull/5507/head
Cagatay Civici 2024-01-02 19:52:32 +03:00
parent 40ef030944
commit 684823f5a4
7 changed files with 99 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app.vue
View File

@ -34,12 +34,12 @@ export default {
});
},
mounted() {
const preferredColorScheme = localStorage.getItem(this.$appState.colorSchemeKey);
/*const preferredColorScheme = localStorage.getItem(this.$appState.colorSchemeKey);
const prefersDarkColorScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
if ((preferredColorScheme === null && prefersDarkColorScheme) || preferredColorScheme === 'dark') {
this.applyTheme({ theme: 'lara-dark-green', dark: true });
}
})*/
EventBus.on('theme-change', this.themeChangeListener);
},

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

@ -10,7 +10,7 @@
}
.card {
background: var(--surface-card);
background: var(--card-bg);
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(--surface-ground);
background-color: var(--body-bg);
font-weight: normal;
color: var(--text-color);
-webkit-font-smoothing: antialiased;
@ -15,7 +15,7 @@ body {
}
.layout-wrapper {
background-color: var(--surface-ground);
background-color: var(--body-bg);
}
a {

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

@ -2,8 +2,9 @@
--primary-color-default:var(--primary-400);
--primary-color-inverse-default:var(--gray-900);
--topbar-sticky-bg:rgba(0,0,0,.3);
--card-border: 0 none;
--card-bg: var(--surface-card);
--body-bg: var(--p-surface-900);
--card-border: 1px solid transparent;
--card-bg: var(--p-surface-800);
--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-blend: hard-light, color-dodge;
--topbar-border: var(--surface-border);

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

@ -2,8 +2,9 @@
--primary-color-default:var(--primary-600);
--primary-color-inverse-default:var(--surface-0);
--topbar-sticky-bg:rgba(255,255,255,.7);
--card-border: 1px solid var(--surface-border);
--card-bg: var(--surface-card);
--body-bg: var(--p-surface-50);
--card-border: 1px solid var(--p-surface-200);
--card-bg: var(--p-surface-0);
--glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png), radial-gradient(50% 50% at center top, var(--primary-100) 0%, #ffffff 100%);
--glow-blend: hard-light, multiply;
--topbar-border: rgba(0,0,0,.05);

64
components/lib/theme/lara/index.js
View File

@ -1,30 +1,64 @@
import { palette } from 'primevue/theme';
import global from 'primevue/theme/lara/global';
import panel from 'primevue/theme/lara/panel';
export default {
primitive: {
blue: palette('#3B82F6') /* --p-blue-[50-900] */,
gray: {
50: '#f9fafb',
100: '#f3f4f6',
200: '#e5e7eb',
300: '#d1d5db',
400: '#9ca3af',
500: '#6b7280',
600: '#4b5563',
700: '#374151',
800: '#1f2937',
900: '#111827'
emerald: {
50: '#ecfdf5',
100: '#d1fae5',
200: '#a7f3d0',
300: '#6ee7b7',
400: '#34d399',
500: '#10b981',
600: '#059669',
700: '#047857',
800: '#065f46',
900: '#064e3b',
950: '#022c22'
},
slate: {
50: '#f8fafc',
100: '#f1f5f9',
200: '#e2e8f0',
300: '#cbd5e1',
400: '#94a3b8',
500: '#64748b',
600: '#475569',
700: '#334155',
800: '#1e293b',
900: '#0f172a',
950: '#020617'
}
},
semantic: {
primary: {
500: 'var(--p-blue-500)'
50: '{emerald.50}',
100: '{emerald.100}',
200: '{emerald.200}',
300: '{emerald.300}',
400: '{emerald.400}',
500: '{emerald.500}',
600: '{emerald.600}',
700: '{emerald.700}',
800: '{emerald.800}',
900: '{emerald.900}',
950: '{emerald.950}'
},
surface: {
200: 'var(--p-gray-200)'
0: '#ffffff',
50: '{slate.50}',
100: '{slate.100}',
200: '{slate.200}',
300: '{slate.300}',
400: '{slate.400}',
500: '{slate.500}',
600: '{slate.600}',
700: '{slate.700}',
800: '{slate.800}',
900: '{slate.900}',
950: '{slate.950}'
},
fontFamily: 'Inter var',
borderRadius: '6px',
transitionDuration: '.2s',
transition: 'background-color {transitionDuration}, color {transitionDuration}, box-shadow {transitionDuration}'

71
components/lib/theme/lara/panel/index.js
View File

@ -34,56 +34,63 @@ export default {
},
light: {
header: {
borderColor: '{shade.300}',
background: '{shade.100}',
color: '{shade.800}'
borderColor: '{surface.200}',
background: '{surface.50}',
color: '{surface.700}'
},
headerIcon: {
color: '{shade.600}',
color: '{surface.600}',
borderColor: 'transparent',
background: 'transparent'
},
headerIconHover: {
color: '{shade.800}',
borderColor: 'transparent',
background: '{shade.200}'
background: 'transparent',
states: {
hover: {
color: '{surface.800}',
borderColor: 'transparent',
background: '{surface.100}'
},
focus: {
}
}
},
content: {
borderColor: '{shade.300}',
background: '{shade.0}',
color: '{shade.700}'
borderColor: '{surface.200}',
background: '{surface.0}',
color: '{surface.700}'
},
footer: {
borderColor: '{shade.300}',
background: '{shade.0}',
color: '{shade.700}'
borderColor: '{surface.200}',
background: '{surface.0}',
color: '{surface.700}'
}
},
dark: {
header: {
borderColor: '{shade.600}',
background: '{shade.800}',
color: '{shade.0}'
borderColor: '{surface.200}',
background: '{surface.50}',
color: '{surface.700}'
},
headerIcon: {
color: '{shade.100}',
color: '{surface.600}',
borderColor: 'transparent',
background: 'transparent'
},
headerIconHover: {
color: '{shade.0}',
borderColor: 'transparent',
background: 'rgba(255,255,255,.03)'
background: 'transparent',
states: {
hover: {
color: '{surface.800}',
borderColor: 'transparent',
background: '{surface.100}'
}
}
},
content: {
borderColor: '{shade.600}',
background: '{shade.800}',
color: '{shade.0}'
borderColor: '{surface.200}',
background: '{surface.0}',
color: '{surface.700}'
},
footer: {
borderColor: '{shade.600}',
background: '{shade.800}',
color: '{shade.0}'
borderColor: '{surface.200}',
background: '{surface.0}',
color: '{surface.700}'
}
}
},