@toptal/picasso 31.12.3 → 31.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/ButtonLoader/ButtonLoader.js +2 -2
- package/ButtonLoader/ButtonLoader.js.map +1 -1
- package/HeaderLoader/HeaderLoader.js +2 -2
- package/HeaderLoader/HeaderLoader.js.map +1 -1
- package/MediaSkeletonLoader/MediaSkeletonLoader.js +2 -2
- package/MediaSkeletonLoader/MediaSkeletonLoader.js.map +1 -1
- package/PageSidebar/PageSidebar.js +1 -1
- package/PageSidebar/PageSidebar.js.map +1 -1
- package/TypographyLoader/TypographyLoader.js +2 -2
- package/TypographyLoader/TypographyLoader.js.map +1 -1
- package/package.json +1 -1
- package/utils/index.d.ts +1 -0
- package/utils/index.js +1 -0
- package/utils/index.js.map +1 -1
- package/utils/loader-palette.d.ts +5 -0
- package/utils/loader-palette.js +8 -0
- package/utils/loader-palette.js.map +1 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import ContentLoader from 'react-content-loader';
|
|
3
|
-
import {
|
|
3
|
+
import { loaderPalette } from '../utils';
|
|
4
4
|
const BORDER_RADIUS = 4;
|
|
5
5
|
// Extrapolated from `em` styles from @toptal/picasso/Button/styles.ts on the basis of 1em=16px
|
|
6
6
|
const BUTTON_SIZES = {
|
|
@@ -17,7 +17,7 @@ export const ButtonLoader = ({ style, className, size = 'medium', circular = fal
|
|
|
17
17
|
const borderRadius = circular ? '50%' : BORDER_RADIUS;
|
|
18
18
|
const height = BUTTON_SIZES[size];
|
|
19
19
|
const width = circular ? height : height + BUTTON_HORIZONTAL_PADDINGS[size];
|
|
20
|
-
return (React.createElement(ContentLoader, { className: className, viewBox: `0 0 ${width} ${height}`,
|
|
20
|
+
return (React.createElement(ContentLoader, { className: className, viewBox: `0 0 ${width} ${height}`, foregroundColor: loaderPalette.foreground, backgroundColor: loaderPalette.background, width: width, height: height, style: style },
|
|
21
21
|
React.createElement("rect", { x: '0', y: '0', rx: borderRadius, ry: borderRadius, width: width, height: height })));
|
|
22
22
|
};
|
|
23
23
|
ButtonLoader.displayName = 'ButtonLoader';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonLoader.js","sourceRoot":"","sources":["../../src/ButtonLoader/ButtonLoader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,MAAM,sBAAsB,CAAA;AAEhD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"ButtonLoader.js","sourceRoot":"","sources":["../../src/ButtonLoader/ButtonLoader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,MAAM,sBAAsB,CAAA;AAEhD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAOxC,MAAM,aAAa,GAAG,CAAC,CAAA;AAEvB,+FAA+F;AAC/F,MAAM,YAAY,GAAG;IACnB,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,EAAE;CACV,CAAA;AAED,MAAM,0BAA0B,GAAG;IACjC,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,EAAE;CACV,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,KAAK,EACL,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,QAAQ,GAAG,KAAK,GACV,EAAE,EAAE;IACV,MAAM,YAAY,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAA;IACrD,MAAM,MAAM,GAAG,YAAY,CAAC,IAAI,CAAC,CAAA;IACjC,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAA;IAE3E,OAAO,CACL,oBAAC,aAAa,IACZ,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,KAAK,IAAI,MAAM,EAAE,EACjC,eAAe,EAAE,aAAa,CAAC,UAAU,EACzC,eAAe,EAAE,aAAa,CAAC,UAAU,EACzC,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK;QAEZ,8BACE,CAAC,EAAC,GAAG,EACL,CAAC,EAAC,GAAG,EACL,EAAE,EAAE,YAAY,EAChB,EAAE,EAAE,YAAY,EAChB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,GACd,CACY,CACjB,CAAA;AACH,CAAC,CAAA;AAED,YAAY,CAAC,WAAW,GAAG,cAAc,CAAA;AAEzC,eAAe,YAAY,CAAA"}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import ContentLoader from 'react-content-loader';
|
|
3
|
-
import {
|
|
3
|
+
import { loaderPalette } from '../utils';
|
|
4
4
|
const HEIGHT = 10;
|
|
5
5
|
const WIDTH = 200;
|
|
6
6
|
const CONTAINER_HEIGHT = HEIGHT * 2;
|
|
7
7
|
const VERTICAL_OFFSET = HEIGHT / 2;
|
|
8
8
|
const BORDER_RADIUS = HEIGHT / 2;
|
|
9
9
|
export const HeaderLoader = ({ className, style }) => {
|
|
10
|
-
return (React.createElement(ContentLoader, { className: className,
|
|
10
|
+
return (React.createElement(ContentLoader, { className: className, foregroundColor: loaderPalette.foreground, backgroundColor: loaderPalette.background, width: WIDTH, height: CONTAINER_HEIGHT, style: style },
|
|
11
11
|
React.createElement("rect", { x: '0', y: VERTICAL_OFFSET, rx: BORDER_RADIUS, ry: BORDER_RADIUS, width: '100%', height: HEIGHT })));
|
|
12
12
|
};
|
|
13
13
|
HeaderLoader.displayName = 'HeaderLoader';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderLoader.js","sourceRoot":"","sources":["../../src/HeaderLoader/HeaderLoader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,MAAM,sBAAsB,CAAA;AAEhD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"HeaderLoader.js","sourceRoot":"","sources":["../../src/HeaderLoader/HeaderLoader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,MAAM,sBAAsB,CAAA;AAEhD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAExC,MAAM,MAAM,GAAG,EAAE,CAAA;AACjB,MAAM,KAAK,GAAG,GAAG,CAAA;AACjB,MAAM,gBAAgB,GAAG,MAAM,GAAG,CAAC,CAAA;AACnC,MAAM,eAAe,GAAG,MAAM,GAAG,CAAC,CAAA;AAClC,MAAM,aAAa,GAAG,MAAM,GAAG,CAAC,CAAA;AAIhC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,SAAS,EAAE,KAAK,EAAS,EAAE,EAAE;IAC1D,OAAO,CACL,oBAAC,aAAa,IACZ,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,aAAa,CAAC,UAAU,EACzC,eAAe,EAAE,aAAa,CAAC,UAAU,EACzC,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,gBAAgB,EACxB,KAAK,EAAE,KAAK;QAEZ,8BACE,CAAC,EAAC,GAAG,EACL,CAAC,EAAE,eAAe,EAClB,EAAE,EAAE,aAAa,EACjB,EAAE,EAAE,aAAa,EACjB,KAAK,EAAC,MAAM,EACZ,MAAM,EAAE,MAAM,GACd,CACY,CACjB,CAAA;AACH,CAAC,CAAA;AAED,YAAY,CAAC,WAAW,GAAG,cAAc,CAAA;AAEzC,eAAe,YAAY,CAAA"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { useMemo } from 'react';
|
|
2
2
|
import ContentLoader from 'react-content-loader';
|
|
3
3
|
import { pxFromRem } from '@toptal/picasso-shared';
|
|
4
|
-
import {
|
|
4
|
+
import { loaderPalette } from '../utils';
|
|
5
5
|
const BORDER_RADIUS = '5px';
|
|
6
6
|
const AVATAR_SIZES = {
|
|
7
7
|
xxsmall: 32,
|
|
@@ -54,7 +54,7 @@ export const MediaSkeletonLoader = (props) => {
|
|
|
54
54
|
const { className, style } = props;
|
|
55
55
|
const { width, height, borderRadius } = useMemo(() => getAttributes(props), [props]);
|
|
56
56
|
const viewBox = `0 0 ${width} ${height}`;
|
|
57
|
-
return (React.createElement(ContentLoader, { viewBox: viewBox,
|
|
57
|
+
return (React.createElement(ContentLoader, { viewBox: viewBox, foregroundColor: loaderPalette.foreground, backgroundColor: loaderPalette.background, width: width, height: height, "data-testid": props['data-testid'], className: className, style: style },
|
|
58
58
|
React.createElement("rect", { x: '0', y: '0', rx: borderRadius, ry: borderRadius, width: width, height: height })));
|
|
59
59
|
};
|
|
60
60
|
MediaSkeletonLoader.displayName = 'MediaSkeletonLoader';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MediaSkeletonLoader.js","sourceRoot":"","sources":["../../src/MediaSkeletonLoader/MediaSkeletonLoader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,aAAa,MAAM,sBAAsB,CAAA;AAChD,OAAO,EAAE,SAAS,EAAa,MAAM,wBAAwB,CAAA;AAE7D,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"MediaSkeletonLoader.js","sourceRoot":"","sources":["../../src/MediaSkeletonLoader/MediaSkeletonLoader.tsx"],"names":[],"mappings":"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"}
|
|
@@ -16,7 +16,7 @@ const useStyles = makeStyles(styles, {
|
|
|
16
16
|
name: 'PageSidebar',
|
|
17
17
|
});
|
|
18
18
|
export const PageSidebar = forwardRef(function Sidebar(props, ref) {
|
|
19
|
-
const { children, variant = 'light', className, style, collapsible, defaultCollapsed, testIds, size = 'medium', wrapperMaxHeight, disableSticky, onCollapse } = props;
|
|
19
|
+
const { children, variant = 'light', className, style, collapsible, defaultCollapsed, testIds, size = 'medium', wrapperMaxHeight, disableSticky, onCollapse, } = props;
|
|
20
20
|
const classes = useStyles();
|
|
21
21
|
const { setHasSidebar } = useSidebar();
|
|
22
22
|
const [isCollapsed, setIsCollapsed] = useState(!!defaultCollapsed);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PageSidebar.js","sourceRoot":"","sources":["../../src/PageSidebar/PageSidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAS,MAAM,0BAA0B,CAAA;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAErD,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,KAAK,EAAE,EACZ,UAAU,EAEV,WAAW,EACX,SAAS,EACT,QAAQ,
|
|
1
|
+
{"version":3,"file":"PageSidebar.js","sourceRoot":"","sources":["../../src/PageSidebar/PageSidebar.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
/* eslint-disable react/no-array-index-key */
|
|
2
2
|
import React from 'react';
|
|
3
3
|
import ContentLoader from 'react-content-loader';
|
|
4
|
-
import {
|
|
4
|
+
import { loaderPalette } from '../utils';
|
|
5
5
|
const WIDTH = '100%';
|
|
6
6
|
const HEIGHT = 10;
|
|
7
7
|
const CONTAINER_HEIGHT = HEIGHT * 2;
|
|
8
8
|
const VERTICAL_OFFSET = HEIGHT / 2;
|
|
9
9
|
const BORDER_RADIUS = HEIGHT / 2;
|
|
10
|
-
const Paragraph = ({ className, style = {} }) => (React.createElement(ContentLoader, { className: className,
|
|
10
|
+
const Paragraph = ({ className, style = {} }) => (React.createElement(ContentLoader, { className: className, foregroundColor: loaderPalette.foreground, backgroundColor: loaderPalette.background, height: CONTAINER_HEIGHT, style: Object.assign({ width: WIDTH }, style) },
|
|
11
11
|
React.createElement("rect", { x: '0', y: VERTICAL_OFFSET, rx: BORDER_RADIUS, ry: BORDER_RADIUS, width: WIDTH, height: HEIGHT })));
|
|
12
12
|
export const TypographyLoader = ({ className, rows = 1, style }) => (React.createElement(React.Fragment, null, Array.from({ length: rows }).map((_, index) => (React.createElement(Paragraph, { className: className, key: index, style: style })))));
|
|
13
13
|
TypographyLoader.displayName = 'TypographyLoader';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TypographyLoader.js","sourceRoot":"","sources":["../../src/TypographyLoader/TypographyLoader.tsx"],"names":[],"mappings":"AAAA,6CAA6C;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,MAAM,sBAAsB,CAAA;AAEhD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"TypographyLoader.js","sourceRoot":"","sources":["../../src/TypographyLoader/TypographyLoader.tsx"],"names":[],"mappings":"AAAA,6CAA6C;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,MAAM,sBAAsB,CAAA;AAEhD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAOxC,MAAM,KAAK,GAAG,MAAM,CAAA;AACpB,MAAM,MAAM,GAAG,EAAE,CAAA;AACjB,MAAM,gBAAgB,GAAG,MAAM,GAAG,CAAC,CAAA;AACnC,MAAM,eAAe,GAAG,MAAM,GAAG,CAAC,CAAA;AAClC,MAAM,aAAa,GAAG,MAAM,GAAG,CAAC,CAAA;AAEhC,MAAM,SAAS,GAAG,CAAC,EAAE,SAAS,EAAE,KAAK,GAAG,EAAE,EAAa,EAAE,EAAE,CAAC,CAC1D,oBAAC,aAAa,IACZ,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,aAAa,CAAC,UAAU,EACzC,eAAe,EAAE,aAAa,CAAC,UAAU,EACzC,MAAM,EAAE,gBAAgB,EACxB,KAAK,kBAAI,KAAK,EAAE,KAAK,IAAK,KAAK;IAE/B,8BACE,CAAC,EAAC,GAAG,EACL,CAAC,EAAE,eAAe,EAClB,EAAE,EAAE,aAAa,EACjB,EAAE,EAAE,aAAa,EACjB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,GACd,CACY,CACjB,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,SAAS,EAAE,IAAI,GAAG,CAAC,EAAE,KAAK,EAAS,EAAE,EAAE,CAAC,CACzE,0CACG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9C,oBAAC,SAAS,IAAC,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,GAAI,CAC9D,CAAC,CACD,CACJ,CAAA;AAED,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAA;AAEjD,eAAe,gBAAgB,CAAA"}
|
package/package.json
CHANGED
package/utils/index.d.ts
CHANGED
|
@@ -25,6 +25,7 @@ export { default as toTitleCase } from './to-title-case';
|
|
|
25
25
|
export { default as useCombinedRefs } from './use-combined-refs';
|
|
26
26
|
export { default as useSafeState } from './use-safe-state';
|
|
27
27
|
export { default as useWidthOf } from './use-width-of';
|
|
28
|
+
export { default as loaderPalette } from './loader-palette';
|
|
28
29
|
export { default as unsafeErrorLog } from './unsafe-error-log';
|
|
29
30
|
export { default as useBoolean } from './useBoolean/use-boolean';
|
|
30
31
|
export { default as sum } from './sum';
|
package/utils/index.js
CHANGED
|
@@ -25,6 +25,7 @@ export { default as toTitleCase } from './to-title-case';
|
|
|
25
25
|
export { default as useCombinedRefs } from './use-combined-refs';
|
|
26
26
|
export { default as useSafeState } from './use-safe-state';
|
|
27
27
|
export { default as useWidthOf } from './use-width-of';
|
|
28
|
+
export { default as loaderPalette } from './loader-palette';
|
|
28
29
|
export { default as unsafeErrorLog } from './unsafe-error-log';
|
|
29
30
|
export { default as useBoolean } from './useBoolean/use-boolean';
|
|
30
31
|
export { default as sum } from './sum';
|
package/utils/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAE/D,OAAO,KAAK,eAAe,MAAM,eAAe,CAAA;AAEhD,MAAM,UAAU,GAAG;IACjB,KAAK;IACL,OAAO;IACP,MAAM;CACP,CAAA;AAED,OAAO,EAAE,UAAU,EAAE,CAAA;AAErB,OAAO,EACL,eAAe,IAAI,WAAW,EAC9B,OAAO,EACP,YAAY,EACZ,aAAa,EACb,UAAU,EACV,OAAO,EACP,MAAM,IAAI,OAAO,EACjB,oBAAoB,EACpB,oCAAoC,EACpC,KAAK,GACN,MAAM,0BAA0B,CAAA;AACjC,OAAO,EAAE,yBAAyB,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAE7E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qCAAqC,CAAA;AAElF,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,6BAA6B,CAAA;AAChF,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAChE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gBAAgB,CAAA;AACvD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAChE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gBAAgB,CAAA;AACvD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAEnE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAA;AACxC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,iBAAiB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAChE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC1D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,gBAAgB,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oBAAoB,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAChE,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AAG1E,MAAM,CAAC,MAAM,WAAW,GAAG,eAAe,CAAA;AAE1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,cAAc,SAAS,CAAA;AAEvB,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAG7E,cAAc,+BAA+B,CAAA"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAE/D,OAAO,KAAK,eAAe,MAAM,eAAe,CAAA;AAEhD,MAAM,UAAU,GAAG;IACjB,KAAK;IACL,OAAO;IACP,MAAM;CACP,CAAA;AAED,OAAO,EAAE,UAAU,EAAE,CAAA;AAErB,OAAO,EACL,eAAe,IAAI,WAAW,EAC9B,OAAO,EACP,YAAY,EACZ,aAAa,EACb,UAAU,EACV,OAAO,EACP,MAAM,IAAI,OAAO,EACjB,oBAAoB,EACpB,oCAAoC,EACpC,KAAK,GACN,MAAM,0BAA0B,CAAA;AACjC,OAAO,EAAE,yBAAyB,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAE7E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qCAAqC,CAAA;AAElF,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,6BAA6B,CAAA;AAChF,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAChE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,cAAc,CAAA;AACnD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gBAAgB,CAAA;AACvD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAChE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,gBAAgB,CAAA;AACvD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAEnE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAA;AACxC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,iBAAiB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAChE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC1D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,gBAAgB,CAAA;AACtD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAC3D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oBAAoB,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAChE,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AAG1E,MAAM,CAAC,MAAM,WAAW,GAAG,eAAe,CAAA;AAE1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,cAAc,SAAS,CAAA;AAEvB,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAG7E,cAAc,+BAA+B,CAAA"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { alpha } from '@toptal/picasso-shared';
|
|
2
|
+
import { colors } from '@toptal/picasso-provider';
|
|
3
|
+
const loaderColors = {
|
|
4
|
+
foreground: alpha(colors.grey.main2, 0.16),
|
|
5
|
+
background: alpha(colors.grey.main2, 0.04),
|
|
6
|
+
};
|
|
7
|
+
export default loaderColors;
|
|
8
|
+
//# sourceMappingURL=loader-palette.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"loader-palette.js","sourceRoot":"","sources":["../../src/utils/loader-palette.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAA;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAA;AAEjD,MAAM,YAAY,GAAG;IACnB,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC;IAC1C,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC;CAC3C,CAAA;AAED,eAAe,YAAY,CAAA"}
|