@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.
Files changed (112) hide show
  1. package/cjs/index.js +6 -6
  2. package/cjs/index.js.map +1 -1
  3. package/dist/components/ActionButton/ActionButton.js +2 -2
  4. package/dist/components/ActionButton/ActionButton.js.map +1 -1
  5. package/dist/components/ActionCard/index.js +2 -2
  6. package/dist/components/ActionCard/index.js.map +1 -1
  7. package/dist/components/BadgeIcon/index.js +2 -2
  8. package/dist/components/BadgeIcon/index.js.map +1 -1
  9. package/dist/components/Banner/index.js +2 -2
  10. package/dist/components/Banner/index.js.map +1 -1
  11. package/dist/components/Button/Button.js +3 -3
  12. package/dist/components/Button/Button.js.map +1 -1
  13. package/dist/components/Card/index.js +2 -2
  14. package/dist/components/Card/index.js.map +1 -1
  15. package/dist/components/Carousel/index.js +2 -2
  16. package/dist/components/Carousel/index.js.map +1 -1
  17. package/dist/components/Checkbox/index.js +1 -1
  18. package/dist/components/Checkbox/index.js.map +1 -1
  19. package/dist/components/ContentBreakdown/index.js +2 -2
  20. package/dist/components/ContentBreakdown/index.js.map +1 -1
  21. package/dist/components/DatePicker/index.js +3 -3
  22. package/dist/components/DatePicker/index.js.map +1 -1
  23. package/dist/components/DeprecatedModal/index.js +2 -2
  24. package/dist/components/DeprecatedModal/index.js.map +1 -1
  25. package/dist/components/Divider/index.js +2 -2
  26. package/dist/components/Divider/index.js.map +1 -1
  27. package/dist/components/Dropdown/index.js +2 -2
  28. package/dist/components/Dropdown/index.js.map +1 -1
  29. package/dist/components/ErrorPage/index.js +2 -2
  30. package/dist/components/ErrorPage/index.js.map +1 -1
  31. package/dist/components/Input/index.js +4 -4
  32. package/dist/components/Input/index.js.map +1 -1
  33. package/dist/components/Link/index.js +2 -2
  34. package/dist/components/Link/index.js.map +1 -1
  35. package/dist/components/Modal/index.js +2 -2
  36. package/dist/components/Modal/index.js.map +1 -1
  37. package/dist/components/Note/index.js +2 -2
  38. package/dist/components/Note/index.js.map +1 -1
  39. package/dist/components/Radio/index.js +2 -2
  40. package/dist/components/Radio/index.js.map +1 -1
  41. package/dist/components/RangePicker/index.js +1 -1
  42. package/dist/components/RangePicker/index.js.map +1 -1
  43. package/dist/components/Select/index.js +3 -3
  44. package/dist/components/Select/index.js.map +1 -1
  45. package/dist/components/Select/style.js +1 -1
  46. package/dist/components/Select/style.js.map +1 -1
  47. package/dist/components/Spin/index.js +2 -2
  48. package/dist/components/Spin/index.js.map +1 -1
  49. package/dist/components/Steps/index.js +2 -2
  50. package/dist/components/Steps/index.js.map +1 -1
  51. package/dist/constants/Typography/Typography.js +71 -0
  52. package/dist/constants/Typography/Typography.js.map +1 -0
  53. package/dist/constants/Typography/Typography.styles.js +52 -0
  54. package/dist/constants/Typography/Typography.styles.js.map +1 -0
  55. package/dist/constants/Typography/Typography.types.js +3 -0
  56. package/dist/constants/Typography/Typography.types.js.map +1 -0
  57. package/dist/constants/colors.js +123 -0
  58. package/dist/constants/colors.js.map +1 -0
  59. package/dist/constants/shadow.js +11 -0
  60. package/dist/constants/shadow.js.map +1 -0
  61. package/dist/index.js +54 -50
  62. package/dist/index.js.map +1 -1
  63. package/dist/{shared/NormalizeStyles.js → theme/NormalizeStyles/index.js} +1 -1
  64. package/dist/theme/NormalizeStyles/index.js.map +1 -0
  65. package/dist/{shared/themeContext.js → theme/ThemeContext.js} +1 -1
  66. package/dist/theme/ThemeContext.js.map +1 -0
  67. package/dist/theme/theme.js +175 -0
  68. package/dist/theme/theme.js.map +1 -0
  69. package/dist/types/constants/Typography/Typography.d.ts +35 -0
  70. package/dist/types/constants/Typography/Typography.styles.d.ts +2 -0
  71. package/dist/types/constants/Typography/Typography.types.d.ts +24 -0
  72. package/dist/types/constants/colors.d.ts +98 -0
  73. package/dist/types/constants/shadow.d.ts +6 -0
  74. package/dist/types/index.d.ts +49 -48
  75. package/dist/types/theme/ThemeContext.d.ts +148 -0
  76. package/dist/types/theme/theme.d.ts +282 -0
  77. package/es/icons.js +1 -1
  78. package/es/index.js +6 -6
  79. package/es/index.js.map +1 -1
  80. package/es/logos.js +1 -1
  81. package/package.json +1 -1
  82. package/dist/constants/colors/black.js +0 -11
  83. package/dist/constants/colors/black.js.map +0 -1
  84. package/dist/constants/colors/blue.js +0 -14
  85. package/dist/constants/colors/blue.js.map +0 -1
  86. package/dist/constants/colors/green.js +0 -14
  87. package/dist/constants/colors/green.js.map +0 -1
  88. package/dist/constants/colors/grey.js +0 -15
  89. package/dist/constants/colors/grey.js.map +0 -1
  90. package/dist/constants/colors/index.js +0 -17
  91. package/dist/constants/colors/index.js.map +0 -1
  92. package/dist/constants/colors/red.js +0 -10
  93. package/dist/constants/colors/red.js.map +0 -1
  94. package/dist/constants/colors/white.js +0 -8
  95. package/dist/constants/colors/white.js.map +0 -1
  96. package/dist/constants/colors/yellow.js +0 -10
  97. package/dist/constants/colors/yellow.js.map +0 -1
  98. package/dist/shared/NormalizeStyles.js.map +0 -1
  99. package/dist/shared/theme.js +0 -114
  100. package/dist/shared/theme.js.map +0 -1
  101. package/dist/shared/themeContext.js.map +0 -1
  102. package/dist/types/constants/colors/black.d.ts +0 -6
  103. package/dist/types/constants/colors/blue.d.ts +0 -9
  104. package/dist/types/constants/colors/green.d.ts +0 -9
  105. package/dist/types/constants/colors/grey.d.ts +0 -10
  106. package/dist/types/constants/colors/index.d.ts +0 -7
  107. package/dist/types/constants/colors/red.d.ts +0 -5
  108. package/dist/types/constants/colors/white.d.ts +0 -3
  109. package/dist/types/constants/colors/yellow.d.ts +0 -5
  110. package/dist/types/shared/theme.d.ts +0 -163
  111. package/dist/types/shared/themeContext.d.ts +0 -89
  112. /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("src/components/Button");
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("src/components/ActionButton");
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("src/components/ActionCard");
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("src/components/Accordion");
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("src/components/BadgeIcon");
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("src/components/Card");
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("src/components/Chart");
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("src/components/Carousel");
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("src/components/Dropdown");
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("src/components/DynamicSelect");
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("src/components/Form");
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("src/components/Input");
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("src/components/Label");
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("src/components/Modal");
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("src/components/DeprecatedModal");
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("src/components/Pagination");
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("src/components/Radio");
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("src/components/RangePicker");
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("src/components/Select");
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("src/components/Steps");
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("src/components/Table");
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("src/components/Tabs");
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("src/components/Timer");
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("src/components/DatePicker");
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("src/components/Checkbox");
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("src/components/Typography");
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("src/components/EmptyData");
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("src/components/Divider");
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("src/components/Link");
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("src/components/Hidden");
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("src/components/ContentBreakdown");
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("src/components/Note");
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("src/components/Banner");
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("src/components/Grid");
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("src/components/CopyBox");
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("src/components/Tooltip");
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("src/components/ErrorPage");
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("src/components/Spin");
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("src/components/SummaryCard");
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("src/components/Timeline");
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("src/icons"), exports);
103
+ __exportStar(require("./icons"), exports);
104
104
  // Logos
