@rango-dev/widget-embedded 0.17.1-next.10 → 0.17.1-next.11

package/dist/utils/colors.d.ts.map

@@ -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;;wBAEJ,OAAO,WACnB,YAAY;;CAyCtB,CAAC"}
+{"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;;CAmC9D,CAAC;AACF,eAAO,MAAM,cAAc;;wBAEJ,OAAO,WACnB,YAAY;;CAyCtB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.17.1-next.10",
+  "version": "0.17.1-next.11",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.js",
@@ -23,7 +23,7 @@
     "@rango-dev/queue-manager-core": "^0.22.1-next.0",
     "@rango-dev/queue-manager-rango-preset": "^0.22.1-next.5",
     "@rango-dev/queue-manager-react": "^0.22.1-next.0",
-    "@rango-dev/ui": "^0.22.1-next.6",
+    "@rango-dev/ui": "^0.22.1-next.7",
     "@rango-dev/wallets-react": "^0.8.1-next.3",
     "@rango-dev/wallets-shared": "^0.21.1-next.3",
     "bignumber.js": "^9.1.1",

package/src/components/Quote/Quote.styles.ts

@@ -112,6 +112,13 @@ export const SummaryContainer = styled('div', {
     paddingTop: '$10',
     display: 'flex',
     alignItems: 'center',
+    '.usd-value': {
+      $$color: '$colors$neutral600',
+      [`.${darkTheme} &`]: {
+        $$color: '$colors$neutral700',
+      },
+      color: '$$color',
+    },
   },
 });
 

package/src/components/QuoteWarningsAndErrors/QuoteErrorsModalItem.tsx

@@ -10,7 +10,7 @@ export function QuoteErrorsModalItem(props: ModalContentData) {
 
   return (
     <Item>
-      <Typography size="medium" variant="label" color="neutral600">
+      <Typography size="medium" variant="label" className="_title">
         {title}
       </Typography>
       <Typography

package/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.styles.ts

@@ -1,4 +1,4 @@
-import { styled } from '@rango-dev/ui';
+import { darkTheme, styled } from '@rango-dev/ui';
 
 export const Alerts = styled('div', {
   width: '100%',
@@ -19,6 +19,13 @@ export const Item = styled('div', {
   justifyContent: 'space-between',
   alignItems: 'center',
   width: '100%',
+  '._title': {
+    $$color: '$colors$neutral600',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral700',
+    },
+    color: '$$color',
+  },
 });
 
 export const Action = styled('div', {

package/src/components/SwapsGroup/SwapsGroup.styles.ts

@@ -1,9 +1,16 @@
-import { styled } from '@rango-dev/ui';
+import { darkTheme, styled } from '@rango-dev/ui';
 
 export const Group = styled('div', {
   width: '100%',
   display: 'flex',
   flexDirection: 'column',
+  '.group-title': {
+    $$color: '$colors$neutral600',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral700',
+    },
+    color: '$$color',
+  },
 });
 
 export const Time = styled('div', {

package/src/components/SwapsGroup/SwapsGroup.tsx

@@ -34,7 +34,6 @@ export function SwapsGroup(props: PropTypes) {
                 <Typography
                   variant="label"
                   size="medium"
-                  color="neutral600"
                   className="group-title">
                   {i18n.t(group.title)}
                 </Typography>
@@ -68,7 +67,6 @@ export function SwapsGroup(props: PropTypes) {
                 <Typography
                   variant="label"
                   size="medium"
-                  color="neutral600"
                   className="group-title">
                   {i18n.t(group.title)}
                 </Typography>

package/src/components/TokenList/TokenList.styles.ts

@@ -1,4 +1,4 @@
-import { styled, Typography } from '@rango-dev/ui';
+import { darkTheme, styled, Typography } from '@rango-dev/ui';
 
 export const Container = styled('div', {
   display: 'flex',
@@ -40,7 +40,11 @@ export const List = styled('ul', {
         '& a': {
           fontSize: '$12',
           lineHeight: '$16',
-          color: '$neutral600',
+          $$color: '$colors$neutral600',
+          [`.${darkTheme} &`]: {
+            $$color: '$colors$neutral700',
+          },
+          color: '$$color',
           textDecoration: 'none',
         },
       },
@@ -92,6 +96,14 @@ export const TagTitle = styled(Typography, {});
 
 export const BalanceContainer = styled('div', {
   textAlign: 'right',
+
+  '.usd-value': {
+    $$color: '$colors$neutral600',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral700',
+    },
+    color: '$$color',
+  },
 });
 
 export const End = styled('ul', {

package/src/components/TokenList/TokenList.tsx

@@ -238,7 +238,7 @@ export function TokenList(props: PropTypes) {
                         {token.balance?.usdValue && (
                           <Typography
                             variant="body"
-                            color="neutral600"
+                            className="usd-value"
                             size="xsmall">
                             {`$${token.balance?.usdValue}`}
                           </Typography>

package/src/index.ts

@@ -43,6 +43,7 @@ import { WidgetWallets } from './containers/Wallets';
 import { Widget } from './containers/Widget';
 import { useWidget } from './containers/WidgetInfo';
 import { WidgetProvider } from './containers/WidgetProvider';
+import { customizedThemeTokens } from './utils/ui';
 
 export type {
   WidgetConfig,
@@ -80,6 +81,7 @@ export {
   useWidget,
   useWallets,
   useWidgetEvents,
+  customizedThemeTokens,
   MainEvents,
   RouteEventType,
   StepEventType,

package/src/utils/colors.ts

@@ -31,7 +31,7 @@ export const generateRangeColors = (name: string, color: string) => {
   const NUMBER_OF_COLORS = 10;
   const HALF_NUMBER_OF_COLORS = 5;
   const COLOR_SUFFIX = 100;
-  const AMT = 32;
+  const AMT = 25;
 
   let colors = { [name]: color };
   for (let i = 1; i < NUMBER_OF_COLORS; i++) {
@@ -60,6 +60,7 @@ export const generateRangeColors = (name: string, color: string) => {
       };
     }
   }
+
   return colors;
 };
 export const generateColors = (