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

Migrated panels to component tokens

pull/5507/head
Cagatay Civici 2024-02-12 18:03:19 +03:00
parent 3be4ffe8be
commit afbd4c5150
13 changed files with 294 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,8 +2,8 @@
--primary-text-color:var(--p-primary-400);
--primary-color: var(--p-primary-color);
--primary-inverse-color:var(--p-primary-inverse-color);
--text-color: var(--p-text-color);
--text-secondary-color: var(--p-text-secondar-color);
--text-color: var(--p-surface-0);
--text-secondary-color: var(--p-surface-400);
--glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png), radial-gradient(50% 50% at center -25px, var(--p-primary-color) 0%, #000000 100%);
--glow-blend: hard-light, color-dodge;
--topbar-sticky-background:rgba(0,0,0,.3);

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

@ -2,8 +2,8 @@
--primary-text-color:var(--p-primary-600);
--primary-color: var(--p-primary-color);
--primary-inverse-color:var(--p-primary-inverse-color);
--text-color: var(--p-text-color);
--text-secondary-color: var(--p-text-secondar-color);
--text-color: var(--p-surface-700);
--text-secondary-color: var(--p-surface-500);
--glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png);
--glow-blend: hard-light, multiply;
--topbar-sticky-background:rgba(255,255,255,.7);

46
components/lib/theme/aura/accordion/index.js
View File

