@rango-dev/widget-embedded 0.14.1-next.12 → 0.14.1-next.13

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 (29) hide show
  1. package/dist/components/Layout/Layout.styles.d.ts.map +1 -1
  2. package/dist/index.js +1 -1
  3. package/dist/index.js.map +3 -3
  4. package/dist/types/config.d.ts +3 -3
  5. package/dist/types/config.d.ts.map +1 -1
  6. package/dist/utils/colors.d.ts +1 -1
  7. package/dist/utils/colors.d.ts.map +1 -1
  8. package/dist/utils/ui.d.ts.map +1 -1
  9. package/package.json +2 -2
  10. package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx +1 -1
  11. package/src/components/Layout/Layout.styles.ts +7 -2
  12. package/src/components/LoadingSwapDetails/LoadingSwapDetails.styles.ts +1 -1
  13. package/src/components/NoRoutes/NoRoutes.tsx +1 -1
  14. package/src/components/NotificationContent/NotificationContent.tsx +1 -1
  15. package/src/components/NotificationContent/NotificationNotFound.tsx +1 -1
  16. package/src/components/RouteErrors/RouteErrorsModalItem.tsx +1 -1
  17. package/src/components/Slippage/SlippageTooltipContent.tsx +1 -1
  18. package/src/components/SwapDetails/SwapDetails.Placeholder.tsx +4 -4
  19. package/src/components/SwapDetails/SwapDetails.tsx +4 -4
  20. package/src/components/SwapDetailsModal/SwapDetailsCompleteModal.tsx +1 -1
  21. package/src/components/SwapsGroup/SwapsGroup.tsx +2 -2
  22. package/src/components/TokenList/TokenList.styles.ts +1 -1
  23. package/src/components/TokenList/TokenList.tsx +1 -1
  24. package/src/pages/ConfirmSwapPage.tsx +1 -1
  25. package/src/pages/Home.tsx +3 -3
  26. package/src/pages/SettingsPage.tsx +1 -1
  27. package/src/types/config.ts +2 -2
  28. package/src/utils/colors.ts +16 -0
  29. package/src/utils/ui.ts +7 -14
