@atlaskit/theme
Version:
Theme contains solutions for global theming, colors, and other useful mixins.
62 lines (58 loc) • 2.09 kB
JavaScript
/* eslint-disable @atlaskit/volt-strict-mode/no-multiple-exports */
import deprecationWarning from '@atlaskit/ds-lib/deprecation-warning';
export const CHANNEL = '__ATLASKIT_THEME__';
export const DEFAULT_THEME_MODE = 'light';
export const THEME_MODES = ['light', 'dark'];
/**
* @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-386 Internal documentation for deprecation (no external access)}
* Please use `@atlaskit/focus-ring` instead.
*/
export const focusRing = (color = "var(--ds-border-focused, #4688EC)", outlineWidth = 2) => {
deprecationWarning('@atlaskit/theme', 'focus ring mixin', 'Please use `@atlaskit/focus-ring` instead.');
return `
&:focus {
outline: none;
box-shadow: 0px 0px 0px ${outlineWidth}px ${color};
}
`;
};
/**
* @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-386 Internal documentation for deprecation (no external access)}
* Please use `@atlaskit/focus-ring` instead.
*/
export const noFocusRing = () => `
box-shadow: none;
`;
export const layers = {
card: () => 100,
navigation: () => 200,
dialog: () => 300,
layer: () => 400,
blanket: () => 500,
modal: () => 510,
flag: () => 600,
spotlight: () => 700,
tooltip: () => 9999
};
/**
* @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-386 Internal documentation for deprecation (no external access)}
* Please use `@atlaskit/visually-hidden`
*/
export const visuallyHidden = () => {
deprecationWarning('@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`
*/
export const assistive = visuallyHidden;