@mailstep/design-system 0.8.16-beta.1 → 0.8.16-beta.3
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/package.json +12 -6
- package/ui/Blocks/CommonGrid/CommonGridContainer.js +3 -9
- package/ui/Blocks/CommonGrid/HoC/withReduxActions.js +0 -1
- package/ui/Blocks/CommonGrid/components/ControlButtons/ControlButtons.d.ts +0 -3
- package/ui/Blocks/CommonGrid/components/ControlButtons/ControlButtons.js +8 -16
- package/ui/Blocks/CommonGrid/components/ExtraControlButtons/ExtraControlButtons.d.ts +0 -1
- package/ui/Blocks/CommonGrid/components/ExtraControlButtons/ExtraControlButtons.js +10 -29
- package/ui/Blocks/CommonGrid/components/Filters/DatePickerRange/DatePickerRange.d.ts +0 -1
- package/ui/Blocks/CommonGrid/components/Filters/DatePickerRange/DatePickerRange.js +5 -17
- package/ui/Blocks/CommonGrid/components/GridInfo/index.js +1 -3
- package/ui/Blocks/CommonGrid/components/QuickFilter/QuickFilter.d.ts +1 -1
- package/ui/Blocks/CommonGrid/components/QuickFilter/QuickFilter.js +2 -2
- package/ui/Blocks/CommonGrid/store/index.d.ts +6 -4
- package/ui/Blocks/CommonGrid/store/index.js +2 -9
- package/ui/Blocks/CommonGrid/storybook/stories/complexWithPaginationAndRedux.stories.d.ts +0 -30
- package/ui/Blocks/CommonGrid/storybook/stories/complexWithPaginationAndRedux.stories.js +9 -59
- package/ui/Blocks/CommonGrid/storybook/utils/columnDefinition.d.ts +0 -2
- package/ui/Blocks/CommonGrid/storybook/utils/columnDefinition.js +9 -19
- package/ui/Blocks/CommonGrid/styles.d.ts +0 -1
- package/ui/Blocks/CommonGrid/styles.js +3 -6
- package/ui/Blocks/CommonGrid/types.d.ts +0 -1
- package/ui/Blocks/CommonGrid/utils/index.d.ts +0 -2
- package/ui/Blocks/CommonGrid/utils/index.js +0 -10
- package/ui/Elements/DropdownMenu/components/MenuItem.js +1 -1
- package/ui/Elements/Icon/icons/index.d.ts +0 -2
- package/ui/Elements/Icon/icons/index.js +0 -2
- package/ui/ThemeProvider/ThemeProvider.d.ts +2 -1
- package/ui/ThemeProvider/ThemeProvider.js +1 -1
- package/ui/ThemeProvider/themes/dark.d.ts +152 -0
- package/ui/ThemeProvider/themes/dark.js +14 -0
- package/ui/ThemeProvider/themes/index.d.ts +151 -1
- package/ui/ThemeProvider/themes/index.js +3 -3
- package/ui/ThemeProvider/types.d.ts +13 -33
- package/ui/index.es.js +15239 -15327
- package/ui/index.umd.js +462 -500
- package/ui/utils/index.js +1 -1
- package/ui/utils/translations.d.ts +4 -1
- package/ui/utils/translations.js +2 -2
- package/ui/Blocks/CommonGrid/components/MobileFilterModal.d.ts +0 -20
- package/ui/Blocks/CommonGrid/components/MobileFilterModal.js +0 -69
- package/ui/Blocks/CommonGrid/components/MobileOverlayWrapper.d.ts +0 -1
- package/ui/Blocks/CommonGrid/components/MobileOverlayWrapper.js +0 -7
- package/ui/Blocks/CommonGrid/components/MobileSortModal.d.ts +0 -13
- package/ui/Blocks/CommonGrid/components/MobileSortModal.js +0 -34
- package/ui/Elements/Icon/icons/Filter.d.ts +0 -4
- package/ui/Elements/Icon/icons/Filter.js +0 -13
- package/ui/Elements/Icon/icons/Sort.d.ts +0 -4
- package/ui/Elements/Icon/icons/Sort.js +0 -13
- package/ui/ThemeProvider/themes/light.d.ts +0 -4
- package/ui/ThemeProvider/themes/light.js +0 -7
|
@@ -1,12 +1,3 @@
|
|
|
1
|
-
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
2
|
-
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
3
|
-
if (ar || !(i in from)) {
|
|
4
|
-
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
5
|
-
ar[i] = from[i];
|
|
6
|
-
}
|
|
7
|
-
}
|
|
8
|
-
return to.concat(ar || Array.prototype.slice.call(from));
|
|
9
|
-
};
|
|
10
1
|
import { ComplexCell } from '../components/ComplexCell';
|
|
11
2
|
import { EnumCellExample } from '../components/EnumCellExample';
|
|
12
3
|
import { enumValues } from './utils';
|
|
@@ -110,19 +101,18 @@ export var columnDefinitions = [
|
|
|
110
101
|
flexBasis: 350,
|
|
111
102
|
cellComponent: ComplexCell
|
|
112
103
|
},
|
|
104
|
+
{
|
|
105
|
+
name: 'stickyColumn',
|
|
106
|
+
title: 'Sticky Column',
|
|
107
|
+
flexBasis: 160,
|
|
108
|
+
alwaysOn: true,
|
|
109
|
+
sticky: true,
|
|
110
|
+
stickTo: 'right'
|
|
111
|
+
},
|
|
113
112
|
{
|
|
114
113
|
name: 'alwaysOffColumn',
|
|
115
114
|
title: 'Always Off Column',
|
|
116
115
|
flexBasis: 0,
|
|
117
|
-
alwaysOff: true
|
|
116
|
+
alwaysOff: true,
|
|
118
117
|
}
|
|
119
118
|
];
|
|
120
|
-
export var stickyColumn = {
|
|
121
|
-
name: 'stickyColumn',
|
|
122
|
-
title: 'Sticky Column',
|
|
123
|
-
flexBasis: 160,
|
|
124
|
-
alwaysOn: true,
|
|
125
|
-
sticky: true,
|
|
126
|
-
stickTo: 'right'
|
|
127
|
-
};
|
|
128
|
-
export var columnDefinitionsWithSticky = __spreadArray(__spreadArray([], columnDefinitions, true), [stickyColumn], false);
|
|
@@ -21,17 +21,14 @@ export var CommonGridWrap = styled(x.div)(templateObject_3 || (templateObject_3
|
|
|
21
21
|
var withPagination = _a.withPagination;
|
|
22
22
|
return (withPagination ? gridFooterHeight : 0);
|
|
23
23
|
});
|
|
24
|
-
export var StyledButtonStrip = styled(x.div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: relative;\n display: flex;\n justify-content: space-between;\n width: 100%;\n min-height:
|
|
25
|
-
export var CommonGridWithStyles = styled(CommonGrid)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: calc(100% - ", "px);\n\n & .cell {\n padding: 0 4px;\n }\n & .dataRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: normal;\n border-bottom: 1px solid;\n border-color: lightGray3;\n height: ", "px;\n }\n & .gridHead {\n height: ", "px;\n background-color: neutral20;\n padding-bottom: 8px;\n position: sticky;\n top: -1px;\n z-index: 2;\n border-top: 1px solid ", ";\n }\n
|
|
24
|
+
export var StyledButtonStrip = styled(x.div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: relative;\n padding: 18px 20px;\n display: flex;\n justify-content: space-between;\n width: 100%;\n min-height: ", "px;\n flex-wrap: wrap;\n z-index: 3;\n"], ["\n position: relative;\n padding: 18px 20px;\n display: flex;\n justify-content: space-between;\n width: 100%;\n min-height: ", "px;\n flex-wrap: wrap;\n z-index: 3;\n"])), gridButtonStripHeight);
|
|
25
|
+
export var CommonGridWithStyles = styled(CommonGrid)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: calc(100% - ", "px);\n\n & .cell {\n padding: 0 4px;\n }\n & .dataRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: normal;\n border-bottom: 1px solid;\n border-color: lightGray3;\n height: ", "px;\n }\n & .gridHead {\n height: ", "px;\n background-color: neutral20;\n padding-bottom: 8px;\n position: sticky;\n top: -1px;\n z-index: 2;\n border-top: 1px solid ", ";\n }\n & .headRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: bold;\n border-bottom: none; // TODO fix in common-grid\n\n & .cell {\n overflow: hidden;\n max-height: 32px;\n position: relative;\n }\n\n & .sticky {\n background-color: bgLightGray1;\n }\n }\n\n & .filterRow {\n & .cell {\n overflow: visible;\n }\n\n & .cell > div {\n width: 100%; // TODO fix in common-grid\n }\n\n & .sticky {\n background-color: bgLightGray1;\n }\n border-bottom: none; // TODO fix in common-grid\n }\n\n & .body {\n flex-grow: 1;\n }\n\n & .gridWrapper {\n background-color: ", ";\n width: auto;\n padding-bottom: 35px;\n\n @media (min-width: 1024px) {\n height: 100%;\n overflow-y: auto;\n padding-bottom: 0;\n }\n @media print {\n margin: 0;\n width: 100%;\n height: auto;\n overflow-x: hidden;\n }\n }\n\n & .fullWidthGrid > .gridWrapper > div {\n width: 100% !important;\n }\n\n & .paginatorWrapper,\n & .buttonsStrip {\n @media print {\n display: none;\n }\n }\n & .cell {\n padding-left: 4px;\n padding-right: 4px;\n @media print {\n white-space: unset;\n }\n }\n\n .dataRow {\n &.grayedOut {\n background: lightGray1;\n }\n\n .sticky-right,\n .sticky-left {\n background: white;\n }\n\n .sticky-right {\n border-left: 1px solid #dfe1e6;\n }\n\n .sticky-left {\n border-right: 1px solid #dfe1e6;\n }\n\n &:hover,\n &.checked,\n &.selected {\n background-color: red30;\n }\n }\n\n .dataRow:nth-child(even) {\n .sticky-left,\n .sticky-right {\n background-color: bgLightGray;\n }\n }\n\n @media print {\n .filterRow .sticky {\n display: none;\n }\n\n .headRow .sticky {\n display: none;\n }\n\n .dataRow .sticky {\n display: none;\n }\n }\n\n .resizer {\n z-index: unset;\n }\n\n // hotfix table head\n .cell .sortable {\n display: flex;\n align-items: center;\n padding-right: 2px;\n }\n\n .sticky {\n position: sticky !important;\n z-index: 1;\n }\n\n .sticky-left {\n left: 0;\n }\n\n .sticky-right {\n right: 0;\n }\n"], ["\n height: calc(100% - ", "px);\n\n & .cell {\n padding: 0 4px;\n }\n & .dataRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: normal;\n border-bottom: 1px solid;\n border-color: lightGray3;\n height: ", "px;\n }\n & .gridHead {\n height: ", "px;\n background-color: neutral20;\n padding-bottom: 8px;\n position: sticky;\n top: -1px;\n z-index: 2;\n border-top: 1px solid ", ";\n }\n & .headRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: bold;\n border-bottom: none; // TODO fix in common-grid\n\n & .cell {\n overflow: hidden;\n max-height: 32px;\n position: relative;\n }\n\n & .sticky {\n background-color: bgLightGray1;\n }\n }\n\n & .filterRow {\n & .cell {\n overflow: visible;\n }\n\n & .cell > div {\n width: 100%; // TODO fix in common-grid\n }\n\n & .sticky {\n background-color: bgLightGray1;\n }\n border-bottom: none; // TODO fix in common-grid\n }\n\n & .body {\n flex-grow: 1;\n }\n\n & .gridWrapper {\n background-color: ", ";\n width: auto;\n padding-bottom: 35px;\n\n @media (min-width: 1024px) {\n height: 100%;\n overflow-y: auto;\n padding-bottom: 0;\n }\n @media print {\n margin: 0;\n width: 100%;\n height: auto;\n overflow-x: hidden;\n }\n }\n\n & .fullWidthGrid > .gridWrapper > div {\n width: 100% !important;\n }\n\n & .paginatorWrapper,\n & .buttonsStrip {\n @media print {\n display: none;\n }\n }\n & .cell {\n padding-left: 4px;\n padding-right: 4px;\n @media print {\n white-space: unset;\n }\n }\n\n .dataRow {\n &.grayedOut {\n background: lightGray1;\n }\n\n .sticky-right,\n .sticky-left {\n background: white;\n }\n\n .sticky-right {\n border-left: 1px solid #dfe1e6;\n }\n\n .sticky-left {\n border-right: 1px solid #dfe1e6;\n }\n\n &:hover,\n &.checked,\n &.selected {\n background-color: red30;\n }\n }\n\n .dataRow:nth-child(even) {\n .sticky-left,\n .sticky-right {\n background-color: bgLightGray;\n }\n }\n\n @media print {\n .filterRow .sticky {\n display: none;\n }\n\n .headRow .sticky {\n display: none;\n }\n\n .dataRow .sticky {\n display: none;\n }\n }\n\n .resizer {\n z-index: unset;\n }\n\n // hotfix table head\n .cell .sortable {\n display: flex;\n align-items: center;\n padding-right: 2px;\n }\n\n .sticky {\n position: sticky !important;\n z-index: 1;\n }\n\n .sticky-left {\n left: 0;\n }\n\n .sticky-right {\n right: 0;\n }\n"])), function (_a) {
|
|
26
26
|
var withButtonStrip = _a.withButtonStrip;
|
|
27
27
|
return (withButtonStrip ? gridButtonStripHeight : 0);
|
|
28
28
|
}, th('fonts.primary'), gridRowHeight, function (_a) {
|
|
29
|
-
var hasGroups = _a.hasGroups;
|
|
30
|
-
return gridHeadHeight + (hasGroups ? gridFilterHeight : 0);
|
|
31
|
-
}, th('colors.lightGray6'), function (_a) {
|
|
32
29
|
var hasGroupsOrFilters = _a.hasGroupsOrFilters;
|
|
33
30
|
return gridHeadHeight + (hasGroupsOrFilters ? gridFilterHeight : 0);
|
|
34
|
-
}, th('fonts.primary'), function (_a) {
|
|
31
|
+
}, th('colors.lightGray6'), th('fonts.primary'), function (_a) {
|
|
35
32
|
var theme = _a.theme;
|
|
36
33
|
return theme.colors.white;
|
|
37
34
|
});
|
|
@@ -229,7 +229,6 @@ export type GridActionsType = {
|
|
|
229
229
|
setFilters?: (filters: Filtering) => void;
|
|
230
230
|
resetFilters?: () => void;
|
|
231
231
|
addSorting?: (column: string, direction: SortingValueType) => void;
|
|
232
|
-
resetSorting?: () => void;
|
|
233
232
|
openConfigForm?: () => void;
|
|
234
233
|
closeConfigForm?: () => void;
|
|
235
234
|
clearSettings?: () => void;
|
|
@@ -19,7 +19,5 @@ export declare const getGroups: (columns: ColumnDefinition[]) => Group[];
|
|
|
19
19
|
export declare const getGroupClassNames: (group?: Group) => string;
|
|
20
20
|
export declare const getStickyCollClassNames: (sticky: boolean, stickTo?: StickTo) => string;
|
|
21
21
|
export declare const getFilters: (optimizeFilters: boolean) => FiltersConfig;
|
|
22
|
-
/** Returns true when a filter value should be counted / applied */
|
|
23
|
-
export declare const isFilterActive: (value: any) => boolean;
|
|
24
22
|
export declare const checksColumnsOrder: (colsOrder: string[], columnsDefinitions: ColumnDefinition[]) => void;
|
|
25
23
|
export {};
|
|
@@ -76,16 +76,6 @@ export var getFilters = function (optimizeFilters) {
|
|
|
76
76
|
}
|
|
77
77
|
return filters;
|
|
78
78
|
};
|
|
79
|
-
/** Returns true when a filter value should be counted / applied */
|
|
80
|
-
export var isFilterActive = function (value) {
|
|
81
|
-
if (value == null)
|
|
82
|
-
return false;
|
|
83
|
-
if (Array.isArray(value))
|
|
84
|
-
return !!value.length;
|
|
85
|
-
if (typeof value === 'object')
|
|
86
|
-
return value.value != null && value.value !== '';
|
|
87
|
-
return value !== '';
|
|
88
|
-
};
|
|
89
79
|
export var checksColumnsOrder = function (colsOrder, columnsDefinitions) {
|
|
90
80
|
var stickyRightColls = columnsDefinitions.filter(function (col) { return col.sticky === true && col.stickTo === 'right'; });
|
|
91
81
|
var stickyLeftColls = columnsDefinitions.filter(function (col) { return col.sticky === true && col.stickTo !== 'right'; });
|
|
@@ -18,7 +18,7 @@ import { useCallback } from 'react';
|
|
|
18
18
|
import { useLocation } from 'react-router';
|
|
19
19
|
import Link from '../../Link/Link';
|
|
20
20
|
import styled, { css } from '@xstyled/styled-components';
|
|
21
|
-
var StyledLink = styled(Link)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: block;\n border-top: ", ";\n padding-top: ", ";\n color: typoPrimary;\n
|
|
21
|
+
var StyledLink = styled(Link)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: block;\n border-top: ", ";\n padding-top: ", ";\n color: typoPrimary;\n\n :hover > * {\n color: typoPrimary;\n background-color: bgLightGray1;\n border-radius: 6px;\n }\n ", "\n"], ["\n display: block;\n border-top: ", ";\n padding-top: ", ";\n color: typoPrimary;\n\n :hover > * {\n color: typoPrimary;\n background-color: bgLightGray1;\n border-radius: 6px;\n }\n ", "\n"])), function (_a) {
|
|
22
22
|
var $hasSeparator = _a.$hasSeparator;
|
|
23
23
|
return ($hasSeparator ? '1px solid #D2D8DF' : 'none');
|
|
24
24
|
}, function (_a) {
|
|
@@ -87,5 +87,3 @@ export { ArrowsLeftRight } from './ArrowsLeftRight';
|
|
|
87
87
|
export { ArrowsUpDown } from './ArrowsUpDown';
|
|
88
88
|
export { Weight } from './Weight';
|
|
89
89
|
export { ArrowUpRightDownLeft } from './ArrowUpRightDownLeft';
|
|
90
|
-
export { Filter } from './Filter';
|
|
91
|
-
export { Sort } from './Sort';
|
|
@@ -87,5 +87,3 @@ export { ArrowsLeftRight } from './ArrowsLeftRight';
|
|
|
87
87
|
export { ArrowsUpDown } from './ArrowsUpDown';
|
|
88
88
|
export { Weight } from './Weight';
|
|
89
89
|
export { ArrowUpRightDownLeft } from './ArrowUpRightDownLeft';
|
|
90
|
-
export { Filter } from './Filter';
|
|
91
|
-
export { Sort } from './Sort';
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
+
import { FC } from 'react';
|
|
1
2
|
import { Props } from './types';
|
|
2
3
|
|
|
3
4
|
export declare const LanguageContext: import('react').Context<string>;
|
|
4
|
-
declare const MailstepThemeProvider:
|
|
5
|
+
declare const MailstepThemeProvider: FC<Props>;
|
|
5
6
|
export default MailstepThemeProvider;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { createContext } from 'react';
|
|
2
3
|
import { ThemeProvider, Preflight } from '@xstyled/styled-components';
|
|
3
4
|
import themes from './themes';
|
|
4
|
-
import { createContext } from 'react';
|
|
5
5
|
export var LanguageContext = createContext('en');
|
|
6
6
|
var MailstepThemeProvider = function (_a) {
|
|
7
7
|
var children = _a.children, _b = _a.theme, theme = _b === void 0 ? 'default' : _b, _c = _a.preflight, preflight = _c === void 0 ? true : _c, _d = _a.language, language = _d === void 0 ? 'en' : _d;
|
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
declare const darkTheme: {
|
|
2
|
+
colors: {
|
|
3
|
+
bgLightGray: string;
|
|
4
|
+
bgLightGray1: string;
|
|
5
|
+
lightGray1: string;
|
|
6
|
+
lightGray2: string;
|
|
7
|
+
lightGray3: string;
|
|
8
|
+
lightGray4: string;
|
|
9
|
+
lightGray5: string;
|
|
10
|
+
lightGray6: string;
|
|
11
|
+
lightGray7: string;
|
|
12
|
+
neutral20: string;
|
|
13
|
+
neutral300: string;
|
|
14
|
+
neutral500: string;
|
|
15
|
+
gray: string;
|
|
16
|
+
gray1: string;
|
|
17
|
+
gray2: string;
|
|
18
|
+
gray3: string;
|
|
19
|
+
gray4: string;
|
|
20
|
+
gray5: string;
|
|
21
|
+
blue1: string;
|
|
22
|
+
blue2: string;
|
|
23
|
+
blue3: string;
|
|
24
|
+
blue4: string;
|
|
25
|
+
textPrimary: string;
|
|
26
|
+
textTertiary: string;
|
|
27
|
+
typoPrimary: string;
|
|
28
|
+
blue10: string;
|
|
29
|
+
blue20: string;
|
|
30
|
+
blue30: string;
|
|
31
|
+
blue40: string;
|
|
32
|
+
blue50: string;
|
|
33
|
+
blue60: string;
|
|
34
|
+
blue70: string;
|
|
35
|
+
blue80: string;
|
|
36
|
+
blue90: string;
|
|
37
|
+
teal20: string;
|
|
38
|
+
teal40: string;
|
|
39
|
+
teal50: string;
|
|
40
|
+
teal60: string;
|
|
41
|
+
teal70: string;
|
|
42
|
+
teal80: string;
|
|
43
|
+
teal90: string;
|
|
44
|
+
green10: string;
|
|
45
|
+
green20: string;
|
|
46
|
+
green30: string;
|
|
47
|
+
green50: string;
|
|
48
|
+
green60: string;
|
|
49
|
+
green70: string;
|
|
50
|
+
green80: string;
|
|
51
|
+
green90: string;
|
|
52
|
+
green: string;
|
|
53
|
+
successColor: string;
|
|
54
|
+
darkGreen: string;
|
|
55
|
+
orange20: string;
|
|
56
|
+
orange30: string;
|
|
57
|
+
orange50: string;
|
|
58
|
+
orange60: string;
|
|
59
|
+
orange80: string;
|
|
60
|
+
yellow10: string;
|
|
61
|
+
yellow20: string;
|
|
62
|
+
yellow60: string;
|
|
63
|
+
yellow70: string;
|
|
64
|
+
yellow1: string;
|
|
65
|
+
yellow2: string;
|
|
66
|
+
red10: string;
|
|
67
|
+
red20: string;
|
|
68
|
+
red30: string;
|
|
69
|
+
red50: string;
|
|
70
|
+
red70: string;
|
|
71
|
+
red1: string;
|
|
72
|
+
red2: string;
|
|
73
|
+
red3: string;
|
|
74
|
+
red60: string;
|
|
75
|
+
red80: string;
|
|
76
|
+
dangerColor: string;
|
|
77
|
+
purple20: string;
|
|
78
|
+
purple40: string;
|
|
79
|
+
purple50: string;
|
|
80
|
+
purple60: string;
|
|
81
|
+
purple80: string;
|
|
82
|
+
purple90: string;
|
|
83
|
+
magenta10: string;
|
|
84
|
+
magenta20: string;
|
|
85
|
+
magenta30: string;
|
|
86
|
+
magenta40: string;
|
|
87
|
+
magenta50: string;
|
|
88
|
+
magenta60: string;
|
|
89
|
+
magenta70: string;
|
|
90
|
+
magenta80: string;
|
|
91
|
+
magenta90: string;
|
|
92
|
+
white: string;
|
|
93
|
+
};
|
|
94
|
+
shadows: {
|
|
95
|
+
boxShadow: string;
|
|
96
|
+
dropShadow: string;
|
|
97
|
+
inputFocusBoxShadow: string;
|
|
98
|
+
dropdownMenuShadow: string;
|
|
99
|
+
tooltipBoxShadow: string;
|
|
100
|
+
cardShadow: string;
|
|
101
|
+
smooth: string;
|
|
102
|
+
dialogShadow: string;
|
|
103
|
+
headerShadow: string;
|
|
104
|
+
headerShadowB: string;
|
|
105
|
+
headerShadowNotifications: string;
|
|
106
|
+
cornerDialogShadow: string;
|
|
107
|
+
gridShadow: string;
|
|
108
|
+
tooltipShadow: string;
|
|
109
|
+
};
|
|
110
|
+
breakpoints: string[];
|
|
111
|
+
fonts: {
|
|
112
|
+
primary: string;
|
|
113
|
+
heading: string;
|
|
114
|
+
};
|
|
115
|
+
fontLinks: string[];
|
|
116
|
+
fontSizes: string[];
|
|
117
|
+
lineHeights: number[];
|
|
118
|
+
fontWeights: {
|
|
119
|
+
light: number;
|
|
120
|
+
normal: number;
|
|
121
|
+
medium: number;
|
|
122
|
+
semiBold: number;
|
|
123
|
+
bold: number;
|
|
124
|
+
};
|
|
125
|
+
letterSpacings: {
|
|
126
|
+
default: null;
|
|
127
|
+
sm: string;
|
|
128
|
+
md: string;
|
|
129
|
+
lg: string;
|
|
130
|
+
};
|
|
131
|
+
borders: {
|
|
132
|
+
slim: string;
|
|
133
|
+
mediumSlim: string;
|
|
134
|
+
medium: string;
|
|
135
|
+
mediumThick: string;
|
|
136
|
+
thick: string;
|
|
137
|
+
};
|
|
138
|
+
radii: {
|
|
139
|
+
sm: string;
|
|
140
|
+
md: string;
|
|
141
|
+
ml: string;
|
|
142
|
+
lg: string;
|
|
143
|
+
xl: string;
|
|
144
|
+
};
|
|
145
|
+
space: number[];
|
|
146
|
+
transitions: {
|
|
147
|
+
simpleLong: string;
|
|
148
|
+
inputTransition: string;
|
|
149
|
+
};
|
|
150
|
+
zIndices: number[];
|
|
151
|
+
};
|
|
152
|
+
export default darkTheme;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
import defaultTheme from './default';
|
|
13
|
+
var darkTheme = __assign(__assign({}, defaultTheme), { colors: __assign(__assign({}, defaultTheme.colors), { bgLightGray: '#131A27', bgLightGray1: '#1E2A3A', lightGray1: '#1A2435', lightGray2: '#162030', lightGray3: '#2E3A4A', lightGray4: '#3A4656', lightGray5: '#4A5666', lightGray6: '#2E3A4A', lightGray7: '#253040', neutral20: '#1E2A3A', neutral300: '#9AABBF', neutral500: '#B0C0D4', gray: '#7A8A9A', gray1: '#8A9AAA', gray2: '#6A7A8A', gray3: '#9AACBA', gray4: '#B0C4D8', gray5: '#8A9CB0', blue1: '#D0E0F0', blue2: '#C0D4E8', blue3: '#E0ECF8', blue4: '#F0F6FC', textPrimary: '#E8ECF2', textTertiary: '#8A9AB0', typoPrimary: '#D0E0F0', blue10: '#0D1A2A', blue20: '#122440', blue30: '#1A3050', blue40: '#6FADFF', blue50: '#4A9AFF', blue60: '#3A8AFF', blue70: '#5A9AFF', blue80: '#6AA8FF', blue90: '#8ABAE8', teal20: '#0A1E24', teal40: '#1A3A40', teal50: '#1aa1a7', teal60: '#00B1D0', teal70: '#1aa1da', teal80: '#2AB0C0', teal90: '#3AC0D0', green10: '#0A1A10', green20: '#102A18', green30: '#1A3A22', green50: '#81dd91', green60: '#2AB860', green70: '#3AC870', green80: '#4AD880', green90: '#2AC880', green: '#13CE62', successColor: '#2AB858', darkGreen: '#2AB860', orange20: '#1A1408', orange30: '#2A2010', orange50: '#ff9f43', orange60: '#FFA820', orange80: '#D08020', yellow10: '#1A1A08', yellow20: '#2A2810', yellow60: '#FFE600', yellow70: '#FFD702', yellow1: '#FFD702', yellow2: '#F2E871', red10: '#1A0A08', red20: '#2A1410', red30: '#3A1E18', red50: '#ff7c7b', red70: '#E84040', red1: '#E84040', red2: '#F05040', red3: '#C83030', red60: '#E84040', red80: '#D03030', dangerColor: '#F04838', purple20: '#14102A', purple40: '#2A8AC0', purple50: '#6A90D0', purple60: '#8A78E0', purple80: '#6A5AC0', purple90: '#4A6AB0', magenta10: '#1A0A14', magenta20: '#2A1420', magenta30: '#3A1E30', magenta40: '#FFAFD2', magenta50: '#FF7EB6', magenta60: '#EE5396', magenta70: '#D12771', magenta80: '#9F1853', magenta90: '#7B1340' }), shadows: __assign(__assign({}, defaultTheme.shadows), { boxShadow: '0px 5px 60px rgba(0, 0, 0, 0.3)', dropShadow: '0px 5px 40px rgba(0, 0, 0, 0.3)', inputFocusBoxShadow: '0 3px 10px 0 rgba(0, 0, 0, 0.4)', dropdownMenuShadow: '0 5px 25px rgba(0, 0, 0, 0.3)', tooltipBoxShadow: '0px 2px 20px rgba(0, 0, 0, 0.3)', cardShadow: '0 3px 10px 0 rgba(0, 0, 0, 0.4)', smooth: '0px 4px 25px 0px rgba(0, 0, 0, 0.3)', dialogShadow: '0px 4px 23px 0px rgba(0, 0, 0, 0.25)', headerShadow: '1px 2px 3px rgba(0, 0, 0, 0.4)', headerShadowB: '1px 1px 3px rgba(0, 0, 0, 0.4)', headerShadowNotifications: '1px 1px 2px rgba(0, 0, 0, 0.4)', cornerDialogShadow: '1px 1px 3px 1px rgba(0, 0, 0, 0.4)', gridShadow: '0px 1px 4px 0px rgba(0, 0, 0, 0.3)', tooltipShadow: '0px 2px 20px 0px rgba(0, 0, 0, 0.3)' }) });
|
|
14
|
+
export default darkTheme;
|
|
@@ -150,7 +150,6 @@ declare const themes: {
|
|
|
150
150
|
};
|
|
151
151
|
zIndices: number[];
|
|
152
152
|
};
|
|
153
|
-
light: import('..').Theme;
|
|
154
153
|
mailwise: {
|
|
155
154
|
screens: {
|
|
156
155
|
_: number;
|
|
@@ -354,5 +353,156 @@ declare const themes: {
|
|
|
354
353
|
};
|
|
355
354
|
zIndices: number[];
|
|
356
355
|
};
|
|
356
|
+
dark: {
|
|
357
|
+
colors: {
|
|
358
|
+
bgLightGray: string;
|
|
359
|
+
bgLightGray1: string;
|
|
360
|
+
lightGray1: string;
|
|
361
|
+
lightGray2: string;
|
|
362
|
+
lightGray3: string;
|
|
363
|
+
lightGray4: string;
|
|
364
|
+
lightGray5: string;
|
|
365
|
+
lightGray6: string;
|
|
366
|
+
lightGray7: string;
|
|
367
|
+
neutral20: string;
|
|
368
|
+
neutral300: string;
|
|
369
|
+
neutral500: string;
|
|
370
|
+
gray: string;
|
|
371
|
+
gray1: string;
|
|
372
|
+
gray2: string;
|
|
373
|
+
gray3: string;
|
|
374
|
+
gray4: string;
|
|
375
|
+
gray5: string;
|
|
376
|
+
blue1: string;
|
|
377
|
+
blue2: string;
|
|
378
|
+
blue3: string;
|
|
379
|
+
blue4: string;
|
|
380
|
+
textPrimary: string;
|
|
381
|
+
textTertiary: string;
|
|
382
|
+
typoPrimary: string;
|
|
383
|
+
blue10: string;
|
|
384
|
+
blue20: string;
|
|
385
|
+
blue30: string;
|
|
386
|
+
blue40: string;
|
|
387
|
+
blue50: string;
|
|
388
|
+
blue60: string;
|
|
389
|
+
blue70: string;
|
|
390
|
+
blue80: string;
|
|
391
|
+
blue90: string;
|
|
392
|
+
teal20: string;
|
|
393
|
+
teal40: string;
|
|
394
|
+
teal50: string;
|
|
395
|
+
teal60: string;
|
|
396
|
+
teal70: string;
|
|
397
|
+
teal80: string;
|
|
398
|
+
teal90: string;
|
|
399
|
+
green10: string;
|
|
400
|
+
green20: string;
|
|
401
|
+
green30: string;
|
|
402
|
+
green50: string;
|
|
403
|
+
green60: string;
|
|
404
|
+
green70: string;
|
|
405
|
+
green80: string;
|
|
406
|
+
green90: string;
|
|
407
|
+
green: string;
|
|
408
|
+
successColor: string;
|
|
409
|
+
darkGreen: string;
|
|
410
|
+
orange20: string;
|
|
411
|
+
orange30: string;
|
|
412
|
+
orange50: string;
|
|
413
|
+
orange60: string;
|
|
414
|
+
orange80: string;
|
|
415
|
+
yellow10: string;
|
|
416
|
+
yellow20: string;
|
|
417
|
+
yellow60: string;
|
|
418
|
+
yellow70: string;
|
|
419
|
+
yellow1: string;
|
|
420
|
+
yellow2: string;
|
|
421
|
+
red10: string;
|
|
422
|
+
red20: string;
|
|
423
|
+
red30: string;
|
|
424
|
+
red50: string;
|
|
425
|
+
red70: string;
|
|
426
|
+
red1: string;
|
|
427
|
+
red2: string;
|
|
428
|
+
red3: string;
|
|
429
|
+
red60: string;
|
|
430
|
+
red80: string;
|
|
431
|
+
dangerColor: string;
|
|
432
|
+
purple20: string;
|
|
433
|
+
purple40: string;
|
|
434
|
+
purple50: string;
|
|
435
|
+
purple60: string;
|
|
436
|
+
purple80: string;
|
|
437
|
+
purple90: string;
|
|
438
|
+
magenta10: string;
|
|
439
|
+
magenta20: string;
|
|
440
|
+
magenta30: string;
|
|
441
|
+
magenta40: string;
|
|
442
|
+
magenta50: string;
|
|
443
|
+
magenta60: string;
|
|
444
|
+
magenta70: string;
|
|
445
|
+
magenta80: string;
|
|
446
|
+
magenta90: string;
|
|
447
|
+
white: string;
|
|
448
|
+
};
|
|
449
|
+
shadows: {
|
|
450
|
+
boxShadow: string;
|
|
451
|
+
dropShadow: string;
|
|
452
|
+
inputFocusBoxShadow: string;
|
|
453
|
+
dropdownMenuShadow: string;
|
|
454
|
+
tooltipBoxShadow: string;
|
|
455
|
+
cardShadow: string;
|
|
456
|
+
smooth: string;
|
|
457
|
+
dialogShadow: string;
|
|
458
|
+
headerShadow: string;
|
|
459
|
+
headerShadowB: string;
|
|
460
|
+
headerShadowNotifications: string;
|
|
461
|
+
cornerDialogShadow: string;
|
|
462
|
+
gridShadow: string;
|
|
463
|
+
tooltipShadow: string;
|
|
464
|
+
};
|
|
465
|
+
breakpoints: string[];
|
|
466
|
+
fonts: {
|
|
467
|
+
primary: string;
|
|
468
|
+
heading: string;
|
|
469
|
+
};
|
|
470
|
+
fontLinks: string[];
|
|
471
|
+
fontSizes: string[];
|
|
472
|
+
lineHeights: number[];
|
|
473
|
+
fontWeights: {
|
|
474
|
+
light: number;
|
|
475
|
+
normal: number;
|
|
476
|
+
medium: number;
|
|
477
|
+
semiBold: number;
|
|
478
|
+
bold: number;
|
|
479
|
+
};
|
|
480
|
+
letterSpacings: {
|
|
481
|
+
default: null;
|
|
482
|
+
sm: string;
|
|
483
|
+
md: string;
|
|
484
|
+
lg: string;
|
|
485
|
+
};
|
|
486
|
+
borders: {
|
|
487
|
+
slim: string;
|
|
488
|
+
mediumSlim: string;
|
|
489
|
+
medium: string;
|
|
490
|
+
mediumThick: string;
|
|
491
|
+
thick: string;
|
|
492
|
+
};
|
|
493
|
+
radii: {
|
|
494
|
+
sm: string;
|
|
495
|
+
md: string;
|
|
496
|
+
ml: string;
|
|
497
|
+
lg: string;
|
|
498
|
+
xl: string;
|
|
499
|
+
};
|
|
500
|
+
space: number[];
|
|
501
|
+
transitions: {
|
|
502
|
+
simpleLong: string;
|
|
503
|
+
inputTransition: string;
|
|
504
|
+
};
|
|
505
|
+
zIndices: number[];
|
|
506
|
+
};
|
|
357
507
|
};
|
|
358
508
|
export default themes;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import defaultTheme from './default';
|
|
2
|
-
import light from './light';
|
|
3
2
|
import mailwise from './mailwise';
|
|
3
|
+
import darkTheme from './dark';
|
|
4
4
|
var themes = {
|
|
5
5
|
default: defaultTheme,
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
mailwise: mailwise,
|
|
7
|
+
dark: darkTheme
|
|
8
8
|
};
|
|
9
9
|
export default themes;
|
|
@@ -1,8 +1,6 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
2
|
|
|
3
|
-
export type Color =
|
|
4
|
-
[key: string]: string;
|
|
5
|
-
};
|
|
3
|
+
export type Color = Record<string, string>;
|
|
6
4
|
export type Theme = {
|
|
7
5
|
breakpoints?: {
|
|
8
6
|
xs: number;
|
|
@@ -11,42 +9,24 @@ export type Theme = {
|
|
|
11
9
|
lg: number;
|
|
12
10
|
xl: number;
|
|
13
11
|
};
|
|
14
|
-
colors?:
|
|
15
|
-
|
|
16
|
-
};
|
|
17
|
-
fonts?: {
|
|
18
|
-
[key: string]: string;
|
|
19
|
-
};
|
|
12
|
+
colors?: Record<string, string | Color>;
|
|
13
|
+
fonts?: Record<string, string>;
|
|
20
14
|
fontLinks?: string[];
|
|
21
15
|
fontSizes?: string[];
|
|
22
|
-
fontWeights?:
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
};
|
|
28
|
-
borders?: {
|
|
29
|
-
[key: string]: string;
|
|
30
|
-
};
|
|
31
|
-
radii?: {
|
|
32
|
-
[key: string]: string;
|
|
33
|
-
};
|
|
34
|
-
shadows?: {
|
|
35
|
-
[key: string]: string;
|
|
36
|
-
};
|
|
16
|
+
fontWeights?: Record<string, number | null>;
|
|
17
|
+
letterSpacings?: Record<string, string | null>;
|
|
18
|
+
borders?: Record<string, string>;
|
|
19
|
+
radii?: Record<string, string>;
|
|
20
|
+
shadows?: Record<string, string>;
|
|
37
21
|
spaces?: number[];
|
|
38
22
|
lineHeights?: number[];
|
|
39
|
-
transitions?:
|
|
40
|
-
[key: string]: string;
|
|
41
|
-
};
|
|
23
|
+
transitions?: Record<string, string>;
|
|
42
24
|
zIndices?: number[];
|
|
43
25
|
};
|
|
44
|
-
export type Themes =
|
|
45
|
-
[key: string]: Theme;
|
|
46
|
-
};
|
|
26
|
+
export type Themes = Record<string, Theme>;
|
|
47
27
|
export interface Props {
|
|
48
|
-
children:
|
|
49
|
-
theme: 'default' | '
|
|
28
|
+
children: ReactNode;
|
|
29
|
+
theme: 'default' | 'mailwise' | 'dark';
|
|
50
30
|
preflight?: boolean;
|
|
51
31
|
language?: string;
|
|
52
32
|
}
|