@atlaskit/atlassian-navigation
Version:
A horizontal navigation component for Atlassian apps.
135 lines (133 loc) • 4.21 kB
JavaScript
const defaultTheme = {
mode: {
create: {
active: {
color: "var(--ds-text-inverse, #FFFFFF)",
backgroundColor: "var(--ds-background-brand-bold-pressed, #144794)",
boxShadow: ''
},
default: {
color: "var(--ds-text-inverse, #FFFFFF)",
backgroundColor: "var(--ds-background-brand-bold, #1868DB)",
boxShadow: ''
},
focus: {
color: "var(--ds-text-inverse, #FFFFFF)",
backgroundColor: '',
boxShadow: ''
},
hover: {
color: "var(--ds-text-inverse, #FFFFFF)",
backgroundColor: "var(--ds-background-brand-bold-hovered, #1558BC)",
boxShadow: ''
},
selected: {
color: '',
backgroundColor: '',
boxShadow: ''
}
},
iconButton: {
active: {
color: "var(--ds-text-subtle, #505258)",
backgroundColor: "var(--ds-background-neutral-subtle-pressed, #0B120E24)",
boxShadow: ''
},
default: {
color: "var(--ds-text-subtle, #505258)",
backgroundColor: 'transparent',
boxShadow: ''
},
focus: {
color: "var(--ds-text-subtle, #505258)",
backgroundColor: '',
boxShadow: ''
},
hover: {
color: "var(--ds-text-subtle, #505258)",
backgroundColor: "var(--ds-background-neutral-subtle-hovered, #0515240F)",
boxShadow: ''
},
selected: {
color: "var(--ds-text-selected, #1868DB)",
backgroundColor: "var(--ds-background-selected, #E9F2FE)",
boxShadow: ''
},
selectedHover: {
color: "var(--ds-text-selected, #1868DB)",
backgroundColor: "var(--ds-background-selected-hovered, #CFE1FD)",
boxShadow: ''
}
},
navigation: {
backgroundColor: "var(--ds-surface, #FFFFFF)",
color: "var(--ds-text-subtlest, #6B6E76)"
},
productHome: {
backgroundColor: "var(--ds-text-brand, #1868DB)",
color: "var(--ds-text, #292A2E)",
borderRight: `${"var(--ds-border-width, 1px)"} solid ${"var(--ds-border, #0B120E24)"}`,
// TODO: replace with token after brand refresh
iconColor: '#357DE8',
textColor: "var(--ds-text, #292A2E)"
},
primaryButton: {
active: {
color: "var(--ds-text-subtle, #505258)",
backgroundColor: "var(--ds-background-neutral-subtle-pressed, #0B120E24)",
boxShadow: ''
},
default: {
color: "var(--ds-text-subtle, #505258)",
backgroundColor: 'transparent',
boxShadow: ''
},
focus: {
color: "var(--ds-text-subtle, #505258)",
backgroundColor: '',
boxShadow: ''
},
hover: {
color: "var(--ds-text-subtle, #505258)",
backgroundColor: "var(--ds-background-neutral-subtle-hovered, #0515240F)",
boxShadow: ''
},
selected: {
color: "var(--ds-text-selected, #1868DB)",
backgroundColor: "var(--ds-background-selected, #E9F2FE)",
boxShadow: '',
borderColor: "var(--ds-border-selected, #1868DB)"
},
selectedHover: {
color: "var(--ds-text-selected, #1868DB)",
backgroundColor: "var(--ds-background-selected-hovered, #CFE1FD)",
boxShadow: '',
borderColor: "var(--ds-border-selected, #1868DB)"
}
},
search: {
default: {
backgroundColor: "var(--ds-background-input, #FFFFFF)",
color: "var(--ds-text-subtlest, #6B6E76)",
borderColor: "var(--ds-border-input, #8C8F97)"
},
focus: {
borderColor: "var(--ds-border-focused, #4688EC)"
},
hover: {
backgroundColor: "var(--ds-background-input-hovered, #F8F8F8)"
}
},
skeleton: {
backgroundColor: "var(--ds-background-neutral, #0515240F)",
opacity: 1
}
}
};
// Create deep copy of defaultTheme
const defaultThemeCopy = JSON.parse(JSON.stringify(defaultTheme));
// Update iconColor and textColor in defaultThemeBrandRefresh
defaultThemeCopy.mode.productHome.iconColor = undefined;
defaultThemeCopy.mode.productHome.textColor = undefined;
export const DEFAULT_THEME_NAME = 'atlassian';
export default defaultTheme;