@atlaskit/atlassian-navigation
Version:
A horizontal navigation component for Atlassian products.
134 lines • 4.69 kB
JavaScript
import { B200, B400, B50, N0, N20, N200, N40, N600, N700 } from '@atlaskit/theme/colors';
import { hexToRGBA } from './theme-helpers';
const defaultTheme = {
mode: {
create: {
active: {
color: `var(--ds-text-inverse, ${N0})`,
backgroundColor: `var(--ds-background-brand-bold-pressed, ${hexToRGBA(B400, 0.8)})`,
boxShadow: ''
},
default: {
color: `var(--ds-text-inverse, ${N0})`,
backgroundColor: `var(--ds-background-brand-bold, ${B400})`,
boxShadow: ''
},
focus: {
color: `var(--ds-text-inverse, ${N0})`,
backgroundColor: `var(--ds-background-brand-bold, ${B400})`,
boxShadow: `0 0 0 2px ${"var(--ds-border-focused, rgb(128,169,230))"}`
},
hover: {
color: `var(--ds-text-inverse, ${N0})`,
backgroundColor: `var(--ds-background-brand-bold-hovered, ${hexToRGBA(B400, 0.9)})`,
boxShadow: ''
},
selected: {
color: '',
backgroundColor: '',
boxShadow: ''
}
},
iconButton: {
active: {
color: `var(--ds-text-subtle, ${B400})`,
backgroundColor: `var(--ds-background-neutral-pressed, ${hexToRGBA(B50, 0.6)})`,
boxShadow: ''
},
default: {
color: `var(--ds-text-subtle, ${N600})`,
backgroundColor: 'transparent',
boxShadow: ''
},
focus: {
color: `var(--ds-text-subtle, ${N600})`,
backgroundColor: `var(--ds-background-selected-hovered, ${hexToRGBA(B50, 0.5)})`,
boxShadow: `0 0 0 2px ${`var(--ds-border-focused, ${B200})`}`
},
hover: {
color: `var(--ds-text-subtle, ${B400})`,
backgroundColor: `var(--ds-background-neutral-hovered, ${hexToRGBA(B50, 0.9)})`,
boxShadow: ''
},
selected: {
color: `var(--ds-text-selected, ${B400})`,
backgroundColor: `var(--ds-background-selected, ${hexToRGBA(B50, 0.6)})`,
boxShadow: ''
},
selectedHover: {
color: `var(--ds-text-selected, ${B400})`,
backgroundColor: `var(--ds-background-selected-hovered, ${hexToRGBA(B50, 0.6)})`,
boxShadow: ''
}
},
navigation: {
backgroundColor: `var(--ds-surface, ${N0})`,
color: `var(--ds-text-subtlest, ${N200})`
},
productHome: {
backgroundColor: `var(--ds-text-brand, ${B400})`,
color: `var(--ds-text, ${N700})`,
borderRight: `1px solid ${`var(--ds-border, ${hexToRGBA(N200, 0.3)})`}`,
// TODO: (DSP-1256) These colors should be moved into the Logo package
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
iconGradientStart: B400,
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
iconGradientStop: B200,
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
iconColor: B200
},
primaryButton: {
active: {
color: `var(--ds-text-subtle, ${B400})`,
backgroundColor: `var(--ds-background-neutral-pressed, ${hexToRGBA(B50, 0.7)})`,
boxShadow: ''
},
default: {
color: `var(--ds-text-subtle, ${N600})`,
backgroundColor: 'transparent',
boxShadow: ''
},
focus: {
color: `var(--ds-text-subtle, ${N600})`,
backgroundColor: '',
boxShadow: `0 0 0 2px ${`var(--ds-border-focused, ${B200})`}`
},
hover: {
color: `var(--ds-text-subtle, ${B400})`,
backgroundColor: `var(--ds-background-neutral-hovered, ${hexToRGBA(B50, 0.9)})`,
boxShadow: ''
},
selected: {
color: `var(--ds-text-selected, ${B400})`,
backgroundColor: `var(--ds-background-selected, ${hexToRGBA(B50, 0.7)})`,
boxShadow: '',
borderColor: `var(--ds-border-selected, ${B400})`
},
selectedHover: {
color: `var(--ds-text-selected, ${B400})`,
backgroundColor: `var(--ds-background-selected-hovered, ${hexToRGBA(B50, 0.6)})`,
boxShadow: '',
borderColor: `var(--ds-border-selected, ${B400})`
}
},
search: {
default: {
backgroundColor: `var(--ds-background-input, ${N0})`,
color: `var(--ds-text-subtlest, ${N200})`,
borderColor: `var(--ds-border-input, ${N40})`
},
focus: {
borderColor: `var(--ds-border-focused, ${N40})`
},
hover: {
backgroundColor: `var(--ds-background-input-hovered, ${N0})`
}
},
skeleton: {
backgroundColor: `var(--ds-background-neutral, ${N20})`,
opacity: 1
}
}
};
export const DEFAULT_THEME_NAME = 'atlassian';
export default defaultTheme;