105
- __exportStar(require("src/logos"), exports);
106
- var theme_1 = require("src/shared/theme");
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 themeContext_1 = require("src/shared/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 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("src/constants/breakPoints");
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
- var ColorStyles_1 = require("src/shared/ColorStyles");
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("src/shared/TypographyStyles");
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":"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"}
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=NormalizeStyles.js.map
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"}
@@ -20,4 +20,4 @@ var useTheme = function () {
20
20
  return context;
21
21
  };
22
22
  exports.useTheme = useTheme;
23
- //# sourceMappingURL=themeContext.js.map
23
+ //# sourceMappingURL=ThemeContext.js.map
@@ -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,2 @@
1
+ import { TypographyLevelProps, TypographyProps } from './Typography.types';
2
+ export declare const styTypography: (level: TypographyLevelProps, props: TypographyProps) => string;
@@ -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
+ }
@@ -0,0 +1,6 @@
1
+ export declare enum SHADOW {
2
+ RAISED = "0px 2px 4px 0px rgba(51, 51, 51, 0.16)",
3
+ ACTION = "0px 4px 8px 0px rgba(51, 51, 51, 0.16)",
4
+ OVERLAY = "0px 8px 16px 0px rgba(51, 51, 51, 0.16)",
5
+ REVERSE_RAISED = "0px -1px 4px 0px rgba(51, 51, 51, 0.08)"
6
+ }