diff --git a/components/lib/themes/lara/tabs/index.js b/components/lib/themes/lara/tabs/index.js index 5a2561680..127659826 100644 --- a/components/lib/themes/lara/tabs/index.js +++ b/components/lib/themes/lara/tabs/index.js @@ -13,7 +13,7 @@ export default { hoverColor: '{text.color}', activeColor: '{primary.color}', padding: '1rem 1.25rem', - fontWeight: '600', + fontWeight: '700', margin: '0', focusRing: { width: '{focus.ring.width}', diff --git a/components/lib/themes/nora/tabs/index.js b/components/lib/themes/nora/tabs/index.js index 27a9f707e..dec18ad71 100644 --- a/components/lib/themes/nora/tabs/index.js +++ b/components/lib/themes/nora/tabs/index.js @@ -5,26 +5,25 @@ export default { 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}', + background: '{content.background}', + hoverBackground: '{surface.200}', + activeBackground: '{primary.color}', + borderWidth: '0', + borderColor: 'transparent', + hoverBorderColor: 'transparent', + activeBorderColor: 'transparent', color: '{text.muted.color}', hoverColor: '{text.color}', - activeColor: '{primary.color}', - padding: '1rem 1.125rem', - fontWeight: '600', - margin: '0 0 -1px 0', - gap: '0.5rem', + activeColor: '{primary.contrast.color}', + padding: '1rem 1.25rem', + fontWeight: '700', + margin: '0', focusRing: { width: '{focus.ring.width}', style: '{focus.ring.style}', color: '{focus.ring.color}', offset: '{focus.ring.offset}', - shadow: '{focus.ring.shadow}' + shadow: 'inset {focus.ring.shadow}' } }, tabpanel: { @@ -41,24 +40,24 @@ export default { width: '{focus.ring.width}', style: '{focus.ring.style}', color: '{focus.ring.color}', - offset: '-1px', - shadow: '{focus.ring.shadow}' + offset: '{focus.ring.offset}', + shadow: 'inset {focus.ring.shadow}' } }, activeBar: { - height: '1px', - bottom: '-1px', - background: '{primary.color}' + 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)' } }, 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%)' } } }