@ -1,4 +1,34 @@
export default {
variables: {
colorScheme: {
light: {
header: {
background: '{surface.0}',
textColor: '{surface.500}',
textColorHover: '{surface.700}',
textColorActive: '{surface.700}'
},
content: {
background: '{surface.0}',
borderColor: '{surface.200}',
textColor: '{surface.700}'
}
},
dark: {
header: {
background: '{surface.900}',
textColor: '{surface.400}',
textColorHover: '{surface.0}',
textColorActive: '{surface.0}'
},
content: {
background: '{surface.900}',
borderColor: '{surface.700}',
textColor: '{surface.0}'
}
}
}
},
css: `
.p-accordion-header-link {
cursor: pointer;
@ -9,10 +39,10 @@ export default {
user-select: none;
text-decoration: none;
padding: 1.125rem 1.125rem 1.125rem 1.125rem;
color: var(--p-dark-surface-400, var(--p-surface-500));
background: var(--p-dark-surface-900, var(--p-surface-0));
color: var(--p-accordion-header-text-color);
background: var(--p-accordion-header-background);
font-weight: 600;
border-radius: var(--p-border-radius);
border-radius: var(--p-rounded-base);
transition: color var(--p-transition-duration), outline-color var(--p-transition-duration);
outline-color: transparent;
}
@ -26,10 +56,10 @@ export default {
outline-offset: -2px;
}
.p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
color: var(--p-dark-surface-0, var(--p-surface-700));
color: var(--p-accordion-header-text-color-hover);
}
.p-accordion-header:not(.p-disabled).p-highlight .p-accordion-header-link {
color: var(--p-dark-surface-0, var(--p-surface-700));
color: var(--p-accordion-header-text-color-active);
}
.p-accordion-toggle-icon {
@ -42,12 +72,12 @@ export default {
.p-accordion-content {
padding: 0 1.125rem 1.125rem 1.125rem;
background: var(--p-dark-surface-900, var(--p-surface-0));
color: var(--p-dark-surface-0, var(--p-surface-700));
background: var(--p-accordion-content-background);
color: var(--p-accordion-content-text-color);
}
.p-accordion-tab {
border-bottom: 1px solid var(--p-dark-surface-700, var(--p-surface-200));
border-bottom: 1px solid var(--p-accordion-content-border-color);
}
.p-accordion-tab:last-child {

22
components/lib/theme/aura/avatar/index.js
View File

@ -1,4 +1,20 @@
export default {
variables: {
colorScheme: {
light: {
root: {
background: '{surface.200}',
borderColor: '{surface.0}'
}
},
dark: {
root: {
background: '{surface.700}',
borderColor: '{surface.900}'
}
}
}
},
css: `
.p-avatar {
display: inline-flex;
@ -7,8 +23,8 @@ export default {
width: 2rem;
height: 2rem;
font-size: 1rem;
background-color: var(--p-dark-surface-700, var(--p-surface-200));
border-radius: 6px;
background: var(--p-avatar-background);
border-radius: var(--p-rounded-base);
}
.p-avatar-image {
@ -62,7 +78,7 @@ export default {
}
.p-avatar-group .p-avatar {
border: 2px solid var(--p-dark-surface-900, var(--p-surface-0));
border: 2px solid var(--p-avatar-border-color);
}
`
};

28
components/lib/theme/aura/card/index.js
View File

@ -1,8 +1,30 @@
export default {
variables: {
colorScheme: {
light: {
root: {
background: '{surface.0}',
textColor: '{surface.700}'
},
subtitle: {
textColor: '{surface.500}'
}
},
dark: {
root: {
background: '{surface.900}',
textColor: '{surface.0}'
},
subtitle: {
textColor: '{surface.400}'
}
}
}
},
css: `
.p-card {
background: var(--p-dark-surface-900, var(--p-surface-0));
color: var(--p-dark-surface-0, var(--p-surface-700));
background: var(--p-card-background);
color: var(--p-card-text-color);
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
border-radius: 12px;
display: flex;
@ -29,7 +51,7 @@ export default {
.p-card-subtitle {
font-weight: 400;
color: var(--p-dark-surface-400, var(--p-surface-500));
color: var(--p-card-subtitle-text-color);
}
`
};

29
components/lib/theme/aura/divider/index.js
View File

@ -1,4 +1,26 @@
export default {
variables: {
colorScheme: {
light: {
root: {
borderColor: '{surface.200}'
},
content: {
background: '{surface.0}',
textColor: '{surface.700}'
}
},
dark: {
root: {
borderColor: '{surface.700}'
},
content: {
background: '{surface.900}',
textColor: '{surface.0}'
}
}
}
},
css: `
.p-divider-horizontal {
display: flex;
@ -16,7 +38,7 @@ export default {
left: 0;
width: 100%;
content: "";
border-top: 1px solid var(--p-dark-surface-700, var(--p-surface-200));
border-top: 1px solid var(--p-divider-border-color);
}
.p-divider-horizontal .p-divider-content {
@ -40,7 +62,7 @@ export default {
left: 50%;
height: 100%;
content: "";
border-left: 1px solid var(--p-dark-surface-700, var(--p-surface-200));
border-left: 1px solid var(--p-divider-border-color);
}
.p-divider.p-divider-vertical .p-divider-content {
@ -49,7 +71,8 @@ export default {
.p-divider-content {
z-index: 1;
background: var(--p-dark-surface-900, var(--p-surface-0))
background: var(--p-divider-content-background);
color: var(--p-divider-content-text-color);
}
.p-divider-solid.p-divider-horizontal:before {

56
components/lib/theme/aura/fieldset/index.js
View File

@ -1,10 +1,46 @@
export default {
variables: {
colorScheme: {
light: {
root: {
background: '{surface.0}',
borderColor: '{surface.200}',
textColor: '{surface.700}'
},
legend: {
backgroundHover: '{surface.100}',
textColor: '{surface.700}',
textColorHover: '{surface.800}'
},
toggleIcon: {
color: '{surface.500}',
colorHover: '{surface.600}'
}
},
dark: {
root: {
background: '{surface.900}',
borderColor: '{surface.700}',
textColor: '{surface.0}'
},
legend: {
backgroundHover: '{surface.800}',
textColor: '{surface.0}',
textColorHover: '{surface.0}'
},
toggleIcon: {
color: '{surface.400}',
colorHover: '{surface.300}'
}
}
}
},
css: `
.p-fieldset {
border: 1px solid var(--p-dark-surface-700, var(--p-surface-200));
background: var(--p-dark-surface-900, var(--p-surface-0));
color: var(--p-dark-surface-0, var(--p-surface-700));
border-radius: 6px;
border: 1px solid var(--p-fieldset-border-color);
background: var(--p-fieldset-background);
color: var(--p-fieldset-text-color);
border-radius: var(--p-rounded-base);
padding: 0 1.125rem 1.125rem 1.125rem;
margin: 0;
}
@ -32,8 +68,8 @@ export default {
align-items: center;
justify-content: center;
padding: 0.5rem 0.75rem;
color: var(--p-dark-surface-0, var(--p-surface-700));
border-radius: 6px;
color: var(--p-legend-text-color);
border-radius: var(--p-rounded-base);
transition: background-color var(--p-transition-duration), color var(--p-transition-duration), outline-color var(--p-transition-duration);
outline-color: transparent;
}
@ -44,17 +80,17 @@ export default {
}
.p-fieldset-toggleable > .p-fieldset-legend > a:hover {
color: var(--p-dark-surface-0, var(--p-surface-800));
background: var(--p-dark-surface-800, var(--p-surface-100));
color: var(--p-fieldset-legend-text-color-hover);
background: var(--p-fieldset-legend-background-hover);
}
.p-fieldset-toggler {
color: var(--p-dark-surface-400, var(--p-surface-500));
color: var(--p-fieldset-toggle-icon-color);
transition: color var(--p-transition-duration);
}
.p-fieldset-toggleable > .p-fieldset-legend > a:hover > .p-fieldset-toggler {
color: var(--p-dark-surface-300, var(--p-surface-600));
color: var(--p-fieldset-toggle-icon-color-hover);
}
.p-fieldset .p-fieldset-content {

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

@ -13,6 +13,11 @@ import toolbar from 'primevue/theme/aura/toolbar';
export default {
primitive: {
rounded: {
sm: '4px',
base: '6px',
lg: '12px'
},
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' },
@ -46,11 +51,6 @@ export default {
color: '{primary.500}',
offset: '2px'
},
borderRadius: {
sm: '4px',
base: '6px',
lg: '12px',
},
anchorGutter: '2px',
maskBackground: 'rgba(0,0,0,0.4)',
primary: {
@ -86,10 +86,6 @@ export default {
color: '{primary.500}',
inverseColor: '#ffffff'
},
text: {
color: '{surface.700}',
secondaryColor: '{surface.500}'
},
highlight: {
background: '{primary.50}',
textColor: '{primary.700}'
@ -114,10 +110,6 @@ export default {
color: '{primary.400}',
inverseColor: '{surface.900}'
},
text: {
color: '{surface.0}',
secondaryColor: '{surface.400}'
},
highlight: {
background: 'color-mix(in srgb, {primary.400}, transparent 84%)',
textColor: 'rgba(255,255,255,.87)'

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

@ -3,9 +3,9 @@ export default {
colorScheme: {
light: {
root: {
borderColor: '{surface.200}',
background: '{surface.0}',
textColor: '{text.color}'
borderColor: '{surface.200}',
textColor: '{surface.700}'
},
headerIcon: {
color: '{surface.500}',
@ -15,9 +15,9 @@ export default {
},
dark: {
root: {
borderColor: '{surface.700}',
background: '{surface.900}',
textColor: '{text.color}'
borderColor: '{surface.700}',
textColor: '{surface.0}'
},
headerIcon: {
color: '{surface.400}',
@ -30,7 +30,7 @@ export default {
css: `
.p-panel {
border: 1px solid var(--p-panel-border-color);
border-radius: var(--p-border-radius-base);
border-radius: var(--p-rounded-base);
background: var(--p-panel-background);
color: var(--p-panel-text-color);
}

16
components/lib/theme/aura/scrollpanel/index.js
View File

@ -1,4 +1,18 @@
export default {
variables: {
colorScheme: {
light: {
bar: {
background: '{surface.100}'
}
},
dark: {
bar: {
background: '{surface.800}'
}
}
}
},
css: `
.p-scrollpanel-wrapper {
overflow: hidden;
@ -31,7 +45,7 @@ export default {
opacity: 0;
outline-color: transparent;
transition: outline-color var(--p-transition-duration);
background: var(--p-dark-surface-800, var(--p-surface-100));
background: var(--p-scrollpanel-bar-background);
border: 0 none;
transition: outline-color var(--p-transition-duration), opacity var(--p-transition-duration);
}

36
components/lib/theme/aura/splitter/index.js
View File

@ -1,12 +1,36 @@
export default {
variables: {
colorScheme: {
light: {
root: {
background: '{surface.0}',
borderColor: '{surface.200}',
textColor: '{surface.700}'
},
gutter: {
background: '{surface.200}'
}
},
dark: {
root: {
background: '{surface.900}',
borderColor: '{surface.700}',
textColor: '{surface.0}'
},
gutter: {
background: '{surface.700}'
}
}
}
},
css: `
.p-splitter {
display: flex;
flex-wrap: nowrap;
border: 1px solid var(--p-dark-surface-700, var(--p-surface-200));
background: var(--p-dark-surface-900, var(--p-surface-0));
border-radius: var(--p-border-radius);
color: var(--p-dark-surface-0, var(--p-surface-700));
border: 1px solid var(--p-splitter-border-color);
background: var(--p-splitter-background);
border-radius: var(--p-rounded-base);
color: var(--p-splitter-text-color);
}
.p-splitter-vertical {
@ -20,11 +44,11 @@ export default {
align-items: center;
justify-content: center;
z-index: 1;
background: var(--p-dark-surface-700, var(--p-surface-200));
background: var(--p-splitter-gutter-background);
}
.p-splitter-gutter-handle {
border-radius: var(--p-border-radius);
border-radius: var(--p-rounded-base);
background: transparent;
transition: outline-color var(--p-transition-duration);
outline-color: transparent;

72
components/lib/theme/aura/tabview/index.js
View File

@ -1,4 +1,50 @@
export default {
variables: {
colorScheme: {
light: {
nav: {
background: '{surface.0}',
borderColor: '{surface.200}'
},
header: {
borderColor: '{surface.200}',
textColor: '{surface.500}',
textColorHover: '{surface.700}'
},
navigatorIcon: {
background: '{surface.0}',
color: '{surface.500}',
colorHover: '{surface.700}',
boxShadow: '0px 0px 10px 50px rgba(255, 255, 255, 0.6)'
},
content: {
background: '{surface.0}',
textColor: '{surface.700}'
}
},
dark: {
nav: {
background: '{surface.900}',
borderColor: '{surface.700}'
},
header: {
borderColor: '{surface.700}',
textColor: '{surface.400}',
textColorHover: '{surface.0}'
},
navigatorIcon: {
background: '{surface.900}',
color: '{surface.400}',
colorHover: '{surface.0}',
boxShadow: '0px 0px 10px 50px color-mix(in srgb, var(--p-surface-900), transparent 50%)'
},
content: {
background: '{surface.900}',
textColor: '{surface.0}'
}
}
}
},
css: `
.p-tabview-nav-container {
position: relative;
@ -22,8 +68,8 @@ export default {
padding: 0;
list-style-type: none;
flex: 1 1 auto;
background: var(--p-dark-surface-900, var(--p-surface-0));
border: 1px solid var(--p-dark-surface-700, var(--p-surface-200));
background: var(--p-tabview-nav-background);
border: 1px solid var(--p-tabview-nav-border-color);
border-width: 0 0 1px 0;
position: relative;
}
@ -38,12 +84,12 @@ export default {
overflow: hidden;
border-style: solid;
border-width: 0 0 1px 0;
border-color: transparent transparent var(--p-dark-surface-700, var(--p-surface-200)) transparent;
color: var(--p-dark-surface-400, var(--p-surface-500));
border-color: transparent transparent var(--p-tabview-header-border-color) transparent;
color: var(--p-tabview-header-text-color);
padding: 1rem 1.125rem;
font-weight: 600;
border-top-right-radius: var(--p-border-radius);
border-top-left-radius: var(--p-border-radius);;
border-top-right-radius: var(--p-rounded-base);
border-top-left-radius: var(--p-rounded-base);
transition: color var(--p-transition-duration), outline-color var(--p-transition-duration);
margin: 0 0 -1px 0;
outline-color: transparent;
@ -55,7 +101,7 @@ export default {
}
.p-tabview-header:not(.p-highlight):not(.p-disabled):hover >.p-tabview-nav-link {
color: var(--p-dark-surface-0, var(--p-surface-700));
color: var(--p-tabview-header-text-color-hover);
}
.p-tabview-header.p-highlight > .p-tabview-nav-link {
@ -80,13 +126,13 @@ export default {
display: flex;
align-items: center;
justify-content: center;
background: var(--p-dark-surface-900, var(--p-surface-0));
color: var(--p-dark-surface-400, var(--p-surface-500));
background: var(--p-tabview-navigator-icon-background);
color: var(--p-tabview-navigator-icon-color);
width: 2.5rem;
border-radius: 0;
outline-color: transparent;
transition: color var(--p-transition-duration), outline-color var(--p-transition-duration);
box-shadow: 0px 0px 10px 50px color-mix(in srgb, var(--p-dark-surface-900, var(--p-surface-0)), transparent 50%);
box-shadow: var(--p-tabview-navigator-icon-box-shadow);
}
.p-tabview-nav-btn:focus-visible {
@ -95,7 +141,7 @@ export default {
}
.p-tabview-nav-btn:hover {
color: var(--p-dark-surface-0, var(--p-surface-700))
color: var(--p-tabview-navigator-icon-color-hover);
}
.p-tabview-nav-prev {
@ -111,9 +157,9 @@ export default {
}
.p-tabview-panels {
background: var(--p-dark-surface-900, var(--p-surface-0));
background: var(--p-tabview-content-background);
color: var(--p-tabview-content-text-color);
padding: 0.875rem 1.125rem 1.125rem 1.125rem;
color: var(--p-dark-surface-0, var(--p-surface-700))
}
.p-tabview-ink-bar {

26
components/lib/theme/aura/toolbar/index.js
View File

@ -1,4 +1,22 @@
export default {
variables: {
colorScheme: {
light: {
root: {
background: '{surface.0}',
borderColor: '{surface.200}',
textColor: '{surface.700}'
}
},
dark: {
root: {
background: '{surface.900}',
borderColor: '{surface.700}',
textColor: '{surface.0}'
}
}
}
},
css: `
.p-toolbar {
display: flex;
@ -6,10 +24,10 @@ export default {
justify-content: space-between;
flex-wrap: wrap;
padding: 0.75rem;
background: var(--p-dark-surface-900, var(--p-surface-0));
border: 1px solid var(--p-dark-surface-700, var(--p-surface-200));
color: var(--p-dark-surface-0, var(--p-surface-700));
border-radius: var(--p-border-radius);
background: var(--p-toolbar-background);
border: 1px solid var(--p-toolbar-border-color);
color: var(--p-toolbar-text-color);
border-radius: var(--p-rounded-base);
gap: 0.5rem;
}