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

Refactored tokens

pull/5507/head
Cagatay Civici 2024-02-12 13:17:41 +03:00
parent f9a67e78bf
commit 8f0c462942
2 changed files with 58 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
components/lib/theme/aura/index.js
View File

@ -12,23 +12,7 @@ import tabview from 'primevue/theme/aura/tabview';
import toolbar from 'primevue/theme/aura/toolbar';
export default {
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: {
primitive: {
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' },
@ -50,7 +34,25 @@ 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' },
stone: { 50: '#fafaf9', 100: '#f5f5f4', 200: '#e7e5e4', 300: '#d6d3d1', 400: '#a8a29e', 500: '#78716c', 600: '#57534e', 700: '#44403c', 800: '#292524', 900: '#1c1917', 950: '#0c0a09' }
},
semantic: {
fontFamily: '"Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
fontFeatureSettings: '"cv02", "cv03", "cv04", "cv11"',
transitionDuration: '0.2s',
focusRing: {
width: '1px',
style: 'solid',
color: '{primary.500}',
offset: '2px'
},
borderRadius: {
sm: '4px',
base: '6px',
lg: '12px',
},
anchorGutter: '2px',
maskBackground: 'rgba(0,0,0,0.4)',
primary: {
50: '{emerald.50}',
100: '{emerald.100}',
@ -63,8 +65,6 @@ export default {
800: '{emerald.800}',
900: '{emerald.900}',
950: '{emerald.950}'
}
}
},
colorScheme: {
light: {

13
components/lib/theme/aura/panel/index.js
View File

@ -1,13 +1,11 @@
export default {
variables: {
common: {},
colorScheme: {
light: {
root: {
borderColor: '{surface.200}',
background: '{surface.0}',
textColor: '{text.color}',
borderRadius: '{borderRadius}'
textColor: '{text.color}'
},
headerIcon: {
color: '{surface.500}',
@ -19,8 +17,7 @@ export default {
root: {
borderColor: '{surface.700}',
background: '{surface.900}',
textColor: '{text.color}',
borderRadius: '{borderRadius}'
textColor: '{text.color}'
},
headerIcon: {
color: '{surface.400}',
@ -33,7 +30,7 @@ export default {
css: `
.p-panel {
border: 1px solid var(--p-panel-border-color);
border-radius: var(--p-panel-border-radius);
border-radius: var(--p-border-radius-base);
background: var(--p-panel-background);
color: var(--p-panel-text-color);
}
@ -80,11 +77,11 @@ export default {
outline-offset: var(--p-focus-ring-offset);
}
.p-panel .p-panel-content {
.p-panel-content {
padding: 0 1.125rem 1.125rem 1.125rem;
}
.p-panel .p-panel-footer {
.p-panel-footer {
padding: 0 1.125rem 1.125rem 1.125rem;
}
`