@atlaskit/theme
Version:
Theme contains solutions for global theming, colors, and other useful mixins.
124 lines (118 loc) • 4.1 kB
JavaScript
import deprecationWarning from '@atlaskit/ds-lib/deprecation-warning';
import { B200, N20A, N30A } from './colors';
export var CHANNEL = '__ATLASKIT_THEME__';
export var DEFAULT_THEME_MODE = 'light';
export var 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.
*/
export var 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}
*/
export var 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.
*/
export var focusRing = function focusRing() {
var color = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "var(--ds-border-focused, ".concat(B200, ")");
var outlineWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : gridSize() / 4;
deprecationWarning('@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.
*/
export var noFocusRing = function noFocusRing() {
return "\n box-shadow: none;\n";
};
export var 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`
*/
export var visuallyHidden = function 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 var assistive = visuallyHidden;
/**
* These styles are mirrored in:
* packages/design-system/menu/src/internal/components/skeleton-shimmer.tsx
*
* Please update both.
*/
export var skeletonShimmer = function skeletonShimmer() {
return {
css: {
backgroundColor: "var(--ds-skeleton, ".concat(N20A, ")"),
animationDuration: '1.5s',
animationIterationCount: 'infinite',
animationTimingFunction: 'linear',
animationDirection: 'alternate'
},
keyframes: {
from: {
backgroundColor: "var(--ds-skeleton, ".concat(N20A, ")")
},
to: {
backgroundColor: "var(--ds-skeleton-subtle, ".concat(N30A, ")")
}
}
};
};