@xfers/design-system 2.53.0 → 3.0.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/cjs/index.js +6 -6
- package/cjs/index.js.map +1 -1
- package/dist/components/ActionButton/ActionButton.js +2 -2
- package/dist/components/ActionButton/ActionButton.js.map +1 -1
- package/dist/components/ActionCard/index.js +2 -2
- package/dist/components/ActionCard/index.js.map +1 -1
- package/dist/components/BadgeIcon/index.js +2 -2
- package/dist/components/BadgeIcon/index.js.map +1 -1
- package/dist/components/Banner/index.js +2 -2
- package/dist/components/Banner/index.js.map +1 -1
- package/dist/components/Button/Button.js +3 -3
- package/dist/components/Button/Button.js.map +1 -1
- package/dist/components/Card/index.js +2 -2
- package/dist/components/Card/index.js.map +1 -1
- package/dist/components/Carousel/index.js +2 -2
- package/dist/components/Carousel/index.js.map +1 -1
- package/dist/components/Checkbox/index.js +1 -1
- package/dist/components/Checkbox/index.js.map +1 -1
- package/dist/components/ContentBreakdown/index.js +2 -2
- package/dist/components/ContentBreakdown/index.js.map +1 -1
- package/dist/components/DatePicker/index.js +3 -3
- package/dist/components/DatePicker/index.js.map +1 -1
- package/dist/components/DeprecatedModal/index.js +2 -2
- package/dist/components/DeprecatedModal/index.js.map +1 -1
- package/dist/components/Divider/index.js +2 -2
- package/dist/components/Divider/index.js.map +1 -1
- package/dist/components/Dropdown/index.js +2 -2
- package/dist/components/Dropdown/index.js.map +1 -1
- package/dist/components/ErrorPage/index.js +2 -2
- package/dist/components/ErrorPage/index.js.map +1 -1
- package/dist/components/Input/index.js +4 -4
- package/dist/components/Input/index.js.map +1 -1
- package/dist/components/Link/index.js +2 -2
- package/dist/components/Link/index.js.map +1 -1
- package/dist/components/Modal/index.js +2 -2
- package/dist/components/Modal/index.js.map +1 -1
- package/dist/components/Note/index.js +2 -2
- package/dist/components/Note/index.js.map +1 -1
- package/dist/components/Radio/index.js +2 -2
- package/dist/components/Radio/index.js.map +1 -1
- package/dist/components/RangePicker/index.js +1 -1
- package/dist/components/RangePicker/index.js.map +1 -1
- package/dist/components/Select/index.js +3 -3
- package/dist/components/Select/index.js.map +1 -1
- package/dist/components/Select/style.js +1 -1
- package/dist/components/Select/style.js.map +1 -1
- package/dist/components/Spin/index.js +2 -2
- package/dist/components/Spin/index.js.map +1 -1
- package/dist/components/Steps/index.js +2 -2
- package/dist/components/Steps/index.js.map +1 -1
- package/dist/constants/Typography/Typography.js +71 -0
- package/dist/constants/Typography/Typography.js.map +1 -0
- package/dist/constants/Typography/Typography.styles.js +52 -0
- package/dist/constants/Typography/Typography.styles.js.map +1 -0
- package/dist/constants/Typography/Typography.types.js +3 -0
- package/dist/constants/Typography/Typography.types.js.map +1 -0
- package/dist/constants/colors.js +123 -0
- package/dist/constants/colors.js.map +1 -0
- package/dist/constants/shadow.js +11 -0
- package/dist/constants/shadow.js.map +1 -0
- package/dist/index.js +54 -50
- package/dist/index.js.map +1 -1
- package/dist/{shared/NormalizeStyles.js → theme/NormalizeStyles/index.js} +1 -1
- package/dist/theme/NormalizeStyles/index.js.map +1 -0
- package/dist/{shared/themeContext.js → theme/ThemeContext.js} +1 -1
- package/dist/theme/ThemeContext.js.map +1 -0
- package/dist/theme/theme.js +175 -0
- package/dist/theme/theme.js.map +1 -0
- package/dist/types/constants/Typography/Typography.d.ts +35 -0
- package/dist/types/constants/Typography/Typography.styles.d.ts +2 -0
- package/dist/types/constants/Typography/Typography.types.d.ts +24 -0
- package/dist/types/constants/colors.d.ts +98 -0
- package/dist/types/constants/shadow.d.ts +6 -0
- package/dist/types/index.d.ts +49 -48
- package/dist/types/theme/ThemeContext.d.ts +148 -0
- package/dist/types/theme/theme.d.ts +282 -0
- package/es/icons.js +1 -1
- package/es/index.js +6 -6
- package/es/index.js.map +1 -1
- package/es/logos.js +1 -1
- package/package.json +1 -1
- package/dist/constants/colors/black.js +0 -11
- package/dist/constants/colors/black.js.map +0 -1
- package/dist/constants/colors/blue.js +0 -14
- package/dist/constants/colors/blue.js.map +0 -1
- package/dist/constants/colors/green.js +0 -14
- package/dist/constants/colors/green.js.map +0 -1
- package/dist/constants/colors/grey.js +0 -15
- package/dist/constants/colors/grey.js.map +0 -1
- package/dist/constants/colors/index.js +0 -17
- package/dist/constants/colors/index.js.map +0 -1
- package/dist/constants/colors/red.js +0 -10
- package/dist/constants/colors/red.js.map +0 -1
- package/dist/constants/colors/white.js +0 -8
- package/dist/constants/colors/white.js.map +0 -1
- package/dist/constants/colors/yellow.js +0 -10
- package/dist/constants/colors/yellow.js.map +0 -1
- package/dist/shared/NormalizeStyles.js.map +0 -1
- package/dist/shared/theme.js +0 -114
- package/dist/shared/theme.js.map +0 -1
- package/dist/shared/themeContext.js.map +0 -1
- package/dist/types/constants/colors/black.d.ts +0 -6
- package/dist/types/constants/colors/blue.d.ts +0 -9
- package/dist/types/constants/colors/green.d.ts +0 -9
- package/dist/types/constants/colors/grey.d.ts +0 -10
- package/dist/types/constants/colors/index.d.ts +0 -7
- package/dist/types/constants/colors/red.d.ts +0 -5
- package/dist/types/constants/colors/white.d.ts +0 -3
- package/dist/types/constants/colors/yellow.d.ts +0 -5
- package/dist/types/shared/theme.d.ts +0 -163
- package/dist/types/shared/themeContext.d.ts +0 -89
- /package/dist/types/{shared/NormalizeStyles.d.ts → theme/NormalizeStyles/index.d.ts} +0 -0
package/dist/index.js
CHANGED
|
@@ -13,57 +13,57 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
13
13
|
};
|
|
14
14
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
15
15
|
// Components
|
|
16
|
-
var Button_1 = require("
|
|
16
|
+
var Button_1 = require("./components/Button");
|
|
17
17
|
Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.default; } });
|
|
18
|
-
var ActionButton_1 = require("
|
|
18
|
+
var ActionButton_1 = require("./components/ActionButton");
|
|
19
19
|
Object.defineProperty(exports, "ActionButton", { enumerable: true, get: function () { return ActionButton_1.default; } });
|
|
20
|
-
var ActionCard_1 = require("
|
|
20
|
+
var ActionCard_1 = require("./components/ActionCard");
|
|
21
21
|
Object.defineProperty(exports, "ActionCard", { enumerable: true, get: function () { return ActionCard_1.default; } });
|
|
22
|
-
var Accordion_1 = require("
|
|
22
|
+
var Accordion_1 = require("./components/Accordion");
|
|
23
23
|
Object.defineProperty(exports, "Accordion", { enumerable: true, get: function () { return Accordion_1.default; } });
|
|
24
|
-
var BadgeIcon_1 = require("
|
|
24
|
+
var BadgeIcon_1 = require("./components/BadgeIcon");
|
|
25
25
|
Object.defineProperty(exports, "BadgeIcon", { enumerable: true, get: function () { return BadgeIcon_1.default; } });
|
|
26
|
-
var Card_1 = require("
|
|
26
|
+
var Card_1 = require("./components/Card");
|
|
27
27
|
Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return Card_1.default; } });
|
|
28
|
-
var Chart_1 = require("
|
|
28
|
+
var Chart_1 = require("./components/Chart");
|
|
29
29
|
Object.defineProperty(exports, "Chart", { enumerable: true, get: function () { return Chart_1.default; } });
|
|
30
|
-
var Carousel_1 = require("
|
|
30
|
+
var Carousel_1 = require("./components/Carousel");
|
|
31
31
|
Object.defineProperty(exports, "Carousel", { enumerable: true, get: function () { return Carousel_1.default; } });
|
|
32
|
-
var Dropdown_1 = require("
|
|
32
|
+
var Dropdown_1 = require("./components/Dropdown");
|
|
33
33
|
Object.defineProperty(exports, "Dropdown", { enumerable: true, get: function () { return Dropdown_1.default; } });
|
|
34
|
-
var DynamicSelect_1 = require("
|
|
34
|
+
var DynamicSelect_1 = require("./components/DynamicSelect");
|
|
35
35
|
Object.defineProperty(exports, "DynamicSelect", { enumerable: true, get: function () { return DynamicSelect_1.default; } });
|
|
36
|
-
var Form_1 = require("
|
|
36
|
+
var Form_1 = require("./components/Form");
|
|
37
37
|
Object.defineProperty(exports, "Form", { enumerable: true, get: function () { return Form_1.default; } });
|
|
38
|
-
var Input_1 = require("
|
|
38
|
+
var Input_1 = require("./components/Input");
|
|
39
39
|
Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return Input_1.default; } });
|
|
40
|
-
var Label_1 = require("
|
|
40
|
+
var Label_1 = require("./components/Label");
|
|
41
41
|
Object.defineProperty(exports, "Label", { enumerable: true, get: function () { return Label_1.default; } });
|
|
42
|
-
var Modal_1 = require("
|
|
42
|
+
var Modal_1 = require("./components/Modal");
|
|
43
43
|
Object.defineProperty(exports, "Modal", { enumerable: true, get: function () { return Modal_1.default; } });
|
|
44
|
-
var DeprecatedModal_1 = require("
|
|
44
|
+
var DeprecatedModal_1 = require("./components/DeprecatedModal");
|
|
45
45
|
Object.defineProperty(exports, "DeprecatedModal", { enumerable: true, get: function () { return DeprecatedModal_1.default; } });
|
|
46
|
-
var Pagination_1 = require("
|
|
46
|
+
var Pagination_1 = require("./components/Pagination");
|
|
47
47
|
Object.defineProperty(exports, "Pagination", { enumerable: true, get: function () { return Pagination_1.default; } });
|
|
48
|
-
var Radio_1 = require("
|
|
48
|
+
var Radio_1 = require("./components/Radio");
|
|
49
49
|
Object.defineProperty(exports, "Radio", { enumerable: true, get: function () { return Radio_1.default; } });
|
|
50
|
-
var RangePicker_1 = require("
|
|
50
|
+
var RangePicker_1 = require("./components/RangePicker");
|
|
51
51
|
Object.defineProperty(exports, "RangePicker", { enumerable: true, get: function () { return RangePicker_1.default; } });
|
|
52
|
-
var Select_1 = require("
|
|
52
|
+
var Select_1 = require("./components/Select");
|
|
53
53
|
Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return Select_1.default; } });
|
|
54
|
-
var Steps_1 = require("
|
|
54
|
+
var Steps_1 = require("./components/Steps");
|
|
55
55
|
Object.defineProperty(exports, "Steps", { enumerable: true, get: function () { return Steps_1.default; } });
|
|
56
|
-
var Table_1 = require("
|
|
56
|
+
var Table_1 = require("./components/Table");
|
|
57
57
|
Object.defineProperty(exports, "Table", { enumerable: true, get: function () { return Table_1.default; } });
|
|
58
|
-
var Tabs_1 = require("
|
|
58
|
+
var Tabs_1 = require("./components/Tabs");
|
|
59
59
|
Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return Tabs_1.default; } });
|
|
60
|
-
var Timer_1 = require("
|
|
60
|
+
var Timer_1 = require("./components/Timer");
|
|
61
61
|
Object.defineProperty(exports, "Timer", { enumerable: true, get: function () { return Timer_1.default; } });
|
|
62
|
-
var DatePicker_1 = require("
|
|
62
|
+
var DatePicker_1 = require("./components/DatePicker");
|
|
63
63
|
Object.defineProperty(exports, "DatePicker", { enumerable: true, get: function () { return DatePicker_1.default; } });
|
|
64
|
-
var Checkbox_1 = require("
|
|
64
|
+
var Checkbox_1 = require("./components/Checkbox");
|
|
65
65
|
Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return Checkbox_1.default; } });
|
|
66
|
-
var Typography_1 = require("
|
|
66
|
+
var Typography_1 = require("./components/Typography");
|
|
67
67
|
Object.defineProperty(exports, "H1", { enumerable: true, get: function () { return Typography_1.H1; } });
|
|
68
68
|
Object.defineProperty(exports, "H2", { enumerable: true, get: function () { return Typography_1.H2; } });
|
|
69
69
|
Object.defineProperty(exports, "H3", { enumerable: true, get: function () { return Typography_1.H3; } });
|
|
@@ -71,53 +71,57 @@ Object.defineProperty(exports, "H4", { enumerable: true, get: function () { retu
|
|
|
71
71
|
Object.defineProperty(exports, "P1", { enumerable: true, get: function () { return Typography_1.P1; } });
|
|
72
72
|
Object.defineProperty(exports, "P1Bold", { enumerable: true, get: function () { return Typography_1.P1Bold; } });
|
|
73
73
|
Object.defineProperty(exports, "SmallP", { enumerable: true, get: function () { return Typography_1.SmallP; } });
|
|
74
|
-
var EmptyData_1 = require("
|
|
74
|
+
var EmptyData_1 = require("./components/EmptyData");
|
|
75
75
|
Object.defineProperty(exports, "EmptyData", { enumerable: true, get: function () { return EmptyData_1.default; } });
|
|
76
|
-
var Divider_1 = require("
|
|
76
|
+
var Divider_1 = require("./components/Divider");
|
|
77
77
|
Object.defineProperty(exports, "Divider", { enumerable: true, get: function () { return Divider_1.default; } });
|
|
78
|
-
var Link_1 = require("
|
|
78
|
+
var Link_1 = require("./components/Link");
|
|
79
79
|
Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return Link_1.default; } });
|
|
80
|
-
var Hidden_1 = require("
|
|
80
|
+
var Hidden_1 = require("./components/Hidden");
|
|
81
81
|
Object.defineProperty(exports, "Hidden", { enumerable: true, get: function () { return Hidden_1.default; } });
|
|
82
|
-
var ContentBreakdown_1 = require("
|
|
82
|
+
var ContentBreakdown_1 = require("./components/ContentBreakdown");
|
|
83
83
|
Object.defineProperty(exports, "ContentBreakdown", { enumerable: true, get: function () { return ContentBreakdown_1.default; } });
|
|
84
|
-
var Note_1 = require("
|
|
84
|
+
var Note_1 = require("./components/Note");
|
|
85
85
|
Object.defineProperty(exports, "Note", { enumerable: true, get: function () { return Note_1.default; } });
|
|
86
|
-
var Banner_1 = require("
|
|
86
|
+
var Banner_1 = require("./components/Banner");
|
|
87
87
|
Object.defineProperty(exports, "Banner", { enumerable: true, get: function () { return Banner_1.default; } });
|
|
88
|
-
var Grid_1 = require("
|
|
88
|
+
var Grid_1 = require("./components/Grid");
|
|
89
89
|
Object.defineProperty(exports, "Section", { enumerable: true, get: function () { return Grid_1.Section; } });
|
|
90
|
-
var CopyBox_1 = require("
|
|
90
|
+
var CopyBox_1 = require("./components/CopyBox");
|
|
91
91
|
Object.defineProperty(exports, "CopyBox", { enumerable: true, get: function () { return CopyBox_1.default; } });
|
|
92
|
-
var Tooltip_1 = require("
|
|
92
|
+
var Tooltip_1 = require("./components/Tooltip");
|
|
93
93
|
Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return Tooltip_1.default; } });
|
|
94
|
-
var ErrorPage_1 = require("
|
|
94
|
+
var ErrorPage_1 = require("./components/ErrorPage");
|
|
95
95
|
Object.defineProperty(exports, "ErrorPage", { enumerable: true, get: function () { return ErrorPage_1.default; } });
|
|
96
|
-
var Spin_1 = require("
|
|
96
|
+
var Spin_1 = require("./components/Spin");
|
|
97
97
|
Object.defineProperty(exports, "Spin", { enumerable: true, get: function () { return Spin_1.default; } });
|
|
98
|
-
var SummaryCard_1 = require("
|
|
98
|
+
var SummaryCard_1 = require("./components/SummaryCard");
|
|
99
99
|
Object.defineProperty(exports, "SummaryCard", { enumerable: true, get: function () { return SummaryCard_1.default; } });
|
|
100
|
-
var Timeline_1 = require("
|
|
100
|
+
var Timeline_1 = require("./components/Timeline");
|
|
101
101
|
Object.defineProperty(exports, "Timeline", { enumerable: true, get: function () { return Timeline_1.default; } });
|
|
102
102
|
// Icons
|
|
103
|
-
__exportStar(require("
|
|
103
|
+
__exportStar(require("./icons"), exports);
|
|
104
104
|
// Logos
|
|
105
|
-
__exportStar(require("
|
|
106
|
-
|
|
105
|
+
__exportStar(require("./logos"), exports);
|
|
106
|
+
// Typography
|
|
107
|
+
var Typography_2 = require("./constants/Typography/Typography");
|
|
108
|
+
Object.defineProperty(exports, "Typography", { enumerable: true, get: function () { return Typography_2.Typography; } });
|
|
109
|
+
var ThemeContext_1 = require("./theme/ThemeContext");
|
|
110
|
+
Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: function () { return ThemeContext_1.ThemeProvider; } });
|
|
111
|
+
Object.defineProperty(exports, "useTheme", { enumerable: true, get: function () { return ThemeContext_1.useTheme; } });
|
|
112
|
+
var theme_1 = require("./theme/theme");
|
|
107
113
|
Object.defineProperty(exports, "xfersTheme", { enumerable: true, get: function () { return theme_1.xfersTheme; } });
|
|
108
114
|
Object.defineProperty(exports, "straitsXTheme", { enumerable: true, get: function () { return theme_1.straitsXTheme; } });
|
|
109
|
-
var
|
|
110
|
-
Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: function () { return themeContext_1.ThemeProvider; } });
|
|
111
|
-
Object.defineProperty(exports, "useTheme", { enumerable: true, get: function () { return themeContext_1.useTheme; } });
|
|
112
|
-
var modalContext_1 = require("src/shared/modalContext");
|
|
115
|
+
var modalContext_1 = require("./shared/modalContext");
|
|
113
116
|
Object.defineProperty(exports, "ModalProvider", { enumerable: true, get: function () { return modalContext_1.ModalProvider; } });
|
|
114
117
|
Object.defineProperty(exports, "useModal", { enumerable: true, get: function () { return modalContext_1.useModal; } });
|
|
115
|
-
var breakPoints_1 = require("
|
|
118
|
+
var breakPoints_1 = require("./constants/breakPoints");
|
|
116
119
|
Object.defineProperty(exports, "EXTRA_LARGE_DESKTOP_BREAKPOINT", { enumerable: true, get: function () { return breakPoints_1.EXTRA_LARGE_DESKTOP_BREAKPOINT; } });
|
|
117
120
|
Object.defineProperty(exports, "DESKTOP_BREAKPOINT", { enumerable: true, get: function () { return breakPoints_1.DESKTOP_BREAKPOINT; } });
|
|
118
121
|
Object.defineProperty(exports, "LAPTOP_BREAKPOINT", { enumerable: true, get: function () { return breakPoints_1.LAPTOP_BREAKPOINT; } });
|
|
119
122
|
Object.defineProperty(exports, "TABLET_BREAKPOINT", { enumerable: true, get: function () { return breakPoints_1.TABLET_BREAKPOINT; } });
|
|
120
|
-
|
|
123
|
+
// TODO: deprecate below
|
|
124
|
+
var ColorStyles_1 = require("./shared/ColorStyles");
|
|
121
125
|
Object.defineProperty(exports, "BLUE_COLORS", { enumerable: true, get: function () { return ColorStyles_1.BLUE_COLORS; } });
|
|
122
126
|
Object.defineProperty(exports, "GREEN_COLORS", { enumerable: true, get: function () { return ColorStyles_1.GREEN_COLORS; } });
|
|
123
127
|
Object.defineProperty(exports, "RED_COLORS", { enumerable: true, get: function () { return ColorStyles_1.RED_COLORS; } });
|
|
@@ -127,7 +131,7 @@ Object.defineProperty(exports, "MAIN_COLORS", { enumerable: true, get: function
|
|
|
127
131
|
Object.defineProperty(exports, "ICON_COLORS", { enumerable: true, get: function () { return ColorStyles_1.ICON_COLORS; } });
|
|
128
132
|
Object.defineProperty(exports, "TEXT_COLORS", { enumerable: true, get: function () { return ColorStyles_1.TEXT_COLORS; } });
|
|
129
133
|
Object.defineProperty(exports, "BACKGROUND_COLORS", { enumerable: true, get: function () { return ColorStyles_1.BACKGROUND_COLORS; } });
|
|
130
|
-
var TypographyStyles_1 = require("
|
|
134
|
+
var TypographyStyles_1 = require("./shared/TypographyStyles");
|
|
131
135
|
Object.defineProperty(exports, "MAIN_FONT", { enumerable: true, get: function () { return TypographyStyles_1.MAIN_FONT; } });
|
|
132
136
|
Object.defineProperty(exports, "FALLBACK_FONT", { enumerable: true, get: function () { return TypographyStyles_1.FALLBACK_FONT; } });
|
|
133
137
|
Object.defineProperty(exports, "FONT_WEIGHT", { enumerable: true, get: function () { return TypographyStyles_1.FONT_WEIGHT; } });
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAAA,0EAA0E;AAC1E,iCAAiC;;;;;;;;;;;;AAEjC,aAAa;AACb,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -9,4 +9,4 @@ var core_1 = require("@emotion/core");
|
|
|
9
9
|
require("./index.css");
|
|
10
10
|
exports.default = (function () { return (react_1.default.createElement(core_1.Global, { styles: core_1.css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n body {\n color: #555555;\n padding: 0;\n margin: 0;\n -webkit-font-smoothing: auto;\n font-size: 14px;\n font-family: Inter;\n }\n\n @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n body {\n -webkit-font-smoothing: antialiased;\n }\n }\n\n p {\n padding: 0;\n margin: 0;\n }\n\n a {\n text-decoration: none;\n }\n\n img {\n vertical-align: middle;\n }\n\n * {\n padding: 0;\n margin: 0;\n font-family: Inter;\n box-sizing: border-box;\n }\n\n select {\n font-family: 'Roboto';\n }\n\n input[type='number']::-webkit-inner-spin-button,\n input[type='number']::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n "], ["\n body {\n color: #555555;\n padding: 0;\n margin: 0;\n -webkit-font-smoothing: auto;\n font-size: 14px;\n font-family: Inter;\n }\n\n @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n body {\n -webkit-font-smoothing: antialiased;\n }\n }\n\n p {\n padding: 0;\n margin: 0;\n }\n\n a {\n text-decoration: none;\n }\n\n img {\n vertical-align: middle;\n }\n\n * {\n padding: 0;\n margin: 0;\n font-family: Inter;\n box-sizing: border-box;\n }\n\n select {\n font-family: 'Roboto';\n }\n\n input[type='number']::-webkit-inner-spin-button,\n input[type='number']::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n "]))) })); });
|
|
11
11
|
var templateObject_1;
|
|
12
|
-
//# sourceMappingURL=
|
|
12
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/theme/NormalizeStyles/index.tsx"],"names":[],"mappings":";;;;;;AAAA,+BAAyB;AACzB,sCAA2C;AAC3C,uBAAoB;AAEpB,mBAAe,cAAM,OAAA,CACnB,8BAAC,aAAM,IACL,MAAM,EAAE,UAAG,+7BAAA,43BA6CV,OACD,CACH,EAjDoB,CAiDpB,EAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ThemeContext.js","sourceRoot":"","sources":["../../src/theme/ThemeContext.tsx"],"names":[],"mappings":";;;AAAA,+BAAyB;AACzB,iCAAuC;AACvC,qDAA+C;AAE/C,IAAM,YAAY,GAAG,eAAK,CAAC,aAAa,CAAC,qBAAa,CAAC,CAAA;AAMvD,IAAM,aAAa,GAAG,UAAC,EAGF;QAFnB,aAAqB,EAArB,KAAK,mBAAG,qBAAa,KAAA,EACrB,QAAQ,cAAA;IAER,OAAO,CACL,8BAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK;QACjC,8BAAC,yBAAe,OAAG;QAClB,QAAQ,CACa,CACzB,CAAA;AACH,CAAC,CAAA;AAUQ,sCAAa;AARtB,IAAM,QAAQ,GAAG;IACf,IAAM,OAAO,GAAG,eAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAA;IAC9C,IAAI,OAAO,KAAK,SAAS,EAAE;QACzB,MAAM,IAAI,KAAK,CAAC,8CAA8C,CAAC,CAAA;KAChE;IACD,OAAO,OAAO,CAAA;AAChB,CAAC,CAAA;AAEuB,4BAAQ"}
|
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
|
+
exports.straitsXTheme = exports.xfersTheme = void 0;
|
|
15
|
+
var colors_1 = require("src/constants/colors");
|
|
16
|
+
var shadow_1 = require("src/constants/shadow");
|
|
17
|
+
var spacing_1 = require("src/constants/spacing");
|
|
18
|
+
// root theme: define function level & component level colors
|
|
19
|
+
var rootTheme = {
|
|
20
|
+
spacing: {
|
|
21
|
+
xs: spacing_1.EXTRA_SMALL_SPACING,
|
|
22
|
+
sm: spacing_1.SMALL_SPACING,
|
|
23
|
+
md: spacing_1.MEDIUM_SPACING,
|
|
24
|
+
lg: spacing_1.LARGE_SPACING,
|
|
25
|
+
xl: spacing_1.EXTRA_LARGE_SPACING
|
|
26
|
+
},
|
|
27
|
+
layout: {
|
|
28
|
+
desktop: spacing_1.LAYOUT_SPACING_DESKTOP,
|
|
29
|
+
mobile: spacing_1.LAYOUT_SPACING_MOBILE
|
|
30
|
+
},
|
|
31
|
+
shadow: {
|
|
32
|
+
raised: shadow_1.SHADOW.RAISED,
|
|
33
|
+
action: shadow_1.SHADOW.ACTION,
|
|
34
|
+
overlay: shadow_1.SHADOW.OVERLAY,
|
|
35
|
+
reverseRaised: shadow_1.SHADOW.REVERSE_RAISED
|
|
36
|
+
},
|
|
37
|
+
color: {
|
|
38
|
+
background: {
|
|
39
|
+
neutral: colors_1.BACKGROUND.NEUTRAL,
|
|
40
|
+
secondaryNeutral: colors_1.BACKGROUND.SECONDARY_NEUTRAL,
|
|
41
|
+
primary: colors_1.BACKGROUND.PRIMARY,
|
|
42
|
+
secondary: colors_1.BACKGROUND.SECONDARY,
|
|
43
|
+
},
|
|
44
|
+
surface: {
|
|
45
|
+
neutral: colors_1.SURFACE.NEUTRAL,
|
|
46
|
+
secondaryNeutral: colors_1.SURFACE.SECONDARY_NEUTRAL,
|
|
47
|
+
disabledSurface: colors_1.SURFACE.DISABLED_SURFACE,
|
|
48
|
+
disabledOnSurface: colors_1.SURFACE.DISABLED_ON_SURFACE,
|
|
49
|
+
SubdueInfo: colors_1.SURFACE.SUBDUE_INFO,
|
|
50
|
+
subduePositive: colors_1.SURFACE.SUBDUE_POSITIVE,
|
|
51
|
+
subdueCritical: colors_1.SURFACE.SUBDUE_CRITICAL,
|
|
52
|
+
subdueWarning: colors_1.SURFACE.SUBDUE_WARNING
|
|
53
|
+
},
|
|
54
|
+
base: {
|
|
55
|
+
primary: colors_1.BASE.PRIMARY,
|
|
56
|
+
onContainer: colors_1.BASE.ON_CONTAINER,
|
|
57
|
+
onNeutral: colors_1.BASE.ON_NEUTRAL,
|
|
58
|
+
onNeutralSecondary: colors_1.BASE.ON_NEUTRAL_SECONDARY,
|
|
59
|
+
info: colors_1.BASE.INFO,
|
|
60
|
+
warning: colors_1.BASE.WARNING,
|
|
61
|
+
critical: colors_1.BASE.CRITICAL,
|
|
62
|
+
line: colors_1.BASE.LINE,
|
|
63
|
+
overlay: colors_1.BASE.OVERLAY
|
|
64
|
+
},
|
|
65
|
+
interactive: {
|
|
66
|
+
hoverPrimary: colors_1.INTERACTIVE.HOVER_PRIMARY,
|
|
67
|
+
focusDefault: colors_1.INTERACTIVE.FOCUS_DEFAULT,
|
|
68
|
+
pressedPrimary: colors_1.INTERACTIVE.PRESSED_PRIMARY,
|
|
69
|
+
selected: colors_1.INTERACTIVE.SELECTED,
|
|
70
|
+
hoverSurface: colors_1.INTERACTIVE.HOVER_SURFACE,
|
|
71
|
+
focusSurface: colors_1.INTERACTIVE.FOCUS_SURFACE,
|
|
72
|
+
pressedSurface: colors_1.INTERACTIVE.PRESSED_SURFACE,
|
|
73
|
+
hoverCritical: colors_1.INTERACTIVE.HOVER_CRITICAL,
|
|
74
|
+
pressedCritical: colors_1.INTERACTIVE.PRESSED_CRITICAL
|
|
75
|
+
},
|
|
76
|
+
status: {
|
|
77
|
+
info: colors_1.STATUS.INFO,
|
|
78
|
+
positive: colors_1.STATUS.POSITIVE,
|
|
79
|
+
warning: colors_1.STATUS.WARNING,
|
|
80
|
+
critical: colors_1.STATUS.CRITICAL
|
|
81
|
+
},
|
|
82
|
+
component: {
|
|
83
|
+
buttonDisabled: colors_1.COMPONENT.BUTTON_DISABLED,
|
|
84
|
+
buttonPrimary: colors_1.COMPONENT.BUTTON_PRIMARY,
|
|
85
|
+
labelInput: colors_1.COMPONENT.LABEL_INPUT,
|
|
86
|
+
helperInput: colors_1.COMPONENT.HELPER_INPUT,
|
|
87
|
+
placeholderInput: colors_1.COMPONENT.PLACEHOLDER_INPUT
|
|
88
|
+
}
|
|
89
|
+
},
|
|
90
|
+
// TODO: deprecate below
|
|
91
|
+
text: {
|
|
92
|
+
default: colors_1.BLACK.DEFAULT,
|
|
93
|
+
white: colors_1.WHITE.DEFAULT
|
|
94
|
+
},
|
|
95
|
+
button: {
|
|
96
|
+
background: colors_1.WHITE.DEFAULT,
|
|
97
|
+
color: colors_1.GREEN.DEFAULT,
|
|
98
|
+
border: colors_1.GREY.S200,
|
|
99
|
+
hover: colors_1.BLACK.T10
|
|
100
|
+
},
|
|
101
|
+
actionButton: {
|
|
102
|
+
color: colors_1.GREY.S400,
|
|
103
|
+
hover: colors_1.GREY.T10
|
|
104
|
+
},
|
|
105
|
+
neutral: {
|
|
106
|
+
text: colors_1.GREY.S400,
|
|
107
|
+
emphasis: colors_1.GREY.S300,
|
|
108
|
+
border: colors_1.GREY.S200,
|
|
109
|
+
background: colors_1.GREY.S100,
|
|
110
|
+
white: colors_1.WHITE.DEFAULT,
|
|
111
|
+
bluish: colors_1.GREY.BLUISH
|
|
112
|
+
},
|
|
113
|
+
success: {
|
|
114
|
+
text: colors_1.GREEN.S400,
|
|
115
|
+
emphasis: colors_1.GREEN.S300,
|
|
116
|
+
border: colors_1.GREEN.S300,
|
|
117
|
+
background: colors_1.GREEN.S100
|
|
118
|
+
},
|
|
119
|
+
warning: {
|
|
120
|
+
text: colors_1.YELLOW.S400,
|
|
121
|
+
emphasis: colors_1.YELLOW.S300,
|
|
122
|
+
border: colors_1.YELLOW.S300,
|
|
123
|
+
background: colors_1.YELLOW.S100
|
|
124
|
+
},
|
|
125
|
+
error: {
|
|
126
|
+
text: colors_1.RED.S400,
|
|
127
|
+
emphasis: colors_1.RED.S300,
|
|
128
|
+
border: colors_1.RED.S300,
|
|
129
|
+
background: colors_1.RED.S100
|
|
130
|
+
},
|
|
131
|
+
notification: {
|
|
132
|
+
text: colors_1.BLUE.S300,
|
|
133
|
+
emphasis: colors_1.BLUE.DEFAULT,
|
|
134
|
+
background: colors_1.BLUE.S100
|
|
135
|
+
},
|
|
136
|
+
card: {
|
|
137
|
+
background: {
|
|
138
|
+
default: colors_1.WHITE.DEFAULT,
|
|
139
|
+
dark: colors_1.BLACK.T10
|
|
140
|
+
}
|
|
141
|
+
},
|
|
142
|
+
divider: {
|
|
143
|
+
background: colors_1.GREY.S200
|
|
144
|
+
}
|
|
145
|
+
};
|
|
146
|
+
// define brand level colors
|
|
147
|
+
exports.xfersTheme = __assign(__assign({}, rootTheme), { brand: {
|
|
148
|
+
primary: {
|
|
149
|
+
default: colors_1.BLUE.DEFAULT,
|
|
150
|
+
emphasis: colors_1.BLUE.S300,
|
|
151
|
+
background: colors_1.BLUE.S100,
|
|
152
|
+
contrast: colors_1.WHITE.DEFAULT,
|
|
153
|
+
illustration: colors_1.BLUE.DEFAULT
|
|
154
|
+
},
|
|
155
|
+
action: {
|
|
156
|
+
default: colors_1.BLUE.DEFAULT,
|
|
157
|
+
hover: colors_1.BLUE.T10,
|
|
158
|
+
disabledOpacity: 0.7
|
|
159
|
+
}
|
|
160
|
+
} });
|
|
161
|
+
exports.straitsXTheme = __assign(__assign({}, rootTheme), { brand: {
|
|
162
|
+
primary: {
|
|
163
|
+
default: colors_1.GREEN.DEFAULT,
|
|
164
|
+
emphasis: colors_1.GREEN.DEFAULT,
|
|
165
|
+
background: colors_1.GREEN.G100,
|
|
166
|
+
contrast: colors_1.WHITE.DEFAULT,
|
|
167
|
+
illustration: colors_1.GREEN.S500
|
|
168
|
+
},
|
|
169
|
+
action: {
|
|
170
|
+
default: colors_1.GREEN.DEFAULT,
|
|
171
|
+
hover: colors_1.GREEN.HOVER,
|
|
172
|
+
disabledOpacity: 0.7
|
|
173
|
+
}
|
|
174
|
+
} });
|
|
175
|
+
//# sourceMappingURL=theme.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/theme/theme.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { TypographyProps } from './Typography.types';
|
|
3
|
+
/**
|
|
4
|
+
* Display are reserved for short, important text or numerals. They work best on large screens. (Landing Page, Hero Banner)
|
|
5
|
+
* @param {'large'|'medium'|'small'} props.size - the size of the Display typography
|
|
6
|
+
*/
|
|
7
|
+
declare function Display(props: TypographyProps): JSX.Element;
|
|
8
|
+
/**
|
|
9
|
+
* Headline are best-suited for short, high-emphasis text on smaller screens. These styles can be good for marking primary passages of text or important regions of content.
|
|
10
|
+
* @param {'large'|'medium'|'small'} props.size - the size of the Headline typography
|
|
11
|
+
*/
|
|
12
|
+
declare function Headline(props: TypographyProps): JSX.Element;
|
|
13
|
+
/**
|
|
14
|
+
* Title are used for shorter, high-emphasis text. For example, consider using title styles to divide secondary passages of text or secondary regions of content (Highest Text for Mobile, Tab and Desktop)
|
|
15
|
+
* @param {'large'|'medium'|'small'} props.size - the size of the Title typography
|
|
16
|
+
*/
|
|
17
|
+
declare function Title(props: TypographyProps): JSX.Element;
|
|
18
|
+
/**
|
|
19
|
+
* Label are used for areas of the UI such as text inside of components or very small supporting text in the content body, like captions.
|
|
20
|
+
* @param {'large'|'medium'|'small'} props.size - the size of the Label typography
|
|
21
|
+
*/
|
|
22
|
+
declare function Label(props: TypographyProps): JSX.Element;
|
|
23
|
+
/**
|
|
24
|
+
* Body are used for longer passages of text. It uses typefaces intended for body text. This helps ensure readability at smaller sizes and in longer passages. Avoid expressive or decorative fonts for body text because these can be harder to read at small sizes.
|
|
25
|
+
* @param {'large'|'medium'|'small'} props.size - the size of the Body typography
|
|
26
|
+
*/
|
|
27
|
+
declare function Body(props: TypographyProps): JSX.Element;
|
|
28
|
+
declare const Typography: {
|
|
29
|
+
Display: typeof Display;
|
|
30
|
+
Headline: typeof Headline;
|
|
31
|
+
Title: typeof Title;
|
|
32
|
+
Label: typeof Label;
|
|
33
|
+
Body: typeof Body;
|
|
34
|
+
};
|
|
35
|
+
export { Typography };
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare type TypographyElementType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
|
|
3
|
+
export declare type TypographyLevelProps = 'display' | 'headline' | 'title' | 'label' | 'body';
|
|
4
|
+
export declare type TypographySizeProps = 'lg' | 'md' | 'sm';
|
|
5
|
+
export declare type TypographyDisplayProps = 'inline' | 'block' | 'flex' | 'grid' | 'inline-block' | 'inline-flex' | 'inline-grid' | 'none' | 'initial' | 'inherit';
|
|
6
|
+
export declare type TypographyOverflowProps = 'normal' | 'wrap' | 'hidden';
|
|
7
|
+
export declare type TypographyProps = {
|
|
8
|
+
/** Type of the HTML element */
|
|
9
|
+
as?: TypographyElementType;
|
|
10
|
+
/** Size of text - 'lg' | 'md' | 'sm' */
|
|
11
|
+
size: TypographySizeProps;
|
|
12
|
+
/** Set the display attribute of the element. Defaults to `display: block;` */
|
|
13
|
+
display?: TypographyDisplayProps;
|
|
14
|
+
/** Set the overflow attribute of the element. Defaults to `normal` */
|
|
15
|
+
overflow?: TypographyOverflowProps;
|
|
16
|
+
/** Set the font color. Defaults to `color.base.onSurface` */
|
|
17
|
+
color?: string;
|
|
18
|
+
/** Set the children inside the element */
|
|
19
|
+
children: React.ReactNode;
|
|
20
|
+
/** Set custom class properties */
|
|
21
|
+
className?: string;
|
|
22
|
+
/** Set custom style properties */
|
|
23
|
+
style?: React.CSSProperties;
|
|
24
|
+
};
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
export declare enum BLACK {
|
|
2
|
+
DEFAULT = "#1B2736",
|
|
3
|
+
T10 = "#2C4058",
|
|
4
|
+
T20 = "#3E597A",
|
|
5
|
+
T30 = "#4F719C"
|
|
6
|
+
}
|
|
7
|
+
export declare enum BLUE {
|
|
8
|
+
DEFAULT = "#2F8DEE",
|
|
9
|
+
T10 = "#5FA8F2",
|
|
10
|
+
T20 = "#8EC2F6",
|
|
11
|
+
T40 = "#ECF5FD",
|
|
12
|
+
S400 = "#1863B0",
|
|
13
|
+
S300 = "#3585E6",
|
|
14
|
+
S100 = "#EBF5FF"
|
|
15
|
+
}
|
|
16
|
+
export declare enum GREEN {
|
|
17
|
+
S500 = "#00D37E",
|
|
18
|
+
S400 = "#189C08",
|
|
19
|
+
S300 = "#43CC32",
|
|
20
|
+
S100 = "#F0FFF3",
|
|
21
|
+
DEFAULT = "#00A965",
|
|
22
|
+
G100 = "#F0FFF9",
|
|
23
|
+
HOVER = "#008f56"
|
|
24
|
+
}
|
|
25
|
+
export declare enum GREY {
|
|
26
|
+
S500 = "#777777",
|
|
27
|
+
S400 = "#959595",
|
|
28
|
+
T10 = "#ADADAD",
|
|
29
|
+
S300 = "#CACACA",
|
|
30
|
+
S200 = "#E8E8E8",
|
|
31
|
+
S100 = "#F6F7F9",
|
|
32
|
+
S50 = "#FFFFFF",
|
|
33
|
+
BLUISH = "#D3D7DE"
|
|
34
|
+
}
|
|
35
|
+
export declare enum RED {
|
|
36
|
+
S400 = "#B71515",
|
|
37
|
+
S300 = "#E22726",
|
|
38
|
+
S100 = "#FFF0F0"
|
|
39
|
+
}
|
|
40
|
+
export declare enum WHITE {
|
|
41
|
+
DEFAULT = "#FFFFFF"
|
|
42
|
+
}
|
|
43
|
+
export declare enum YELLOW {
|
|
44
|
+
S400 = "#8D7700",
|
|
45
|
+
S300 = "#E5C412",
|
|
46
|
+
S100 = "#FFFBE9"
|
|
47
|
+
}
|
|
48
|
+
export declare enum BACKGROUND {
|
|
49
|
+
NEUTRAL = "#FFFFFF",
|
|
50
|
+
SECONDARY_NEUTRAL = "#F6F7F9",
|
|
51
|
+
PRIMARY = "",
|
|
52
|
+
SECONDARY = "#F6FEFB"
|
|
53
|
+
}
|
|
54
|
+
export declare enum SURFACE {
|
|
55
|
+
NEUTRAL = "#FFFFFF",
|
|
56
|
+
SECONDARY_NEUTRAL = "#F6F7F9",
|
|
57
|
+
DISABLED_SURFACE = "#F2F4F5",
|
|
58
|
+
DISABLED_ON_SURFACE = "#9D9E9F",
|
|
59
|
+
SUBDUE_INFO = "#E7ECFC",
|
|
60
|
+
SUBDUE_POSITIVE = "#E5F8F3",
|
|
61
|
+
SUBDUE_WARNING = "#FEF3E7",
|
|
62
|
+
SUBDUE_CRITICAL = "##FBEAE9"
|
|
63
|
+
}
|
|
64
|
+
export declare enum BASE {
|
|
65
|
+
PRIMARY = "#00A965",
|
|
66
|
+
ON_CONTAINER = "#FFFFFF",
|
|
67
|
+
ON_NEUTRAL = "#121212",
|
|
68
|
+
ON_NEUTRAL_SECONDARY = "#777777",
|
|
69
|
+
INFO = "#3583E6",
|
|
70
|
+
CRITICAL = "",
|
|
71
|
+
WARNING = "#8D7700",
|
|
72
|
+
LINE = "#E8E8E8",
|
|
73
|
+
OVERLAY = "rgba(0, 0, 0, 0.5)"
|
|
74
|
+
}
|
|
75
|
+
export declare enum INTERACTIVE {
|
|
76
|
+
HOVER_PRIMARY = "#008F56",
|
|
77
|
+
FOCUS_DEFAULT = "#42FFB4",
|
|
78
|
+
PRESSED_PRIMARY = "#007546",
|
|
79
|
+
SELECTED = "#F0FFF9",
|
|
80
|
+
HOVER_SURFACE = "#ECECEC",
|
|
81
|
+
FOCUS_SURFACE = "#E3E3E3",
|
|
82
|
+
PRESSED_SURFACE = "#E3E3E3",
|
|
83
|
+
HOVER_CRITICAL = "#B92B22",
|
|
84
|
+
PRESSED_CRITICAL = "#A92920"
|
|
85
|
+
}
|
|
86
|
+
export declare enum STATUS {
|
|
87
|
+
INFO = "#0C45E1",
|
|
88
|
+
POSITIVE = "#00B583",
|
|
89
|
+
WARNING = "#F18813",
|
|
90
|
+
CRITICAL = "#E22726"
|
|
91
|
+
}
|
|
92
|
+
export declare enum COMPONENT {
|
|
93
|
+
BUTTON_DISABLED = "#BDBDBD",
|
|
94
|
+
BUTTON_PRIMARY = "#00A965",
|
|
95
|
+
LABEL_INPUT = "#757575",
|
|
96
|
+
HELPER_INPUT = "#757575",
|
|
97
|
+
PLACEHOLDER_INPUT = "#B6B6B6"
|
|
98
|
+
}
|