@rango-dev/ui 0.1.13 → 0.1.14-next.2

package/src/components/TextField/TextField.tsx

@@ -3,10 +3,10 @@ import React, { PropsWithChildren, RefObject } from 'react';
 import { styled } from '../../theme';
 
 const InputContainer = styled('div', {
-  backgroundColor: '$background',
+  backgroundColor: '$surface',
   padding: '1px',
   boxSizing: 'border-box',
-  border: '1px solid $neutrals400',
+  border: '1px solid $neutral400',
   borderRadius: '$5',
   height: '$48',
   display: 'flex',
@@ -43,7 +43,7 @@ const InputContainer = styled('div', {
     },
     disabled: {
       true: {
-        backgroundColor: '$neutrals300',
+        backgroundColor: '$neutral100',
         cursor: 'not-allowed',
         filter: 'grayscale(100%)',
       },

package/src/components/TokenList/TokenItem.tsx

@@ -66,7 +66,7 @@ export function TokenItem(props: PropTypes) {
       >
         <TokenNameContainer>
           <Typography variant="body1">{token.symbol}</Typography>
-          <Typography variant="caption" color="neutrals600">
+          <Typography variant="caption" color="neutral600">
             {token.name}
           </Typography>
         </TokenNameContainer>

package/src/components/Tooltip/Tooltip.tsx

@@ -46,7 +46,7 @@ const TooltipContent = styled(RadixTooltip.Content, {
         color: '$white',
       },
       gray: {
-        backgroundColor: '$neutrals300',
+        backgroundColor: '$neutral100',
         color: '$black',
       },
       black: {
@@ -76,7 +76,7 @@ const TooltipArrow = styled(RadixTooltip.Arrow, {
         fill: '$success',
       },
       gray: {
-        fill: '$neutrals300',
+        fill: '$neutral100',
       },
       black: {
         fill: '$black',

package/src/containers/ConfirmSwap/ConfirmSwap.tsx

@@ -14,7 +14,7 @@ const MainContainer = styled('div', {
 const Section = styled('div', {
   paddingBottom: '$32',
   marginBottom: '$32',
-  borderBottom: '1px solid $neutrals400',
+  borderBottom: '1px solid $neutral400',
 });
 
 const Footer = styled('div', {
@@ -39,14 +39,14 @@ const Container = styled('div', {
     alignItems: 'center',
   },
   '.num': {
-    backgroundColor: '$neutrals300',
+    backgroundColor: '$neutral100',
     display: 'inline-flex',
     width: '24px',
     height: '24px',
-    color: '$neutrals800',
+    color: '$neutral800',
     borderRadius: '50%',
     fontSize: '$14',
-    border: '1px solid $neutrals400',
+    border: '1px solid $neutral400',
     justifyContent: 'center',
     alignItems: 'center',
   },

package/src/containers/History/SwapsGroup.tsx

@@ -34,7 +34,7 @@ export function SwapsGroup(props: Omit<PropTypes, 'onBack'>) {
             <Group>
               <Typography
                 variant="body2"
-                color="neutrals600"
+                color="neutral600"
                 className="group-title"
               >
                 {group.title}

package/src/containers/SwapHistory/SwapHistory.tsx

@@ -53,7 +53,7 @@ export const ErrorMsg = styled(Typography, {
 
 export const FeeContainer = styled('div', {
   paddingLeft: '$16',
-  color: '$neutrals800'
+  color: '$neutral800'
 });
 
 export const Fee = styled('div', {
@@ -96,7 +96,7 @@ const SwapInfoContainer = styled('div', {
   display: 'flex',
   flexDirection: 'column',
   paddingBottom: '$16',
-  borderBottom: '1px solid $neutrals300',
+  borderBottom: '1px solid $neutral100',
 });
 
 const InternalDetailsContainer = styled('div', {
@@ -137,12 +137,12 @@ const Row = styled('div', {
   padding: '$8 0',
 
   '.name': {
-    color: '$neutrals600',
+    color: '$neutral600',
   },
   '.value': {
     display: 'flex',
     alignItems: 'center',
-    color: '$neutrals800',
+    color: '$neutral800',
     justifyContent: 'flex-end',
   },
   '.status': {
@@ -169,7 +169,7 @@ const RequestId = styled('div', {
 
 const ExtraDetails = styled('div', {
   padding: '0',
-  color: '$neutrals600',
+  color: '$neutral600',
   fontSize: '$10',
 });
 

package/src/helper/index.ts

@@ -29,3 +29,78 @@ export function limitDecimalPlaces(
     return roundedNumber.toString();
   }
 }
+
+const hexToRgb = (hex: string) =>
+  ((value) =>
+    value.length === 3
+      ? value.split('').map((c) => parseInt(c.repeat(2), 16))
+      : (value.match(/.{1,2}/g) || []).map((v) => parseInt(v, 16)))(
+    hex.replace('#', '')
+  );
+
+const isHexTooDark = (hexColor: string) =>
+  (([r, g, b]) => 0.2126 * r + 0.7152 * g + 0.0722 * b < 40)(
+    hexToRgb(hexColor)
+  );
+
+const isHexTooLight = (hexColor: string) =>
+  (([r, g, b]) => (r * 299 + g * 587 + b * 114) / 1000 > 155)(
+    hexToRgb(hexColor)
+  );
+
+const colorShade = (col: string, amt: number) => {
+  col = col.replace(/^#/, '');
+  if (col.length === 3)
+    col = col[0] + col[0] + col[1] + col[1] + col[2] + col[2];
+  let [r, g, b]: any = col.match(/.{2}/g);
+  [r, g, b] = [
+    parseInt(r, 16) + amt,
+    parseInt(g, 16) + amt,
+    parseInt(b, 16) + amt,
+  ];
+
+  r = Math.max(Math.min(255, r), 0).toString(16);
+  g = Math.max(Math.min(255, g), 0).toString(16);
+  b = Math.max(Math.min(255, b), 0).toString(16);
+
+  const rr = (r.length < 2 ? '0' : '') + r;
+  const gg = (g.length < 2 ? '0' : '') + g;
+  const bb = (b.length < 2 ? '0' : '') + b;
+
+  return `#${rr}${gg}${bb}`;
+};
+
+export const generateRangeColors = (
+  name: string,
+  mode: 'light' | 'dark',
+  color?: string,
+) => {
+  let colors = { [name]: color };
+  if (color) {
+    let c = color;
+    if (isHexTooDark(color) || mode === 'dark') {
+      for (let i = 1; i < 10; i++) {
+        colors = {
+          ...colors,
+          [name + i * 100]:
+            name === 'neutral'
+              ? colorShade(c, i * 15)
+              : colorShade(color, i * 5),
+        };
+      }
+    }
+    if (isHexTooLight(color) || mode === 'light') {
+      for (let i = 1; i < 10; i++) {
+        c = colorShade(c, -(i * 5));
+        colors = {
+          ...colors,
+          [name + i * 100]:
+            name === 'neutral'
+              ? colorShade(c, -(i * 5))
+              : colorShade(color, -(i * 5)),
+        };
+      }
+    }
+  }
+  return colors;
+};

package/src/index.ts

@@ -3,3 +3,4 @@ export * from './containers';
 export * from './theme';
 export * from './types';
 export * from './hooks';
+export { generateRangeColors } from './helper';

package/src/theme.ts

@@ -7,6 +7,7 @@ import { DefaultThemeMap } from '@stitches/react/types/config';
 const { createStitches } = require('@stitches/react');
 
 /* ----------------------- Values ----------------------- */
+
 const theme = {
   colors: {
     primary: '#5FA425',
@@ -19,14 +20,16 @@ const theme = {
     primary700: '#396216',
     primary800: '#26420F',
     primary900: '#132107',
-    neutrals200: '#FAFAFA',
-    neutrals300: '#EAEAEA',
-    neutrals400: '#999999',
-    neutrals500: '#888888',
-    neutrals600: '#666666',
-    neutrals700: '#444444',
-    neutrals800: '#333333',
-    neutrals900: '#111111',
+    surface: '#fff',
+    neutral100: '#f3f3f3',
+    neutral200: '#FAFAFA',
+    neutral300: '#EAEAEA',
+    neutral400: '#999999',
+    neutral500: '#888888',
+    neutral600: '#666666',
+    neutral700: '#444444',
+    neutral800: '#333333',
+    neutral900: '#111111',
     background: '#fff',
     foreground: '#000',
     success: '#0070F3',
@@ -104,7 +107,8 @@ const theme = {
     10: '12px',
   },
   shadows: {
-    s: '0px 3px 5px 3px #f0f2f5, 0px 6px 10px 3px #f0f2f5, 0px 1px 18px 3px #f0f2f5',
+    s:
+      '0px 3px 5px 3px #f0f2f5, 0px 6px 10px 3px #f0f2f5, 0px 1px 18px 3px #f0f2f5',
   },
   zIndices: {},
   transitions: {},
@@ -146,14 +150,16 @@ export const lightTheme = createTheme({});
 
 export const darkTheme = createTheme({
   colors: {
-    neutrals200: '#111111',
-    neutrals300: '#333333',
-    neutrals400: '#444444',
-    neutrals500: '#666666',
-    neutrals600: '#888888',
-    neutrals700: '#999999',
-    neutrals800: '#EAEAEA',
-    neutrals900: '#FAFAFA',
+    surface: '#000',
+    neutral900: '#f3f3f3',
+    neutral800: '#FAFAFA',
+    neutral700: '#EAEAEA',
+    neutral600: '#999999',
+    neutral500: '#888888',
+    neutral400: '#666666',
+    neutral300: '#444444',
+    neutral200: '#333333',
+    neutral100: '#111111',
     foreground: '#fff',
     background: '#000',
   },