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

Update noir mode to use current surface instead of zinc

pull/5806/head
Cagatay Civici 2024-05-22 01:00:23 +03:00
parent 59493ef059
commit 1036413315
2 changed files with 52 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
layouts/AppConfigurator.vue
View File

@ -61,7 +61,7 @@ export default {
selectedPrimaryColor: 'noir', selectedPrimaryColor: 'noir',
selectedSurfaceColor: null, selectedSurfaceColor: null,
primaryColors: [ primaryColors: [
{ name: 'noir', palette: { 50: '#fafafa', 100: '#f4f4f5', 200: '#e4e4e7', 300: '#d4d4d8', 400: '#a1a1aa', 500: '#71717a', 600: '#52525b', 700: '#3f3f46', 800: '#27272a', 900: '#18181b', 950: '#09090b' } }, { name: 'noir', palette: {} },
{ name: 'emerald', palette: { 50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b7', 400: '#34d399', 500: '#10b981', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22' } }, { name: 'emerald', palette: { 50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b7', 400: '#34d399', 500: '#10b981', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22' } },
{ name: 'green', palette: { 50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac', 400: '#4ade80', 500: '#22c55e', 600: '#16a34a', 700: '#15803d', 800: '#166534', 900: '#14532d', 950: '#052e16' } }, { name: 'green', palette: { 50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac', 400: '#4ade80', 500: '#22c55e', 600: '#16a34a', 700: '#15803d', 800: '#166534', 900: '#14532d', 950: '#052e16' } },
{ name: 'lime', palette: { 50: '#f7fee7', 100: '#ecfccb', 200: '#d9f99d', 300: '#bef264', 400: '#a3e635', 500: '#84cc16', 600: '#65a30d', 700: '#4d7c0f', 800: '#3f6212', 900: '#365314', 950: '#1a2e05' } }, { name: 'lime', palette: { 50: '#f7fee7', 100: '#ecfccb', 200: '#d9f99d', 300: '#bef264', 400: '#a3e635', 500: '#84cc16', 600: '#65a30d', 700: '#4d7c0f', 800: '#3f6212', 900: '#365314', 950: '#1a2e05' } },
@ -124,34 +124,46 @@ export default {
return { return {
semantic: { semantic: {
primary: color.palette, primary: {
50: '{surface.50}',
100: '{surface.100}',
200: '{surface.200}',
300: '{surface.300}',
400: '{surface.400}',
500: '{surface.500}',
600: '{surface.600}',
700: '{surface.700}',
800: '{surface.800}',
900: '{surface.900}',
950: '{surface.950}'
},
colorScheme: { colorScheme: {
light: { light: {
primary: { primary: {
color: '#09090b', color: '{primary.950}',
contrastColor: '#ffffff', contrastColor: '#ffffff',
hoverColor: '#18181b', hoverColor: '{primary.900}',
activeColor: '#27272a' activeColor: '{primary.800}'
}, },
highlight: { highlight: {
background: '#09090b', background: '{primary.950}',
focusBackground: '#3f3f46', focusBackground: '{primary.700}',
color: '#ffffff', color: '#ffffff',
focusColor: '#ffffff' focusColor: '#ffffff'
} }
}, },
dark: { dark: {
primary: { primary: {
color: '#fafafa', color: '{primary.50}',
contrastColor: '#09090b', contrastColor: '{primary.950}',
hoverColor: '#f4f4f5', hoverColor: '{primary.100}',
activeColor: '#e4e4e7' activeColor: '{primary.200}'
}, },
highlight: { highlight: {
background: 'rgba(250, 250, 250, .16)', background: '{primary.50}',
focusBackground: 'rgba(250, 250, 250, .24)', focusBackground: '{primary.300}',
color: 'rgba(255,255,255,.87)', color: '{primary.950}',
focusColor: 'rgba(255,255,255,.87)' focusColor: '{primary.950}'
} }
} }
} }

50
themes/app-theme.js
View File

@ -4,45 +4,45 @@ import Aura from 'primevue/themes/aura';
const Noir = definePreset(Aura, { const Noir = definePreset(Aura, {
semantic: { semantic: {
primary: { primary: {
50: '{zinc.50}', 50: '{surface.50}',
100: '{zinc.100}', 100: '{surface.100}',
200: '{zinc.200}', 200: '{surface.200}',
300: '{zinc.300}', 300: '{surface.300}',
400: '{zinc.400}', 400: '{surface.400}',
500: '{zinc.500}', 500: '{surface.500}',
600: '{zinc.600}', 600: '{surface.600}',
700: '{zinc.700}', 700: '{surface.700}',
800: '{zinc.800}', 800: '{surface.800}',
900: '{zinc.900}', 900: '{surface.900}',
950: '{zinc.950}' 950: '{surface.950}'
}, },
colorScheme: { colorScheme: {
light: { light: {
primary: { primary: {
color: '{zinc.950}', color: '{primary.950}',
inverseColor: '#ffffff', contrastColor: '#ffffff',
hoverColor: '{zinc.900}', hoverColor: '{primary.900}',
activeColor: '{zinc.800}' activeColor: '{primary.800}'
}, },
highlight: { highlight: {
background: '{zinc.950}', background: '{primary.950}',
focusBackground: '{zinc.700}', focusBackground: '{primary.700}',
color: '#ffffff', color: '#ffffff',
focusColor: '#ffffff' focusColor: '#ffffff'
} }
}, },
dark: { dark: {
primary: { primary: {
color: '{zinc.50}', color: '{primary.50}',
inverseColor: '{zinc.950}', contrastColor: '{primary.950}',
hoverColor: '{zinc.100}', hoverColor: '{primary.100}',
activeColor: '{zinc.200}' activeColor: '{primary.200}'
}, },
highlight: { highlight: {
background: 'rgba(250, 250, 250, .16)', background: '{primary.50}',
focusBackground: 'rgba(250, 250, 250, .24)', focusBackground: '{primary.300}',
color: 'rgba(255,255,255,.87)', color: '{primary.950}',
focusColor: 'rgba(255,255,255,.87)' focusColor: '{primary.950}'
} }
} }
} }