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() { mounted() {
const preferredColorScheme = localStorage.getItem(this.$appState.colorSchemeKey); /*const preferredColorScheme = localStorage.getItem(this.$appState.colorSchemeKey);
const prefersDarkColorScheme = window.matchMedia('(prefers-color-scheme: dark)').matches; const prefersDarkColorScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
if ((preferredColorScheme === null && prefersDarkColorScheme) || preferredColorScheme === 'dark') { if ((preferredColorScheme === null && prefersDarkColorScheme) || preferredColorScheme === 'dark') {
this.applyTheme({ theme: 'lara-dark-green', dark: true }); this.applyTheme({ theme: 'lara-dark-green', dark: true });
} })*/
EventBus.on('theme-change', this.themeChangeListener); EventBus.on('theme-change', this.themeChangeListener);
}, },

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

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

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

@ -2,8 +2,9 @@
--primary-color-default:var(--primary-400); --primary-color-default:var(--primary-400);
--primary-color-inverse-default:var(--gray-900); --primary-color-inverse-default:var(--gray-900);
--topbar-sticky-bg:rgba(0,0,0,.3); --topbar-sticky-bg:rgba(0,0,0,.3);
--card-border: 0 none; --body-bg: var(--p-surface-900);
--card-bg: var(--surface-card); --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-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; --glow-blend: hard-light, color-dodge;
--topbar-border: var(--surface-border); --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-default:var(--primary-600);
--primary-color-inverse-default:var(--surface-0); --primary-color-inverse-default:var(--surface-0);
--topbar-sticky-bg:rgba(255,255,255,.7); --topbar-sticky-bg:rgba(255,255,255,.7);
--card-border: 1px solid var(--surface-border); --body-bg: var(--p-surface-50);
--card-bg: var(--surface-card); --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-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; --glow-blend: hard-light, multiply;
--topbar-border: rgba(0,0,0,.05); --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 global from 'primevue/theme/lara/global';
import panel from 'primevue/theme/lara/panel'; import panel from 'primevue/theme/lara/panel';
export default { export default {
primitive: { primitive: {
blue: palette('#3B82F6') /* --p-blue-[50-900] */, emerald: {
gray: { 50: '#ecfdf5',
50: '#f9fafb', 100: '#d1fae5',
100: '#f3f4f6', 200: '#a7f3d0',
200: '#e5e7eb', 300: '#6ee7b7',
300: '#d1d5db', 400: '#34d399',
400: '#9ca3af', 500: '#10b981',
500: '#6b7280', 600: '#059669',
600: '#4b5563', 700: '#047857',
700: '#374151', 800: '#065f46',
800: '#1f2937', 900: '#064e3b',
900: '#111827' 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: { semantic: {
primary: { 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: { 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', borderRadius: '6px',
transitionDuration: '.2s', transitionDuration: '.2s',
transition: 'background-color {transitionDuration}, color {transitionDuration}, box-shadow {transitionDuration}' transition: 'background-color {transitionDuration}, color {transitionDuration}, box-shadow {transitionDuration}'

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

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