@atlaskit/onboarding
Version:
An onboarding spotlight introduces new features to users through focused messages or multi-step tours.
149 lines (147 loc) • 4.36 kB
JavaScript
const spotlightTheme = {
default: {
background: {
default: "var(--ds-background-inverse-subtle, #00000029)",
hover: "var(--ds-background-inverse-subtle-hovered, #0000003D)",
active: "var(--ds-background-inverse-subtle-pressed, #00000052)",
disabled: "var(--ds-background-disabled, #0515240F)",
selected: "var(--ds-background-inverse-subtle-pressed, #00000052)",
focus: "var(--ds-background-inverse-subtle, #00000029)"
},
color: {
default: "var(--ds-text-inverse, #FFFFFF)",
hover: "var(--ds-text-inverse, #FFFFFF)",
active: "var(--ds-text-inverse, #FFFFFF)",
disabled: {
light: "var(--ds-text-disabled, #080F214A)",
dark: "var(--ds-text-disabled, #080F214A)"
},
selected: "var(--ds-text-inverse, #FFFFFF)",
focus: "var(--ds-text-inverse, #FFFFFF)"
}
},
subtle: {
background: {
default: 'none',
hover: "var(--ds-background-inverse-subtle-hovered, #0000003D)",
active: "var(--ds-background-inverse-subtle-pressed, #00000052)",
disabled: 'none',
selected: {
light: "var(--ds-background-selected-hovered, #CFE1FD)",
dark: "var(--ds-background-selected-hovered, #CFE1FD)"
},
focusSelected: {
light: "var(--ds-background-selected-hovered, #CFE1FD)",
dark: "var(--ds-background-selected-hovered, #CFE1FD)"
}
},
color: {
default: "var(--ds-text-inverse, #FFFFFF)",
hover: "var(--ds-text-inverse, #FFFFFF)",
active: "var(--ds-text-inverse, #FFFFFF)",
disabled: "var(--ds-text-disabled, #080F214A)",
selected: "var(--ds-text-inverse, #FFFFFF)",
focus: "var(--ds-text-inverse, #FFFFFF)"
}
},
'subtle-link': {
textDecoration: {
hover: `underline ${"var(--ds-text-inverse, #FFFFFF)"}`
},
textDecorationLine: {
active: 'none'
},
color: {
default: "var(--ds-text-inverse, #FFFFFF)",
hover: "var(--ds-text-inverse, #FFFFFF)",
active: "var(--ds-text-inverse, #FFFFFF)",
disabled: "var(--ds-text-discovery, #803FA5)",
selected: "var(--ds-text-selected, #1868DB)",
focus: "var(--ds-text-inverse, #FFFFFF)"
}
}
};
const modalTheme = {
primary: {
background: {
default: "var(--ds-background-discovery-bold, #964AC0)",
hover: "var(--ds-background-discovery-bold-hovered, #803FA5)",
active: "var(--ds-background-discovery-bold-pressed, #673286)",
disabled: {
light: "var(--ds-background-disabled, #0515240F)",
dark: "var(--ds-background-disabled, #0515240F)"
},
selected: "var(--ds-background-selected-hovered, #CFE1FD)",
focus: "var(--ds-background-discovery-bold-hovered, #803FA5)"
},
color: {
default: "var(--ds-text-inverse, #FFFFFF)",
disabled: {
light: "var(--ds-text-disabled, #080F214A)",
dark: "var(--ds-text-disabled, #080F214A)"
},
selected: "var(--ds-text-selected, #1868DB)",
focus: "var(--ds-text-inverse, #FFFFFF)"
}
}
};
function extract(newTheme, {
mode,
appearance,
state
}) {
if (!newTheme[appearance]) {
return undefined;
}
const root = newTheme[appearance];
return Object.keys(root).reduce((acc, val) => {
let node = root;
[val, state, mode].forEach(item => {
if (!node[item]) {
return undefined;
}
if (typeof node[item] !== 'object') {
acc[val] = node[item];
return undefined;
}
node = node[item];
return undefined;
});
return acc;
}, {});
}
/**
* @deprecated
* Custom button themes are deprecated and will be removed in the future.
*/
export const spotlightButtonTheme = (current, themeProps) => {
const {
buttonStyles,
...rest
} = current(themeProps);
return {
buttonStyles: {
...buttonStyles,
...extract(spotlightTheme, themeProps)
},
...rest
};
};
/**
* @deprecated
* Custom button themes are deprecated and will be removed in the future.
*/
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
export const modalButtonTheme = (current, themeProps) => {
const {
buttonStyles,
...rest
} = current(themeProps);
return {
buttonStyles: {
...buttonStyles,
...extract(modalTheme, themeProps)
},
...rest
};
};