package/dist/types/config.d.ts CHANGED
@@ -25,7 +25,7 @@ export type WidgetColors = {
25
25
  * @property {'auto' | 'light' | 'dark'} mode - The mode property is used to specify the default theme for
26
26
  * the widget.
27
27
  * @property {string} fontFamily - The font family to be used in the widget.
28
- * @property {Colors} colors - The `colors` property is a sub-property of the `WidgetTheme` object that
28
+ * @property {{ light?: WidgetColors; dark?: WidgetColors }} colors - The `colors` property is a sub-property of the `WidgetTheme` object that
29
29
  * defines the color scheme for the widget. It is of type `Colors`, which is likely another object that
30
30
  * contains specific color values for various parts of the widget (e.g. background color, text color,
31
31
  * border color
@@ -41,8 +41,8 @@ export type WidgetTheme = {
41
41
  mode?: 'auto' | 'light' | 'dark';
42
42
  fontFamily?: string;
43
43
  colors?: {
44
- light: WidgetColors;
45
- dark: WidgetColors;
44
+ light?: WidgetColors;
45
+ dark?: WidgetColors;
46
46
  };
47
47
  borderRadius?: number;
48
48
  secondaryBorderRadius?: number;
package/dist/types/config.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/types/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAEvC;;;;;;;GAOG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,YAAY,CAAC;AAClD,MAAM,MAAM,YAAY,GAAG;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,YAAY,CAAC;QAAC,IAAI,EAAE,YAAY,CAAA;KAAE,CAAC;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;CACrC,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;CAClB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,wBAAwB,CAAC;IAChC,EAAE,CAAC,EAAE,wBAAwB,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,CAAC,UAAU,GAAG,iBAAiB,CAAC,EAAE,CAAC;IAC7C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,KAAK,EAAE,CAAC;CACxB,CAAC"}
1
+ {"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/types/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AAEvC;;;;;;;GAOG;AACH,MAAM,MAAM,gBAAgB,GAAG,MAAM,YAAY,CAAC;AAClD,MAAM,MAAM,YAAY,GAAG;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,YAAY,CAAC;QAAC,IAAI,CAAC,EAAE,YAAY,CAAA;KAAE,CAAC;IACvD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;CACrC,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,MAAM,wBAAwB,GAAG;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;CAClB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,wBAAwB,CAAC;IAChC,EAAE,CAAC,EAAE,wBAAwB,CAAC;IAC9B,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,CAAC,UAAU,GAAG,iBAAiB,CAAC,EAAE,CAAC;IAC7C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,KAAK,EAAE,CAAC;CACxB,CAAC"}
package/dist/utils/colors.d.ts CHANGED
@@ -5,7 +5,7 @@ export declare const generateRangeColors: (name: string, color: string) => {
5
5
  };
6
6
  export declare const generateColors: (mainColors: {
7
7
  [x: string]: string;
8
- }, colors?: WidgetColors) => {
8
+ }, reverseNeutralRange: boolean, colors?: WidgetColors) => {
9
9
  [x: string]: string;
10
10
  };
11
11
  //# sourceMappingURL=colors.d.ts.map
package/dist/utils/colors.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/utils/colors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAoB,MAAM,UAAU,CAAC;AAE/D,eAAO,MAAM,UAAU,QAAS,MAAM,OAAO,MAAM,WAyBlD,CAAC;AAEF,eAAO,MAAM,mBAAmB,SAAU,MAAM,SAAS,MAAM;;CAkC9D,CAAC;AACF,eAAO,MAAM,cAAc;;YAEhB,YAAY;;CA0BtB,CAAC"}
1
+ {"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/utils/colors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAoB,MAAM,UAAU,CAAC;AAE/D,eAAO,MAAM,UAAU,QAAS,MAAM,OAAO,MAAM,WAyBlD,CAAC;AAEF,eAAO,MAAM,mBAAmB,SAAU,MAAM,SAAS,MAAM;;CAkC9D,CAAC;AACF,eAAO,MAAM,cAAc;;wBAEJ,OAAO,WACnB,YAAY;;CAyCtB,CAAC"}
package/dist/utils/ui.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../src/utils/ui.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAYjD,UAAU,qBAAqB;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;CAC3C;AAED,UAAU,eAAe;IACvB,KAAK,EAAE,SAAS,GAAG,qBAAqB,CAAC;IACzC,IAAI,EAAE,SAAS,GAAG,qBAAqB,CAAC;CACzC;AAED,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,WAAW,CAAC,QAAQ,CAAC,GAC5B,eAAe,CAoDjB"}
1
+ {"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../src/utils/ui.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAYjD,UAAU,qBAAqB;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;CAC3C;AAED,UAAU,eAAe;IACvB,KAAK,EAAE,SAAS,GAAG,qBAAqB,CAAC;IACzC,IAAI,EAAE,SAAS,GAAG,qBAAqB,CAAC;CACzC;AAED,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,WAAW,CAAC,QAAQ,CAAC,GAC5B,eAAe,CA6CjB"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rango-dev/widget-embedded",
3
- "version": "0.14.1-next.12",
3
+ "version": "0.14.1-next.13",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
@@ -23,7 +23,7 @@
23
23
  "@rango-dev/queue-manager-core": "^0.17.0",
24
24
  "@rango-dev/queue-manager-rango-preset": "^0.17.1-next.2",
25
25
  "@rango-dev/queue-manager-react": "^0.17.0",
26
- "@rango-dev/ui": "^0.17.1-next.8",
26
+ "@rango-dev/ui": "^0.17.1-next.9",
27
27
  "@rango-dev/wallets-react": "^0.3.1-next.1",
28
28
  "@rango-dev/wallets-shared": "^0.17.1-next.0",
29
29
  "bignumber.js": "^9.1.1",
package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx CHANGED
@@ -371,7 +371,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
371
371
  </Typography>
372
372
  <Typography
373
373
  variant="label"
374
- color="$neutral900"
374
+ color="$neutral700"
375
375
  size="medium">
376
376
  {i18n.t({
377
377
  id: 'needConnect',
package/src/components/Layout/Layout.styles.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { styled } from '@rango-dev/ui';
1
+ import { darkTheme, styled } from '@rango-dev/ui';
2
2
 
3
3
  export const Container = styled('div', {
4
4
  position: 'relative',
@@ -10,7 +10,11 @@ export const Container = styled('div', {
10
10
  width: '95vw',
11
11
  maxWidth: '390px',
12
12
  maxHeight: '700px',
13
- backgroundColor: '$neutral100',
13
+ $$color: '$colors$neutral100',
14
+ [`.${darkTheme} &`]: {
15
+ $$color: '$colors$neutral300',
16
+ },
17
+ backgroundColor: '$$color',
14
18
  variants: {
15
19
  fixedHeight: {
16
20
  true: {
@@ -22,6 +26,7 @@ export const Container = styled('div', {
22
26
  },
23
27
  },
24
28
  });
29
+
25
30
  export const Content = styled('div', {
26
31
  borderTopLeftRadius: '20px',
27
32
  borderTopRightRadius: '20px',
package/src/components/LoadingSwapDetails/LoadingSwapDetails.styles.ts CHANGED
@@ -73,6 +73,6 @@ export const StepContainer = styled('div', {
73
73
  export const StepSeparator = styled('div', {
74
74
  width: '0px',
75
75
  height: '$20',
76
- borderLeft: '1px dashed $neutral900',
76
+ borderLeft: '1px dashed $neutral700',
77
77
  marginLeft: '25px',
78
78
  });
package/src/components/NoRoutes/NoRoutes.tsx CHANGED
@@ -47,7 +47,7 @@ export function NoRoutes(props: PropTypes) {
47
47
  variant="body"
48
48
  size="small"
49
49
  align="center"
50
- color="neutral900">
50
+ color="neutral700">
51
51
  {info.description}
52
52
  </Typography>
53
53
  )}
package/src/components/NotificationContent/NotificationContent.tsx CHANGED
@@ -72,7 +72,7 @@ export function NotificationContent() {
72
72
  key={notificationItem.requestId}
73
73
  onClick={() => handleOnClick(notificationItem.requestId)}
74
74
  title={
75
- <Typography variant="body" size="small" color="$neutral900">
75
+ <Typography variant="body" size="small" color="$neutral700">
76
76
  {i18n.t(notificationItem.event.message)}
77
77
  </Typography>
78
78
  }
package/src/components/NotificationContent/NotificationNotFound.tsx CHANGED
@@ -9,7 +9,7 @@ export function NotificationNotFound() {
9
9
  <NotFoundContainer>
10
10
  <NoNotificationIcon color="secondary" size={26} />
11
11
  <Divider size={12} />
12
- <Typography variant="body" size="medium" color="neutral900">
12
+ <Typography variant="body" size="medium" color="neutral700">
13
13
  {i18n.t('You have no notification')}
14
14
  </Typography>
15
15
  </NotFoundContainer>
package/src/components/RouteErrors/RouteErrorsModalItem.tsx CHANGED
@@ -10,7 +10,7 @@ export function RouteErrorsModalItem(props: ModalContentData) {
10
10
 
11
11
  return (
12
12
  <Item>
13
- <Typography size="medium" variant="label" color="neutral800">
13
+ <Typography size="medium" variant="label" color="neutral600">
14
14
  {title}
15
15
  </Typography>
16
16
  <Typography
package/src/components/Slippage/SlippageTooltipContent.tsx CHANGED
@@ -7,7 +7,7 @@ import { SlippageTooltipContainer } from './Slippage.styles';
7
7
  export function SlippageTooltipContent() {
8
8
  return (
9
9
  <SlippageTooltipContainer>
10
- <Typography variant="label" size="medium" color="neutral900">
10
+ <Typography variant="label" size="medium" color="neutral700">
11
11
  {i18n.t(
12
12
  'Your transaction will be reverted if the price changes unfavorably by more than this percentage'
13
13
  )}
package/src/components/SwapDetails/SwapDetails.Placeholder.tsx CHANGED
@@ -38,11 +38,11 @@ export function SwapDetailsPlaceholder(props: SwapDetailsPlaceholderPropTypes) {
38
38
  <Container>
39
39
  <HeaderDetails>
40
40
  <div className="row">
41
- <Typography variant="label" size="large" color="neutral900">
41
+ <Typography variant="label" size="large" color="neutral700">
42
42
  {`${i18n.t('Request ID')}:`}
43
43
  </Typography>
44
44
  <div className="request-id">
45
- <Typography variant="label" size="small" color="neutral900">
45
+ <Typography variant="label" size="small" color="neutral700">
46
46
  <Skeleton width={60} height={10} variant="rounded" />
47
47
  </Typography>
48
48
  <IconButton variant="ghost">
@@ -51,10 +51,10 @@ export function SwapDetailsPlaceholder(props: SwapDetailsPlaceholderPropTypes) {
51
51
  </div>
52
52
  </div>
53
53
  <div className="row">
54
- <Typography variant="label" size="large" color="neutral900">
54
+ <Typography variant="label" size="large" color="neutral700">
55
55
  {`${i18n.t('Created at')}:`}
56
56
  </Typography>
57
- <Typography variant="label" size="small" color="neutral900">
57
+ <Typography variant="label" size="small" color="neutral700">
58
58
  <Skeleton width={60} height={10} variant="rounded" />
59
59
  </Typography>
60
60
  </div>
package/src/components/SwapDetails/SwapDetails.tsx CHANGED
@@ -281,11 +281,11 @@ export function SwapDetails(props: SwapDetailsProps) {
281
281
  <Container>
282
282
  <HeaderDetails>
283
283
  <div className="row">
284
- <Typography variant="label" size="large" color="neutral900">
284
+ <Typography variant="label" size="large" color="neutral700">
285
285
  {`${i18n.t('Request ID')}:`}
286
286
  </Typography>
287
287
  <div className="request-id">
288
- <Typography variant="label" size="small" color="neutral900">
288
+ <Typography variant="label" size="small" color="neutral700">
289
289
  {requestId}
290
290
  </Typography>
291
291
  <IconButton
@@ -296,10 +296,10 @@ export function SwapDetails(props: SwapDetailsProps) {
296
296
  </div>
297
297
  </div>
298
298
  <div className="row">
299
- <Typography variant="label" size="large" color="neutral900">
299
+ <Typography variant="label" size="large" color="neutral700">
300
300
  {`${i18n.t('Created at')}:`}
301
301
  </Typography>
302
- <Typography variant="label" size="small" color="neutral900">
302
+ <Typography variant="label" size="small" color="neutral700">
303
303
  {swapDate}
304
304
  </Typography>
305
305
  </div>
package/src/components/SwapDetailsModal/SwapDetailsCompleteModal.tsx CHANGED
@@ -52,7 +52,7 @@ export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
52
52
  <Typography
53
53
  variant="body"
54
54
  size="medium"
55
- color="neutral900"
55
+ color="neutral700"
56
56
  align="center">
57
57
  {description}
58
58
  </Typography>
package/src/components/SwapsGroup/SwapsGroup.tsx CHANGED
@@ -34,7 +34,7 @@ export function SwapsGroup(props: PropTypes) {
34
34
  <Typography
35
35
  variant="label"
36
36
  size="medium"
37
- color="neutral800"
37
+ color="neutral600"
38
38
  className="group-title">
39
39
  {i18n.t(group.title)}
40
40
  </Typography>
@@ -68,7 +68,7 @@ export function SwapsGroup(props: PropTypes) {
68
68
  <Typography
69
69
  variant="label"
70
70
  size="medium"
71
- color="neutral800"
71
+ color="neutral600"
72
72
  className="group-title">
73
73
  {i18n.t(group.title)}
74
74
  </Typography>
package/src/components/TokenList/TokenList.styles.ts CHANGED
@@ -40,7 +40,7 @@ export const List = styled('ul', {
40
40
  '& a': {
41
41
  fontSize: '$12',
42
42
  lineHeight: '$16',
43
- color: '$neutral800',
43
+ color: '$neutral600',
44
44
  textDecoration: 'none',
45
45
  },
46
46
  },
package/src/components/TokenList/TokenList.tsx CHANGED
@@ -239,7 +239,7 @@ export function TokenList(props: PropTypes) {
239
239
  {token.balance?.usdValue && (
240
240
  <Typography
241
241
  variant="body"
242
- color="neutral800"
242
+ color="neutral600"
243
243
  size="xsmall">
244
244
  {`$${token.balance?.usdValue}`}
245
245
  </Typography>
package/src/pages/ConfirmSwapPage.tsx CHANGED
@@ -363,7 +363,7 @@ export function ConfirmSwapPage(props: PropTypes) {
363
363
  size="small"
364
364
  variant="ghost"
365
365
  onClick={() => navigate('/' + navigationRoutes.settings)}>
366
- <Typography variant="label" size="medium" color="$neutral900">
366
+ <Typography variant="label" size="medium" color="$neutral700">
367
367
  {i18n.t('Change settings')}
368
368
  </Typography>
369
369
  </Button>
package/src/pages/Home.tsx CHANGED
@@ -245,15 +245,15 @@ export function Home() {
245
245
  title={recommendation}
246
246
  footer={
247
247
  <FooterAlert>
248
- <Typography size="xsmall" variant="body" color="neutral900">
248
+ <Typography size="xsmall" variant="body" color="neutral700">
249
249
  {fromAmountRangeError}
250
250
  </Typography>
251
251
  <Divider direction="horizontal" size={8} />
252
- <Typography size="xsmall" variant="body" color="neutral900">
252
+ <Typography size="xsmall" variant="body" color="neutral700">
253
253
  |
254
254
  </Typography>
255
255
  <Divider direction="horizontal" size={8} />
256
- <Typography size="xsmall" variant="body" color="neutral900">
256
+ <Typography size="xsmall" variant="body" color="neutral700">
257
257
  {i18n.t({
258
258
  id: 'yourSymbol',
259
259
  message: 'Yours: {amount} {symbol}',
package/src/pages/SettingsPage.tsx CHANGED
@@ -147,7 +147,7 @@ export function SettingsPage({ supportedSwappers, singleTheme }: PropTypes) {
147
147
  container={getContainer()}
148
148
  content={
149
149
  <TooltipContainer>
150
- <Typography variant="label" size="medium" color="neutral900">
150
+ <Typography variant="label" size="medium" color="neutral700">
151
151
  {i18n.t(
152
152
  "Enabling the 'Infinite Approval' mode grants unrestricted access to smart contracts of DEXes/Bridges, allowing them to utilize the approved token amount without limitations."
153
153
  )}
package/src/types/config.ts CHANGED
@@ -27,7 +27,7 @@ export type WidgetColors = {
27
27
  * @property {'auto' | 'light' | 'dark'} mode - The mode property is used to specify the default theme for
28
28
  * the widget.
29
29
  * @property {string} fontFamily - The font family to be used in the widget.
30
- * @property {Colors} colors - The `colors` property is a sub-property of the `WidgetTheme` object that
30
+ * @property {{ light?: WidgetColors; dark?: WidgetColors }} colors - The `colors` property is a sub-property of the `WidgetTheme` object that
31
31
  * defines the color scheme for the widget. It is of type `Colors`, which is likely another object that
32
32
  * contains specific color values for various parts of the widget (e.g. background color, text color,
33
33
  * border color
@@ -42,7 +42,7 @@ export type WidgetColors = {
42
42
  export type WidgetTheme = {
43
43
  mode?: 'auto' | 'light' | 'dark';
44
44
  fontFamily?: string;
45
- colors?: { light: WidgetColors; dark: WidgetColors };
45
+ colors?: { light?: WidgetColors; dark?: WidgetColors };
46
46
  borderRadius?: number;
47
47
  secondaryBorderRadius?: number;
48
48
  width?: number;
package/src/utils/colors.ts CHANGED
@@ -64,6 +64,7 @@ export const generateRangeColors = (name: string, color: string) => {
64
64
  };
65
65
  export const generateColors = (
66
66
  mainColors: { [x: string]: string },
67
+ reverseNeutralRange: boolean,
67
68
  colors?: WidgetColors
68
69
  ) => {
69
70
  if (!colors || !Object.entries(colors).length) {
@@ -81,6 +82,21 @@ export const generateColors = (
81
82
  ...listOfColors,
82
83
  [colorKey]: color,
83
84
  };
85
+ } else if (colorKey === 'neutral' && reverseNeutralRange) {
86
+ const range = generateRangeColors(colorKey, color);
87
+ listOfColors = {
88
+ ...listOfColors,
89
+ // Reverse the neutral shade
90
+ [`${colorKey}100`]: range[`${colorKey}900`],
91
+ [`${colorKey}200`]: range[`${colorKey}800`],
92
+ [`${colorKey}300`]: range[`${colorKey}700`],
93
+ [`${colorKey}400`]: range[`${colorKey}600`],
94
+ [`${colorKey}500`]: range[`${colorKey}500`],
95
+ [`${colorKey}600`]: range[`${colorKey}400`],
96
+ [`${colorKey}700`]: range[`${colorKey}300`],
97
+ [`${colorKey}800`]: range[`${colorKey}200`],
98
+ [`${colorKey}900`]: range[`${colorKey}100`],
99
+ };
84
100
  } else {
85
101
  listOfColors = {
86
102
  ...listOfColors,
package/src/utils/ui.ts CHANGED
@@ -32,9 +32,14 @@ export function customizedThemeTokens(
32
32
  ...baseColors,
33
33
  ...defaultDarkColors,
34
34
  },
35
+ true,
35
36
  colors?.dark
36
37
  );
37
- const lightColorsWithDefaults = generateColors(baseColors, colors?.light);
38
+ const lightColorsWithDefaults = generateColors(
39
+ baseColors,
40
+ false,
41
+ colors?.light
42
+ );
38
43
  const hasDefaultDarkColors = Object.keys(darkColorsWithDefaults).length > 0;
39
44
  const hasDefaultLightColors = Object.keys(lightColorsWithDefaults).length > 0;
40
45
 
@@ -51,19 +56,7 @@ export function customizedThemeTokens(
51
56
  }
52
57
  if (hasDefaultDarkColors) {
53
58
  const tokens = {
54
- colors: {
55
- ...darkColorsWithDefaults,
56
- // Reverse the neutrals shade
57
- neutral100: darkColorsWithDefaults.neutral900,
58
- neutral200: darkColorsWithDefaults.neutral800,
59
- neutral300: darkColorsWithDefaults.neutral700,
60
- neutral400: darkColorsWithDefaults.neutral600,
61
- neutral500: darkColorsWithDefaults.neutral500,
62
- neutral600: darkColorsWithDefaults.neutral400,
63
- neutral700: darkColorsWithDefaults.neutral300,
64
- neutral800: darkColorsWithDefaults.neutral200,
65
- neutral900: darkColorsWithDefaults.neutral100,
66
- },
59
+ colors: darkColorsWithDefaults,
67
60
  };
68
61
  const id = `${THEME_CLASS_NAME_PREFIX}-dark-${toHash(tokens)}`;
69
62
  dark = {