Tokens for TieredMenu

This commit is contained in:
Cagatay Civici 2024-05-10 11:05:59 +03:00
parent 32c592b74e
commit 3cc7a5d44c
8 changed files with 145 additions and 65 deletions

View file

@ -184,6 +184,9 @@ export default {
submenuLabel: {
padding: '0.5rem 0.75rem',
fontWeight: '600'
},
submenuIcon: {
size: '0.875rem'
}
},
overlay: {
@ -304,16 +307,24 @@ export default {
navigation: {
item: {
focusBackground: '{surface.100}',
activeBackground: '{surface.100}',
color: '{text.color}',
focusColor: '{text.hover.color}',
activeColor: '{text.hover.color}',
icon: {
color: '{surface.400}',
focusColor: '{surface.500}'
focusColor: '{surface.500}',
activeColor: '{surface.500}',
}
},
submenuLabel: {
background: '{surface.0}',
color: '{text.muted.color}'
},
submenuIcon: {
color: '{surface.400}',
focusColor: '{surface.500}',
activeColor: '{surface.500}'
}
}
},
@ -415,16 +426,24 @@ export default {
navigation: {
item: {
focusBackground: '{surface.800}',
activeBackground: '{surface.800}',
color: '{text.color}',
focusColor: '{text.hover.color}',
activeColor: '{text.hover.color}',
icon: {
color: '{surface.500}',
focusColor: '{surface.400}'
focusColor: '{surface.400}',
activeColor: '{surface.400}'
}
},
submenuLabel: {
background: '{surface.900}',
color: '{text.muted.color}'
},
submenuIcon: {
color: '{surface.500}',
focusColor: '{surface.400}',
activeColor: '{surface.400}'
}
}
}

View file

@ -3,11 +3,13 @@ export default {
background: '{content.background}',
borderColor: '{content.border.color}',
color: '{content.color}',
padding: '{navigation.list.padding}',
borderRadius: '{content.border.radius}',
gap: '{navigation.list.gap}',
shadow: '{overlay.navigation.shadow}'
},
list: {
padding: '{navigation.list.padding}',
gap: '{navigation.list.gap}'
},
item: {
focusBackground: '{navigation.item.focus.background}',
color: '{navigation.item.color}',

View file

@ -2,19 +2,40 @@ export default {
root: {
background: '{content.background}',
borderColor: '{content.border.color}',
color: '{content.color}'
color: '{content.color}',
borderRadius: '{content.border.radius}',
shadow: '{overlay.navigation.shadow}'
},
list: {
padding: '{navigation.list.padding}',
gap: '{navigation.list.gap}'
},
item: {
focusBackground: '{navigation.item.focus.background}',
activeBackground: '{navigation.item.active.background}',
color: '{navigation.item.color}',
focusColor: '{navigation.item.focus.color}',
activeColor: '{navigation.item.active.color}',
padding: '{navigation.item.padding}',
borderRadius: '{navigation.item.border.radius}',
gap: '{navigation.item.gap}',
icon: {
color: '{navigation.item.icon.color}',
hoverColor: '{navigation.item.icon.hover.color}'
focusColor: '{navigation.item.icon.focus.color}',
focusColor: '{navigation.item.icon.active.color}'
}
},
submenuItem: {
color: '{navigation.submenu.color}'
submenuLabel: {
padding: '{navigation.submenu.label.padding}',
fontWeight: '{navigation.submenu.label.font.weight}',
bakcground: '{navigation.submenu.label.background.}',
color: '{navigation.submenu.label.color}'
},
submenuIcon: {
size: '{navigation.submenu.icon.size}',
color: '{navigation.submenu.icon.color}',
focusColor: '{navigation.submenu.icon.focus.color}',
focusColor: '{navigation.submenu.icon.active.color}'
},
separator: {
borderColor: '{content.border.color}'

View file

@ -183,6 +183,9 @@ export default {
submenuLabel: {
padding: '0.625rem 1rem',
fontWeight: '600'
},
submenuIcon: {
size: '0.875rem'
}
},
overlay: {
@ -306,16 +309,24 @@ export default {
navigation: {
item: {
focusBackground: '{surface.100}',
activeBackground: '{surface.100}',
color: '{text.color}',
focusColor: '{text.hover.color}',
activeColor: '{text.hover.color}',
icon: {
color: '{surface.400}',
focusColor: '{surface.500}'
focusColor: '{surface.500}',
activeColor: '{surface.500}'
}
},
submenuLabel: {
background: '{surface.0}',
color: '{text.color}'
},
submenuIcon: {
color: '{surface.400}',
focusColor: '{surface.500}',
activeColor: '{surface.500}'
}
}
},
@ -420,16 +431,24 @@ export default {
navigation: {
item: {
focusBackground: '{surface.800}',
activeBackground: '{surface.800}',
color: '{text.color}',
focusColor: '{text.hover.color}',
activeColor: '{text.hover.color}',
icon: {
color: '{surface.500}',
focusColor: '{surface.400}'
focusColor: '{surface.400}',
activeColor: '{surface.400}'
}
},
submenuLabel: {
background: '{surface.900}',
color: '{text.color}'
},
submenuIcon: {
color: '{surface.500}',
focusColor: '{surface.400}',
activeColor: '{surface.400}'
}
}
}

View file

@ -3,11 +3,13 @@ export default {
background: '{content.background}',
borderColor: '{content.border.color}',
color: '{content.color}',
padding: '{navigation.list.padding}',
borderRadius: '{content.border.radius}',
gap: '{navigation.list.gap}',
shadow: '{overlay.navigation.shadow}'
},
list: {
padding: '{navigation.list.padding}',
gap: '{navigation.list.gap}'
},
item: {
focusBackground: '{navigation.item.focus.background}',
color: '{navigation.item.color}',
@ -23,7 +25,7 @@ export default {
submenuLabel: {
padding: '{navigation.submenu.label.padding}',
fontWeight: '{navigation.submenu.label.font.weight}',
bakcground: '{navigation.submenu.label.background.}',
background: '{navigation.submenu.label.background.}',
color: '{navigation.submenu.label.color}'
},
separator: {

View file

@ -2,19 +2,40 @@ export default {
root: {
background: '{content.background}',
borderColor: '{content.border.color}',
color: '{content.color}'
color: '{content.color}',
borderRadius: '{content.border.radius}',
shadow: '{overlay.navigation.shadow}'
},
list: {
padding: '{navigation.list.padding}',
gap: '{navigation.list.gap}'
},
item: {
focusBackground: '{navigation.item.focus.background}',
activeBackground: '{navigation.item.active.background}',
color: '{navigation.item.color}',
focusColor: '{navigation.item.focus.color}',
activeColor: '{navigation.item.active.color}',
padding: '{navigation.item.padding}',
borderRadius: '{navigation.item.border.radius}',
gap: '{navigation.item.gap}',
icon: {
color: '{navigation.item.icon.color}',
hoverColor: '{navigation.item.icon.hover.color}'
focusColor: '{navigation.item.icon.focus.color}',
focusColor: '{navigation.item.icon.active.color}'
}
},
submenuItem: {
color: '{navigation.submenu.color}'
submenuLabel: {
padding: '{navigation.submenu.label.padding}',
fontWeight: '{navigation.submenu.label.font.weight}',
bakcground: '{navigation.submenu.label.background.}',
color: '{navigation.submenu.label.color}'
},
submenuIcon: {
size: '{navigation.submenu.icon.size}',
color: '{navigation.submenu.icon.color}',
focusColor: '{navigation.submenu.icon.focus.color}',
focusColor: '{navigation.submenu.icon.active.color}'
},
separator: {
borderColor: '{content.border.color}'