@atlaskit/onboarding
Version:
An onboarding spotlight introduces new features to users through focused messages or multi-step tours.
145 lines (143 loc) • 5.62 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _typeof from "@babel/runtime/helpers/typeof";
var _excluded = ["buttonStyles"],
_excluded2 = ["buttonStyles"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var 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 ".concat("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)"
}
}
};
var 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, _ref) {
var mode = _ref.mode,
appearance = _ref.appearance,
state = _ref.state;
if (!newTheme[appearance]) {
return undefined;
}
var root = newTheme[appearance];
return Object.keys(root).reduce(function (acc, val) {
var node = root;
[val, state, mode].forEach(function (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 var spotlightButtonTheme = function spotlightButtonTheme(current, themeProps) {
var _current = current(themeProps),
buttonStyles = _current.buttonStyles,
rest = _objectWithoutProperties(_current, _excluded);
return _objectSpread({
buttonStyles: _objectSpread(_objectSpread({}, 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 var modalButtonTheme = function modalButtonTheme(current, themeProps) {
var _current2 = current(themeProps),
buttonStyles = _current2.buttonStyles,
rest = _objectWithoutProperties(_current2, _excluded2);
return _objectSpread({
buttonStyles: _objectSpread(_objectSpread({}, buttonStyles), extract(modalTheme, themeProps))
}, rest);
};