@atlaskit/theme
Version:
Theme contains solutions for global theming, colors, and other useful mixins.
131 lines (124 loc) • 4.76 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.visuallyHidden = exports.skeletonShimmer = exports.noFocusRing = exports.layers = exports.gridSize = exports.focusRing = exports.borderRadius = exports.assistive = exports.THEME_MODES = exports.DEFAULT_THEME_MODE = exports.CHANNEL = void 0;
var _deprecationWarning = _interopRequireDefault(require("@atlaskit/ds-lib/deprecation-warning"));
var _colors = require("./colors");
var CHANNEL = exports.CHANNEL = '__ATLASKIT_THEME__';
var DEFAULT_THEME_MODE = exports.DEFAULT_THEME_MODE = 'light';
var THEME_MODES = exports.THEME_MODES = ['light', 'dark'];
/*
These theme values are expressed as functions so that if we decide to make
them dependent on props in the future, it wouldn't require a significant
refactor everywhere they are being used.
*/
/**
* @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-386 Internal documentation for deprecation (no external access)}
* @deprecated Use `token('border.radius', '3px')` instead.
*/
var borderRadius = exports.borderRadius = function borderRadius() {
return 3;
};
/**
* @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-386 Internal documentation for deprecation (no external access)}
* @deprecated Use `token('space.100', '8px')` instead with any of the space tokens.
* Available space tokens can be found on {@link https://atlassian.design/foundations/spacing/#scale}
*/
var gridSize = exports.gridSize = function gridSize() {
return 8;
};
/**
* @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-386 Internal documentation for deprecation (no external access)}
* Please use `@atlaskit/focus-ring` instead.
*/
var focusRing = exports.focusRing = function focusRing() {
var color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "var(--ds-border-focused, ".concat(_colors.B200, ")");
var outlineWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : gridSize() / 4;
(0, _deprecationWarning.default)('@atlaskit/theme', 'focus ring mixin', 'Please use `@atlaskit/focus-ring` instead.');
return "\n &:focus {\n outline: none;\n box-shadow: 0px 0px 0px ".concat(outlineWidth, "px ").concat(color, ";\n }\n");
};
/**
* @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-386 Internal documentation for deprecation (no external access)}
* Please use `@atlaskit/focus-ring` instead.
*/
var noFocusRing = exports.noFocusRing = function noFocusRing() {
return "\n box-shadow: none;\n";
};
var layers = exports.layers = {
card: function card() {
return 100;
},
navigation: function navigation() {
return 200;
},
dialog: function dialog() {
return 300;
},
layer: function layer() {
return 400;
},
blanket: function blanket() {
return 500;
},
modal: function modal() {
return 510;
},
flag: function flag() {
return 600;
},
spotlight: function spotlight() {
return 700;
},
tooltip: function tooltip() {
return 9999;
}
};
/**
* @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-386 Internal documentation for deprecation (no external access)}
* Please use `@atlaskit/visually-hidden`
*/
var visuallyHidden = exports.visuallyHidden = function visuallyHidden() {
(0, _deprecationWarning.default)('@atlaskit/theme', 'visually hidden mixin', 'Please use `@atlaskit/visually-hidden` instead.');
return {
border: '0 !important',
clip: 'rect(1px, 1px, 1px, 1px) !important',
height: '1px !important',
overflow: 'hidden !important',
padding: '0 !important',
position: 'absolute !important',
width: '1px !important',
whiteSpace: 'nowrap !important'
};
};
/**
* @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-386 Internal documentation for deprecation (no external access)}
* Please use `@atlaskit/visually-hidden`
*/
var assistive = exports.assistive = visuallyHidden;
/**
* These styles are mirrored in:
* packages/design-system/menu/src/internal/components/skeleton-shimmer.tsx
*
* Please update both.
*/
var skeletonShimmer = exports.skeletonShimmer = function skeletonShimmer() {
return {
css: {
backgroundColor: "var(--ds-skeleton, ".concat(_colors.N20A, ")"),
animationDuration: '1.5s',
animationIterationCount: 'infinite',
animationTimingFunction: 'linear',
animationDirection: 'alternate'
},
keyframes: {
from: {
backgroundColor: "var(--ds-skeleton, ".concat(_colors.N20A, ")")
},
to: {
backgroundColor: "var(--ds-skeleton-subtle, ".concat(_colors.N30A, ")")
}
}
};
};