New theming api redesign
Cagatay Civici
parent
c2393e183a
commit
bd542a5357
|
|
@ -12,7 +12,25 @@ import tabview from 'primevue/theme/aura/tabview';
|
|||
import toolbar from 'primevue/theme/aura/toolbar';
|
||||
|
||||
export default {
|
||||
primitive: {
|
||||
variables: {
|
||||
common: {
|
||||
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
|
||||
fontFeatureSettings: '"cv02", "cv03", "cv04", "cv11"',
|
||||
borderRadius: '6px',
|
||||
transitionDuration: '.2s',
|
||||
focusRing: {
|
||||
width: '1px',
|
||||
style: 'solid',
|
||||
color: '{primary.500}',
|
||||
offset: '2px'
|
||||
},
|
||||
anchorGutter: '2px',
|
||||
mask: {
|
||||
bg: 'rgba(0,0,0,0.4)'
|
||||
},
|
||||
colors: {
|
||||
white: '#ffffff',
|
||||
black: '#000000',
|
||||
emerald: { 50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b7', 400: '#34d399', 500: '#10b981', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22' },
|
||||
green: { 50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac', 400: '#4ade80', 500: '#22c55e', 600: '#16a34a', 700: '#15803d', 800: '#166534', 900: '#14532d', 950: '#052e16' },
|
||||
lime: { 50: '#f7fee7', 100: '#ecfccb', 200: '#d9f99d', 300: '#bef264', 400: '#a3e635', 500: '#84cc16', 600: '#65a30d', 700: '#4d7c0f', 800: '#3f6212', 900: '#365314', 950: '#1a2e05' },
|
||||
|
|
@ -34,11 +52,7 @@ export default {
|
|||
gray: { 50: '#f9fafb', 100: '#f3f4f6', 200: '#e5e7eb', 300: '#d1d5db', 400: '#9ca3af', 500: '#6b7280', 600: '#4b5563', 700: '#374151', 800: '#1f2937', 900: '#111827', 950: '#030712' },
|
||||
zinc: { 50: '#fafafa', 100: '#f4f4f5', 200: '#e4e4e7', 300: '#d4d4d8', 400: '#a1a1aa', 500: '#71717a', 600: '#52525b', 700: '#3f3f46', 800: '#27272a', 900: '#18181b', 950: '#09090b' },
|
||||
neutral: { 50: '#fafafa', 100: '#f5f5f5', 200: '#e5e5e5', 300: '#d4d4d4', 400: '#a3a3a3', 500: '#737373', 600: '#525252', 700: '#404040', 800: '#262626', 900: '#171717', 950: '#0a0a0a' },
|
||||
stone: { 50: '#fafaf9', 100: '#f5f5f4', 200: '#e7e5e4', 300: '#d6d3d1', 400: '#a8a29e', 500: '#78716c', 600: '#57534e', 700: '#44403c', 800: '#292524', 900: '#1c1917', 950: '#0c0a09' }
|
||||
},
|
||||
semantic: {
|
||||
colorScheme: {
|
||||
light: {
|
||||
stone: { 50: '#fafaf9', 100: '#f5f5f4', 200: '#e7e5e4', 300: '#d6d3d1', 400: '#a8a29e', 500: '#78716c', 600: '#57534e', 700: '#44403c', 800: '#292524', 900: '#1c1917', 950: '#0c0a09' },
|
||||
primary: {
|
||||
50: '{emerald.50}',
|
||||
100: '{emerald.100}',
|
||||
|
|
@ -51,9 +65,12 @@ export default {
|
|||
800: '{emerald.800}',
|
||||
900: '{emerald.900}',
|
||||
950: '{emerald.950}'
|
||||
}
|
||||
}
|
||||
},
|
||||
colorScheme: {
|
||||
light: {
|
||||
surface: {
|
||||
0: '#ffffff',
|
||||
50: '{slate.50}',
|
||||
100: '{slate.100}',
|
||||
200: '{slate.200}',
|
||||
|
|
@ -66,25 +83,16 @@ export default {
|
|||
900: '{slate.900}',
|
||||
950: '{slate.950}'
|
||||
},
|
||||
primary: {
|
||||
color: '{primary.500}',
|
||||
colorInverse: '{primary.0}'
|
||||
},
|
||||
highlight: {
|
||||
bg: '{primary.50}',
|
||||
textColor: '{primary.700}'
|
||||
}
|
||||
},
|
||||
dark: {
|
||||
primary: {
|
||||
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: {
|
||||
0: '#ffffff',
|
||||
50: '{zinc.50}',
|
||||
|
|
@ -99,32 +107,15 @@ export default {
|
|||
900: '{zinc.900}',
|
||||
950: '{zinc.950}'
|
||||
},
|
||||
primary: {
|
||||
color: '{primary.400}',
|
||||
colorInverse: '{surface.900}'
|
||||
},
|
||||
highlight: {
|
||||
bg: 'color-mix(in srgb, {primary.400}, transparent 84%)',
|
||||
textColor: 'rgba(255,255,255,.87)'
|
||||
}
|
||||
}
|
||||
},
|
||||
common: {
|
||||
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
|
||||
fontFeatureSettings: '"cv02", "cv03", "cv04", "cv11"',
|
||||
borderRadius: '6px',
|
||||
transitionDuration: '.2s',
|
||||
focusRing: {
|
||||
width: '1px',
|
||||
style: 'solid',
|
||||
color: '{primary.500}',
|
||||
offset: '2px'
|
||||
},
|
||||
primary: {
|
||||
color: 'var(--p-dark-primary-400, var(--p-primary-500))',
|
||||
colorInverse: 'var(--p-dark-surface-900, var(--p-surface-0))',
|
||||
colorText: 'var(--p-primary-color-inverse)'
|
||||
},
|
||||
anchorGutter: '2px',
|
||||
mask: {
|
||||
bg: 'rgba(0,0,0,0.4)'
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,26 @@
|
|||
export default {
|
||||
variables: {
|
||||
light: {},
|
||||
dark: {}
|
||||
common: {},
|
||||
colorScheme: {
|
||||
light: {
|
||||
root: {
|
||||
borderColor: '{surface.200}',
|
||||
backgroundColor: '{white}'
|
||||
}
|
||||
},
|
||||
dark: {
|
||||
root: {
|
||||
borderColor: '{surface.700}',
|
||||
backgroundColor: '{surface.0}'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
css: `
|
||||
.p-panel {
|
||||
border: 1px solid var(--p-dark-surface-700, var(--p-surface-200));
|
||||
border: 1px solid var(--p-panel-border-color);
|
||||
border-radius: var(--p-border-radius);
|
||||
background: var(--p-dark-surface-900, var(--p-surface-0));
|
||||
background: var(--p-dark-surface-900, var(--p-white));
|
||||
color: var(--p-dark-surface-0, var(--p-surface-700));
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue