Tokens for Tabs
Cagatay Civici
parent
087ea35527
commit
51d7871594
|
|
@ -32,8 +32,6 @@ const theme = ({ dt }) => `
|
|||
color: ${dt('tabmenu.item.color')};
|
||||
padding: ${dt('tabmenu.item.padding')};
|
||||
font-weight: ${dt('tabmenu.item.font.weight')};
|
||||
border-top-right-radius: ${dt('tabmenu.item.border.radius')};
|
||||
border-top-left-radius: ${dt('tabmenu.item.border.radius')};
|
||||
transition: background ${dt('transition.duration')}, border-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
|
||||
margin: ${dt('tabmenu.item.margin')};
|
||||
outline-color: transparent;
|
||||
|
|
@ -41,6 +39,7 @@ const theme = ({ dt }) => `
|
|||
}
|
||||
|
||||
.p-tabmenu-item-link:focus-visible {
|
||||
z-index: 1;
|
||||
box-shadow: ${dt('tabmenu.item.focus.ring.shadow')};
|
||||
outline: ${dt('tabmenu.item.focus.ring.width')} ${dt('tabmenu.item.focus.ring.style')} ${dt('tabmenu.item.focus.ring.color')};
|
||||
outline-offset: ${dt('tabmenu.item.focus.ring.offset')};
|
||||
|
|
|
|||
|
|
@ -29,9 +29,10 @@ const theme = ({ dt }) => `
|
|||
.p-tablist-tab-list {
|
||||
position: relative;
|
||||
display: flex;
|
||||
background: ${dt('tabs.tab.list.background')};
|
||||
border: 1px solid ${dt('tabs.tab.list.border.color')};
|
||||
border-width: 0 0 1px 0;
|
||||
background: ${dt('tabs.tablist.background')};
|
||||
border-style: solid;
|
||||
border-color: ${dt('tabs.tablist.border.color')};
|
||||
border-width: ${dt('tabs.tablist.border.width')};
|
||||
}
|
||||
|
||||
.p-tablist-nav-button {
|
||||
|
|
@ -45,15 +46,18 @@ const theme = ({ dt }) => `
|
|||
justify-content: center;
|
||||
background: ${dt('tabs.nav.button.background')};
|
||||
color: ${dt('tabs.nav.button.color')};
|
||||
width: 2.5rem;
|
||||
transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
|
||||
width: ${dt('tabs.nav.button.width')};
|
||||
transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
|
||||
box-shadow: ${dt('tabs.nav.button.shadow')};
|
||||
outline-color: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.p-tablist-nav-button:focus-visible {
|
||||
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
|
||||
outline-offset: ${dt('focus.ring.offset')};
|
||||
z-index: 1;
|
||||
box-shadow: ${dt('tabs.nav.button.focus.ring.shadow')};
|
||||
outline: ${dt('tabs.nav.button.focus.ring.width')} ${dt('tabs.nav.button.focus.ring.style')} ${dt('tabs.nav.button.focus.ring.color')};
|
||||
outline-offset: ${dt('tabs.nav.button.focus.ring.offset')};
|
||||
}
|
||||
|
||||
.p-tablist-nav-button:hover {
|
||||
|
|
@ -69,51 +73,55 @@ const theme = ({ dt }) => `
|
|||
}
|
||||
|
||||
.p-tab {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
border-style: solid;
|
||||
border-width: 0 0 1px 0;
|
||||
border-color: transparent transparent ${dt('tabs.tab.border.color')} transparent;
|
||||
color: ${dt('tabs.tab.color')};
|
||||
background: ${dt('tabs.nav.background')};
|
||||
padding: 1rem 1.125rem;
|
||||
font-weight: 600;
|
||||
border-top-right-radius: ${dt('border.radius.md')};
|
||||
border-top-left-radius: ${dt('border.radius.md')};
|
||||
transition: color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
|
||||
margin: 0 0 -1px 0;
|
||||
outline-color: transparent;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
background: ${dt('tabs.tab.background')};
|
||||
border-width: ${dt('tabs.tab.border.width')};
|
||||
border-color: ${dt('tabs.tab.border.color')};
|
||||
color: ${dt('tabs.tab.color')};
|
||||
padding: ${dt('tabs.tab.padding')};
|
||||
font-weight: ${dt('tabs.tab.font.weight')};
|
||||
transition: background ${dt('transition.duration')}, border-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}, box-shadow ${dt('transition.duration')};
|
||||
margin: ${dt('tabs.tab.margin')};
|
||||
outline-color: transparent;
|
||||
}
|
||||
|
||||
.p-tab:not(.p-disabled):focus-visible {
|
||||
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
|
||||
outline-offset: -1px;
|
||||
z-index: 1;
|
||||
box-shadow: ${dt('tabs.tab.focus.ring.shadow')};
|
||||
outline: ${dt('tabs.tab.focus.ring.width')} ${dt('tabs.tab.focus.ring.style')} ${dt('tabs.tab.focus.ring.color')};
|
||||
outline-offset: ${dt('tabs.tab.focus.ring.offset')};
|
||||
}
|
||||
|
||||
.p-tab:not(.p-tab-active):not(.p-disabled):hover {
|
||||
background: ${dt('tabs.tab.hover.background')};
|
||||
border-color: ${dt('tabs.tab.hover.border.color')};
|
||||
color: ${dt('tabs.tab.hover.color')};
|
||||
}
|
||||
|
||||
.p-tab-active {
|
||||
background: ${dt('tabs.tab.active.background')};
|
||||
border-color: ${dt('tabs.tab.active.border.color')};
|
||||
color: ${dt('tabs.tab.active.color')};
|
||||
}
|
||||
|
||||
.p-tabpanels {
|
||||
background: ${dt('tabs.tab.panel.background')};
|
||||
color: ${dt('tabs.tab.panel.color')};
|
||||
padding: 0.875rem 1.125rem 1.125rem 1.125rem;
|
||||
background: ${dt('tabs.tabpanel.background')};
|
||||
color: ${dt('tabs.tabpanel.color')};
|
||||
padding: ${dt('tabs.tabpanel.padding')};
|
||||
outline: 0 none;
|
||||
}
|
||||
|
||||
.p-tablist-active-bar {
|
||||
z-index: 1;
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
height: 1px;
|
||||
background-color: ${dt('tabs.tab.active.border.color')};
|
||||
bottom: ${dt('tabs.active.bar.bottom')};
|
||||
height: ${dt('tabs.active.bar.height')};
|
||||
background: ${dt('tabs.active.bar.background')};
|
||||
transition: 250ms cubic-bezier(0.35, 0, 0.25, 1);
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@ export default {
|
|||
activeColor: '{primary.color}',
|
||||
padding: '1rem 1.125rem',
|
||||
fontWeight: '600',
|
||||
borderRadius: '{content.border.radius}',
|
||||
margin: '0 0 -1px 0',
|
||||
gap: '0.5rem',
|
||||
focusRing: {
|
||||
|
|
|
|||
|
|
@ -1,23 +1,54 @@
|
|||
export default {
|
||||
tabList: {
|
||||
tablist: {
|
||||
borderWidth: '0 0 1px 0',
|
||||
background: '{content.background}',
|
||||
borderColor: '{content.border.color}'
|
||||
},
|
||||
tab: {
|
||||
background: 'transparent',
|
||||
hoverBackground: 'transparent',
|
||||
activeBackground: 'transparent',
|
||||
borderWidth: '0 0 1px 0',
|
||||
borderColor: '{content.border.color}',
|
||||
hoverBorderColor: '{content.border.color}',
|
||||
activeBorderColor: '{primary.color}',
|
||||
color: '{text.muted.color}',
|
||||
hoverColor: '{text.color}',
|
||||
activeColor: '{primary.color}'
|
||||
activeColor: '{primary.color}',
|
||||
padding: '1rem 1.125rem',
|
||||
fontWeight: '600',
|
||||
margin: '0 0 -1px 0',
|
||||
gap: '0.5rem',
|
||||
focusRing: {
|
||||
width: '{focus.ring.width}',
|
||||
style: '{focus.ring.style}',
|
||||
color: '{focus.ring.color}',
|
||||
offset: '{focus.ring.offset}',
|
||||
shadow: '{focus.ring.shadow}'
|
||||
}
|
||||
},
|
||||
tabPanel: {
|
||||
tabpanel: {
|
||||
background: '{content.background}',
|
||||
color: '{content.color}'
|
||||
color: '{content.color}',
|
||||
padding: '0.875rem 1.125rem 1.125rem 1.125rem'
|
||||
},
|
||||
navButton: {
|
||||
background: '{content.background}',
|
||||
color: '{text.muted.color}',
|
||||
hoverColor: '{text.color}'
|
||||
hoverColor: '{text.color}',
|
||||
width: '2.5rem',
|
||||
focusRing: {
|
||||
width: '{focus.ring.width}',
|
||||
style: '{focus.ring.style}',
|
||||
color: '{focus.ring.color}',
|
||||
offset: '-1px',
|
||||
shadow: '{focus.ring.shadow}'
|
||||
}
|
||||
},
|
||||
activeBar: {
|
||||
height: '1px',
|
||||
bottom: '-1px',
|
||||
background: '{primary.color}'
|
||||
},
|
||||
colorScheme: {
|
||||
light: {
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@ export default {
|
|||
activeColor: '{primary.color}',
|
||||
padding: '1rem 1.25rem',
|
||||
fontWeight: '600',
|
||||
borderRadius: '0',
|
||||
margin: '0',
|
||||
gap: '0.5rem',
|
||||
focusRing: {
|
||||
|
|
@ -39,14 +38,14 @@ export default {
|
|||
light: {
|
||||
item: {
|
||||
background: '{surface.100}',
|
||||
hoverBackground: '{surface.100}',
|
||||
hoverBackground: '{surface.200}',
|
||||
activeBackground: '{surface.0}'
|
||||
}
|
||||
},
|
||||
dark: {
|
||||
item: {
|
||||
background: '{surface.800}',
|
||||
hoverBackground: '{surface.800}',
|
||||
hoverBackground: '{surface.700}',
|
||||
activeBackground: '{surface.900}'
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,33 +1,70 @@
|
|||
export default {
|
||||
tabList: {
|
||||
tablist: {
|
||||
borderWidth: '0',
|
||||
background: '{content.background}',
|
||||
borderColor: '{content.border.color}'
|
||||
},
|
||||
tab: {
|
||||
borderColor: '{content.border.color}',
|
||||
borderWidth: '2px 0 0 0',
|
||||
borderColor: 'transparent',
|
||||
hoverBorderColor: 'transparent',
|
||||
activeBorderColor: '{primary.color}',
|
||||
color: '{text.muted.color}',
|
||||
hoverColor: '{text.color}',
|
||||
activeColor: '{primary.color}'
|
||||
activeColor: '{primary.color}',
|
||||
padding: '1rem 1.25rem',
|
||||
fontWeight: '600',
|
||||
margin: '0',
|
||||
focusRing: {
|
||||
width: '{focus.ring.width}',
|
||||
style: '{focus.ring.style}',
|
||||
color: '{focus.ring.color}',
|
||||
offset: '{focus.ring.offset}',
|
||||
shadow: 'inset {focus.ring.shadow}'
|
||||
}
|
||||
},
|
||||
tabPanel: {
|
||||
tabpanel: {
|
||||
background: '{content.background}',
|
||||
color: '{content.color}'
|
||||
color: '{content.color}',
|
||||
padding: '0.875rem 1.125rem 1.125rem 1.125rem'
|
||||
},
|
||||
navButton: {
|
||||
background: '{content.background}',
|
||||
color: '{text.muted.color}',
|
||||
hoverColor: '{text.color}'
|
||||
hoverColor: '{text.color}',
|
||||
width: '2.5rem',
|
||||
focusRing: {
|
||||
width: '{focus.ring.width}',
|
||||
style: '{focus.ring.style}',
|
||||
color: '{focus.ring.color}',
|
||||
offset: '{focus.ring.offset}',
|
||||
shadow: 'inset {focus.ring.shadow}'
|
||||
}
|
||||
},
|
||||
activeBar: {
|
||||
height: '0',
|
||||
bottom: '0',
|
||||
background: 'transparent'
|
||||
},
|
||||
colorScheme: {
|
||||
light: {
|
||||
navButton: {
|
||||
boxShadow: '0px 0px 10px 50px rgba(255, 255, 255, 0.6)'
|
||||
shadow: '0px 0px 10px 50px rgba(255, 255, 255, 0.6)'
|
||||
},
|
||||
tab: {
|
||||
background: '{surface.100}',
|
||||
hoverBackground: '{surface.200}',
|
||||
activeBackground: '{surface.0}'
|
||||
}
|
||||
},
|
||||
dark: {
|
||||
navButton: {
|
||||
boxShadow: '0px 0px 10px 50px color-mix(in srgb, {content.background}, transparent 50%)'
|
||||
shadow: '0px 0px 10px 50px color-mix(in srgb, {content.background}, transparent 50%)'
|
||||
},
|
||||
tab: {
|
||||
background: '{surface.800}',
|
||||
hoverBackground: '{surface.700}',
|
||||
activeBackground: '{surface.900}'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue