@atlaskit/onboarding
Version:
An onboarding spotlight introduces new features to users through focused messages or multi-step tours.
152 lines (149 loc) • 6.04 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.spotlightButtonTheme = exports.modalButtonTheme = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _typeof2 = _interopRequireDefault(require("@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) { (0, _defineProperty2.default)(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 ((0, _typeof2.default)(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.
*/
var spotlightButtonTheme = exports.spotlightButtonTheme = function spotlightButtonTheme(current, themeProps) {
var _current = current(themeProps),
buttonStyles = _current.buttonStyles,
rest = (0, _objectWithoutProperties2.default)(_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
var modalButtonTheme = exports.modalButtonTheme = function modalButtonTheme(current, themeProps) {
var _current2 = current(themeProps),
buttonStyles = _current2.buttonStyles,
rest = (0, _objectWithoutProperties2.default)(_current2, _excluded2);
return _objectSpread({
buttonStyles: _objectSpread(_objectSpread({}, buttonStyles), extract(modalTheme, themeProps))
}, rest);
};