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

Refactored tokens of panel components

pull/5701/head
Cagatay Civici 2024-05-04 14:47:06 +03:00
parent 3e0c68734f
commit 4bdc38e892
17 changed files with 190 additions and 326 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/lib/accordion/style/AccordionStyle.js
View File

@ -4,7 +4,7 @@ const theme = ({ dt }) => `
.p-accordionpanel { .p-accordionpanel {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-bottom: 1px solid ${dt('accordion.content.border.color')}; border-bottom: 1px solid ${dt('accordion.panel.border.color')};
} }
.p-accordionpanel:last-child { .p-accordionpanel:last-child {

1
components/lib/fieldset/style/FieldsetStyle.js
View File

@ -11,6 +11,7 @@ const theme = ({ dt }) => `
} }
.p-fieldset-legend { .p-fieldset-legend {
background: ${dt('fieldset.legend.background')};
font-weight: 600; font-weight: 600;
border-radius: 6px; border-radius: 6px;
border: 0 none; border: 0 none;

25
components/lib/stepper/style/StepperStyle.js
View File

@ -52,7 +52,7 @@ const theme = ({ dt }) => `
text-overflow: ellipsis; text-overflow: ellipsis;
max-width: 100%; max-width: 100%;
margin-left: 0.5rem; margin-left: 0.5rem;
color: ${dt('stepper.title.color')}; color: ${dt('stepper.item.title.color')};
font-weight: 500; font-weight: 500;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, border-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
} }
@ -62,10 +62,10 @@ const theme = ({ dt }) => `
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: relative; position: relative;
color: ${dt('stepper.marker.color')}; color: ${dt('stepper.item.number.color')};
border: 1px solid ${dt('stepper.marker.border.color')}; border: 1px solid ${dt('stepper.item.number.border.color')};
border-width: 2px; border-width: 2px;
background: ${dt('stepper.marker.background')}; background: ${dt('stepper.item.number.background')};
min-width: 2rem; min-width: 2rem;
height: 2rem; height: 2rem;
line-height: 2rem; line-height: 2rem;
@ -88,12 +88,12 @@ const theme = ({ dt }) => `
} }
.p-stepper-item-active .p-stepper-item-number { .p-stepper-item-active .p-stepper-item-number {
background: ${dt('stepper.marker.active.background')}; background: ${dt('stepper.item.number.active.background')};
color: ${dt('stepper.marker.active.color')}; color: ${dt('stepper.item.number.active.color')};
} }
.p-stepper-item-active .p-stepper-item-title { .p-stepper-item-active .p-stepper-item-title {
color: ${dt('stepper.title.active.color')}; color: ${dt('stepper.item.title.active.color')};
} }
.p-stepper-item:not(.p-disabled):focus-visible { .p-stepper-item:not(.p-disabled):focus-visible {
@ -102,12 +102,12 @@ const theme = ({ dt }) => `
} }
.p-stepper-item:has(~ .p-stepper-item-active) .p-stepper-separator { .p-stepper-item:has(~ .p-stepper-item-active) .p-stepper-separator {
background: ${dt('stepper.connector.active.background')}; background: ${dt('stepper.separator.active.background')};
} }
.p-stepper-separator { .p-stepper-separator {
flex: 1 1 0; flex: 1 1 0;
background: ${dt('stepper.connector.background')}; background: ${dt('stepper.separator.background')};
width: 100%; width: 100%;
height: 2px; height: 2px;
margin-inline-start: 1rem; margin-inline-start: 1rem;
@ -115,11 +115,14 @@ const theme = ({ dt }) => `
} }
.p-stepper-panels { .p-stepper-panels {
background: ${dt('stepper.content.background')};
color: ${dt('stepper.content.color')};
padding: 0.875rem 1.125rem 1.125rem 1.125rem; padding: 0.875rem 1.125rem 1.125rem 1.125rem;
} }
.p-stepper-panel-content {
background: ${dt('stepper.panel.content.background')};
color: ${dt('stepper.panel.content.color')};
}
.p-stepper-vertical .p-stepper-list { .p-stepper-vertical .p-stepper-list {
flex-direction: column; flex-direction: column;
} }

4
components/lib/tablist/style/TabListStyle.js
View File

@ -10,8 +10,8 @@ const classes = {
], ],
tabs: 'p-tablist-tab-list', tabs: 'p-tablist-tab-list',
inkbar: 'p-tablist-active-bar', inkbar: 'p-tablist-active-bar',
previousButton: 'p-tablist-prev-button', previousButton: 'p-tablist-prev-button p-tablist-nav-button',
nextButton: 'p-tablist-next-button' nextButton: 'p-tablist-next-button p-tablist-nav-button'
}; };
export default BaseStyle.extend({ export default BaseStyle.extend({

35
components/lib/tabs/style/TabsStyle.js
View File

@ -29,13 +29,12 @@ const theme = ({ dt }) => `
.p-tablist-tab-list { .p-tablist-tab-list {
position: relative; position: relative;
display: flex; display: flex;
background: ${dt('tabs.nav.background')}; background: ${dt('tabs.tab.list.background')};
border: 1px solid ${dt('tabs.nav.border.color')}; border: 1px solid ${dt('tabs.tab.list.border.color')};
border-width: 0 0 1px 0; border-width: 0 0 1px 0;
} }
.p-tablist-prev-button, .p-tablist-nav-button {
.p-tablist-next-button {
all: unset; all: unset;
position: absolute; position: absolute;
top: 0; top: 0;
@ -44,23 +43,21 @@ const theme = ({ dt }) => `
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: ${dt('tabs.navigator.icon.background')}; background: ${dt('tabs.nav.button.background')};
color: ${dt('tabs.navigator.icon.color')}; color: ${dt('tabs.nav.button.color')};
width: 2.5rem; width: 2.5rem;
transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
box-shadow: ${dt('tabs.navigator.icon.box.shadow')}; box-shadow: ${dt('tabs.nav.button.box.shadow')};
cursor: pointer; cursor: pointer;
} }
.p-tablist-prev-button:focus-visible, .p-tablist-nav-button:focus-visible {
.p-tablist-next-button:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')}; outline-offset: ${dt('focus.ring.offset')};
} }
.p-tablist-prev-button:hover, .p-tablist-nav-button:hover {
.p-tablist-next-button:hover { color: ${dt('tabs.nav.button.hover.color')};
color: ${dt('tabs.navigator.icon.hover.color')};
} }
.p-tablist-prev-button { .p-tablist-prev-button {
@ -75,8 +72,8 @@ const theme = ({ dt }) => `
cursor: pointer; cursor: pointer;
border-style: solid; border-style: solid;
border-width: 0 0 1px 0; border-width: 0 0 1px 0;
border-color: transparent transparent ${dt('tabs.header.border.color')} transparent; border-color: transparent transparent ${dt('tabs.tab.border.color')} transparent;
color: ${dt('tabs.header.color')}; color: ${dt('tabs.tab.color')};
background: ${dt('tabs.nav.background')}; background: ${dt('tabs.nav.background')};
padding: 1rem 1.125rem; padding: 1rem 1.125rem;
font-weight: 600; font-weight: 600;
@ -95,16 +92,16 @@ const theme = ({ dt }) => `
} }
.p-tab:not(.p-tab-active):not(.p-disabled):hover { .p-tab:not(.p-tab-active):not(.p-disabled):hover {
color: ${dt('tabs.header.hover.color')}; color: ${dt('tabs.tab.hover.color')};
} }
.p-tab-active { .p-tab-active {
color: ${dt('tabs.header.active.color')}; color: ${dt('tabs.tab.active.color')};
} }
.p-tabpanels { .p-tabpanels {
background: ${dt('tabs.navigator.content.background')}; background: ${dt('tabs.tab.panel.background')};
color: ${dt('tabs.navigator.content.color')}; color: ${dt('tabs.tab.panel.color')};
padding: 0.875rem 1.125rem 1.125rem 1.125rem; padding: 0.875rem 1.125rem 1.125rem 1.125rem;
} }
@ -114,7 +111,7 @@ const theme = ({ dt }) => `
position: absolute; position: absolute;
bottom: -1px; bottom: -1px;
height: 1px; height: 1px;
background-color: ${dt('tabs.header.active.border.color')}; background-color: ${dt('tabs.tab.active.border.color')};
transition: 250ms cubic-bezier(0.35, 0, 0.25, 1); transition: 250ms cubic-bezier(0.35, 0, 0.25, 1);
} }
`; `;

26
components/lib/tabview/style/TabViewStyle.js
View File

@ -27,8 +27,8 @@ const theme = ({ dt }) => `
padding: 0; padding: 0;
list-style-type: none; list-style-type: none;
flex: 1 1 auto; flex: 1 1 auto;
background: ${dt('tabview.nav.background')}; background: ${dt('tabview.tab.list.background')};
border: 1px solid ${dt('tabview.nav.border.color')}; border: 1px solid ${dt('tabview.tab.list.border.color')};
border-width: 0 0 1px 0; border-width: 0 0 1px 0;
position: relative; position: relative;
} }
@ -43,8 +43,8 @@ const theme = ({ dt }) => `
overflow: hidden; overflow: hidden;
border-style: solid; border-style: solid;
border-width: 0 0 1px 0; border-width: 0 0 1px 0;
border-color: transparent transparent ${dt('tabview.header.border.color')} transparent; border-color: transparent transparent ${dt('tabview.tab.border.color')} transparent;
color: ${dt('tabview.header.color')}; color: ${dt('tabview.tab.color')};
padding: 1rem 1.125rem; padding: 1rem 1.125rem;
font-weight: 600; font-weight: 600;
border-top-right-radius: ${dt('rounded.base')}; border-top-right-radius: ${dt('rounded.base')};
@ -60,11 +60,11 @@ const theme = ({ dt }) => `
} }
.p-tabview-tablist-item:not(.p-highlight):not(.p-disabled):hover > .p-tabview-tab-header { .p-tabview-tablist-item:not(.p-highlight):not(.p-disabled):hover > .p-tabview-tab-header {
color: ${dt('tabview.header.hover.color')}; color: ${dt('tabview.tab.hover.color')};
} }
.p-tabview-tablist-item.p-highlight > .p-tabview-tab-header { .p-tabview-tablist-item.p-highlight > .p-tabview-tab-header {
color: ${dt('tabview.header.active.color')}; color: ${dt('tabview.tab.active.color')};
} }
.p-tabview-tab-title { .p-tabview-tab-title {
@ -83,13 +83,13 @@ const theme = ({ dt }) => `
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: ${dt('tabview.navigator.icon.background')}; background: ${dt('tabview.nav.button.background')};
color: ${dt('tabview.navigator.icon.color')}; color: ${dt('tabview.nav.button.color')};
width: 2.5rem; width: 2.5rem;
border-radius: 0; border-radius: 0;
outline-color: transparent; outline-color: transparent;
transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
box-shadow: ${dt('tabview.navigator.icon.box.shadow')}; box-shadow: ${dt('tabview.nav.button.box.shadow')};
border: none; border: none;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
@ -103,7 +103,7 @@ const theme = ({ dt }) => `
.p-tabview-next-button:hover, .p-tabview-next-button:hover,
.p-tabview-prev-button:hover { .p-tabview-prev-button:hover {
color: ${dt('tabview.navigator.icon.hover.color')}; color: ${dt('tabview.nav.button.hover.color')};
} }
.p-tabview-prev-button { .p-tabview-prev-button {
@ -115,8 +115,8 @@ const theme = ({ dt }) => `
} }
.p-tabview-panels { .p-tabview-panels {
background: ${dt('tabview.navigator.content.background')}; background: ${dt('tabview.tab.panel.background')};
color: ${dt('tabview.navigator.content.color')}; color: ${dt('tabview.tab.panel.color')};
padding: 0.875rem 1.125rem 1.125rem 1.125rem; padding: 0.875rem 1.125rem 1.125rem 1.125rem;
} }
@ -126,7 +126,7 @@ const theme = ({ dt }) => `
position: absolute; position: absolute;
bottom: -1px; bottom: -1px;
height: 1px; height: 1px;
background-color: ${dt('tabview.header.active.border.color')}; background-color: ${dt('tabview.tab.active.border.color')};
transition: 250ms cubic-bezier(0.35, 0, 0.25, 1); transition: 250ms cubic-bezier(0.35, 0, 0.25, 1);
} }
`; `;

39
components/lib/themes/aura/accordion/index.js
View File

@ -1,30 +1,15 @@
export default { export default {
colorScheme: { panel: {
light: { borderColor: '{content.border.color}'
header: { },
background: '{surface.0}', header: {
color: '{surface.500}', background: '{content.background}',
hoverColor: '{surface.700}', color: '{text.muted.color}',
activeColor: '{surface.700}' hoverColor: '{text.color}',
}, activeColor: '{text.color}'
content: { },
background: '{surface.0}', content: {
borderColor: '{surface.200}', background: '{content.background}',
color: '{surface.700}' color: '{text.color}'
}
},
dark: {
header: {
background: '{surface.900}',
color: '{surface.400}',
hoverColor: '{surface.0}',
activeColor: '{surface.0}'
},
content: {
background: '{surface.900}',
borderColor: '{surface.700}',
color: '{surface.0}'
}
}
} }
}; };

25
components/lib/themes/aura/card/index.js
View File

@ -1,22 +1,9 @@
export default { export default {
colorScheme: { root: {
light: { background: '{content.background}',
root: { color: '{text.color}'
background: '{surface.0}', },
color: '{surface.700}' subtitle: {
}, color: '{text.muted.color}'
subtitle: {
color: '{surface.500}'
}
},
dark: {
root: {
background: '{surface.900}',
color: '{surface.0}'
},
subtitle: {
color: '{surface.400}'
}
}
} }
}; };

25
components/lib/themes/aura/divider/index.js
View File

@ -1,22 +1,9 @@
export default { export default {
colorScheme: { root: {
light: { borderColor: '{content.border.color}'
root: { },
borderColor: '{surface.200}' content: {
}, background: '{content.background}',
content: { color: '{text.color}'
background: '{surface.0}',
color: '{surface.700}'
}
},
dark: {
root: {
borderColor: '{surface.700}'
},
content: {
background: '{surface.900}',
color: '{surface.0}'
}
}
} }
}; };

47
components/lib/themes/aura/fieldset/index.js
View File

@ -1,36 +1,17 @@
export default { export default {
colorScheme: { root: {
light: { background: '{content.background}',
root: { borderColor: '{content.border.color}',
background: '{surface.0}', color: '{content.color}'
borderColor: '{surface.200}', },
color: '{surface.700}' legend: {
}, background: '{content.background}',
legend: { color: '{content.color}',
color: '{surface.700}', hoverBackground: '{content.hover.background}',
hoverBackground: '{surface.100}', hoverColor: '{content.hover.color}'
hoverColor: '{surface.800}' },
}, toggleIcon: {
toggleIcon: { color: '{text.muted.color}',
color: '{surface.500}', hoverColor: '{text.hover.muted.color}'
hoverColor: '{surface.600}'
}
},
dark: {
root: {
background: '{surface.900}',
borderColor: '{surface.700}',
color: '{surface.0}'
},
legend: {
color: '{surface.0}',
hoverBackground: '{surface.800}',
hoverColor: '{surface.0}'
},
toggleIcon: {
color: '{surface.400}',
hoverColor: '{surface.300}'
}
}
} }
}; };

26
components/lib/themes/aura/index.js
View File

@ -182,6 +182,19 @@ export default {
floatLabelFocusColor: '{surface.500}', floatLabelFocusColor: '{surface.500}',
floatLabelInvalidColor: '{red.400}', floatLabelInvalidColor: '{red.400}',
boxShadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)' boxShadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)'
},
text: {
color: '{surface.700}',
hoverColor: '{surface.800}',
mutedColor: '{surface.500}',
hoverMutedColor: '{surface.600}'
},
content: {
background: '{surface.0}',
hoverBackground: '{surface.100}',
borderColor: '{surface.200}',
color: '{text.color}',
hoverColor: '{text.hover.color}'
} }
}, },
dark: { dark: {
@ -228,6 +241,19 @@ export default {
floatLabelFocusColor: '{surface.400}', floatLabelFocusColor: '{surface.400}',
floatLabelInvalidColor: '{red.300}', floatLabelInvalidColor: '{red.300}',
boxShadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)' boxShadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)'
},
text: {
color: '{surface.0}',
hoverColor: '{surface.0}',
mutedColor: '{surface.400}',
hoverMutedColor: '{surface.300}'
},
content: {
background: '{surface.900}',
hoverBackground: '{surface.800}',
borderColor: '{surface.700}',
color: '{text.color}',
hoverColor: '{text.hover.color}'
} }
} }
} }

29
components/lib/themes/aura/panel/index.js
View File

@ -1,28 +1,7 @@
export default { export default {
colorScheme: { root: {
light: { background: '{content.background}',
root: { borderColor: '{content.border.color}',
background: '{surface.0}', color: '{text.color}'
borderColor: '{surface.200}',
color: '{surface.700}'
},
headerIcon: {
color: '{surface.500}',
hoverColor: '{surface.600}',
hoverBackground: '{surface.100}'
}
},
dark: {
root: {
background: '{surface.900}',
borderColor: '{surface.700}',
color: '{surface.0}'
},
headerIcon: {
color: '{surface.400}',
hoverColor: '{surface.300}',
hoverBackground: '{surface.800}'
}
}
} }
}; };

28
components/lib/themes/aura/splitter/index.js
View File

@ -1,24 +1,10 @@
export default { export default {
colorScheme: { root: {
light: { background: '{content.background}',
root: { borderColor: '{content.border.color}',
background: '{surface.0}', color: '{content.color}'
borderColor: '{surface.200}', },
color: '{surface.700}' gutter: {
}, background: '{content.border.color}'
gutter: {
background: '{surface.200}'
}
},
dark: {
root: {
background: '{surface.900}',
borderColor: '{surface.700}',
color: '{surface.0}'
},
gutter: {
background: '{surface.700}'
}
}
} }
}; };

61
components/lib/themes/aura/stepper/index.js
View File

@ -1,46 +1,21 @@
export default { export default {
colorScheme: { separator: {
light: { background: '{content.border.color}',
connector: { activeBackground: '{primary.color}'
background: '{surface.200}', },
activeBackground: '{primary.color}' itemTitle: {
}, color: '{text.color}',
title: { activeColor: '{primary.color}'
color: '{surface.700}', },
activeColor: '{primary.color}' itemNumber: {
}, background: '{content.background}',
marker: { activeBackground: '{content.background}',
background: '{surface.0}', borderColor: '{content.border.color}',
activeBackground: '{surface.0}', color: '{text.muted.color}',
borderColor: '{surface.200}', activeColor: '{primary.color}'
color: '{surface.500}', },
activeColor: '{primary.color}' panelContent: {
}, background: '{content.background}',
content: { color: '{content.color}'
background: '{surface.0}',
color: '{surface.700}'
}
},
dark: {
connector: {
background: '{surface.700}',
activeBackground: '{primary.color}'
},
title: {
color: '{surface.0}',
activeColor: '{primary.color}'
},
marker: {
background: '{surface.900}',
activeBackground: '{surface.900}',
borderColor: '{surface.700}',
color: '{surface.400}',
activeColor: '{primary.color}'
},
content: {
background: '{surface.900}',
color: '{surface.0}'
}
}
} }
}; };

62
components/lib/themes/aura/tabs/index.js
View File

@ -1,49 +1,33 @@
export default { export default {
tabList: {
background: '{content.background}',
borderColor: '{content.border.color}'
},
tab: {
borderColor: '{content.border.color}',
activeBorderColor: '{primary.color}',
color: '{text.muted.color}',
hoverColor: '{text.color}',
activeColor: '{primary.color}'
},
tabPanel: {
background: '{content.background}',
color: '{content.color}'
},
navButton: {
background: '{content.background}',
color: '{text.muted.color}',
hoverColor: '{text.color}'
},
colorScheme: { colorScheme: {
light: { light: {
nav: { navButton: {
background: '{surface.0}',
borderColor: '{surface.200}'
},
header: {
borderColor: '{surface.200}',
activeBorderColor: '{primary.color}',
color: '{surface.500}',
hoverColor: '{surface.700}',
activeColor: '{primary.color}'
},
navigatorIcon: {
background: '{surface.0}',
color: '{surface.500}',
hoverColor: '{surface.700}',
boxShadow: '0px 0px 10px 50px rgba(255, 255, 255, 0.6)' boxShadow: '0px 0px 10px 50px rgba(255, 255, 255, 0.6)'
},
content: {
background: '{surface.0}',
color: '{surface.700}'
} }
}, },
dark: { dark: {
nav: { navButton: {
background: '{surface.900}', boxShadow: '0px 0px 10px 50px color-mix(in srgb, {content.background}, transparent 50%)'
borderColor: '{surface.700}'
},
header: {
borderColor: '{surface.700}',
activeBorderColor: '{primary.color}',
color: '{surface.400}',
hoverColor: '{surface.0}',
activeColor: '{primary.color}'
},
navigatorIcon: {
background: '{surface.900}',
color: '{surface.400}',
hoverColor: '{surface.0}',
boxShadow: '0px 0px 10px 50px color-mix(in srgb, {surface.900}, transparent 50%)'
},
content: {
background: '{surface.900}',
color: '{surface.0}'
} }
} }
} }

62
components/lib/themes/aura/tabview/index.js
View File

@ -1,49 +1,33 @@
export default { export default {
tabList: {
background: '{content.background}',
borderColor: '{content.border.color}'
},
tab: {
borderColor: '{content.border.color}',
activeBorderColor: '{primary.color}',
color: '{text.muted.color}',
hoverColor: '{text.color}',
activeColor: '{primary.color}'
},
tabPanel: {
background: '{content.background}',
color: '{content.color}'
},
navButton: {
background: '{content.background}',
color: '{text.muted.color}',
hoverColor: '{text.color}'
},
colorScheme: { colorScheme: {
light: { light: {
nav: { navButton: {
background: '{surface.0}',
borderColor: '{surface.200}'
},
header: {
borderColor: '{surface.200}',
activeBorderColor: '{primary.color}',
color: '{surface.500}',
hoverColor: '{surface.700}',
activeColor: '{primary.color}'
},
navigatorIcon: {
background: '{surface.0}',
color: '{surface.500}',
hoverColor: '{surface.700}',
boxShadow: '0px 0px 10px 50px rgba(255, 255, 255, 0.6)' boxShadow: '0px 0px 10px 50px rgba(255, 255, 255, 0.6)'
},
content: {
background: '{surface.0}',
color: '{surface.700}'
} }
}, },
dark: { dark: {
nav: { navButton: {
background: '{surface.900}', boxShadow: '0px 0px 10px 50px color-mix(in srgb, {content.background}, transparent 50%)'
borderColor: '{surface.700}'
},
header: {
borderColor: '{surface.700}',
activeBorderColor: '{primary.color}',
color: '{surface.400}',
hoverColor: '{surface.0}',
activeColor: '{primary.color}'
},
navigatorIcon: {
background: '{surface.900}',
color: '{surface.400}',
hoverColor: '{surface.0}',
boxShadow: '0px 0px 10px 50px color-mix(in srgb, {surface.900}, transparent 50%)'
},
content: {
background: '{surface.900}',
color: '{surface.0}'
} }
} }
} }

19
components/lib/themes/aura/toolbar/index.js
View File

@ -1,18 +1,7 @@
export default { export default {
colorScheme: { root: {
light: { background: '{content.background}',
root: { borderColor: '{content.border.color}',
background: '{surface.0}', color: '{content.color}'
borderColor: '{surface.200}',
color: '{surface.700}'
}
},
dark: {
root: {
background: '{surface.900}',
borderColor: '{surface.700}',
color: '{surface.0}'
}
}
} }
}; };