@ssa-ui-kit/core 0.0.10-alpha → 0.0.11-alpha

package/src/injectGlobal.ts

@@ -1,41 +1,41 @@
-import { injectGlobal } from '@emotion/css';
-
-injectGlobal`
-  * {
-    outline: none;
-
-    box-sizing: border-box;
-    font-family: 'Manrope', sans-serif;
-
-    &::after,
-    &::before {
-      box-sizing: border-box;
-    }
-  } 
-
-  html {
-    font-size: 1rem;
-    font-weight: 400;
-  }
-
-  body {
-    margin: 0;
-    padding: 0;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  p {
-    margin: 0;
-    padding: 0;
-  }
-
-  #root {
-    height: 100vh;
-  }
-  
-`;
+import { injectGlobal } from '@emotion/css';
+
+injectGlobal`
+  * {
+    outline: none;
+
+    box-sizing: border-box;
+    font-family: 'Manrope', sans-serif;
+
+    &::after,
+    &::before {
+      box-sizing: border-box;
+    }
+  } 
+
+  html {
+    font-size: 1rem;
+    font-weight: 400;
+  }
+
+  body {
+    margin: 0;
+    padding: 0;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p {
+    margin: 0;
+    padding: 0;
+  }
+
+  #root {
+    height: 100vh;
+  }
+  
+`;

package/src/styles/global.ts

@@ -1,91 +1,91 @@
-import { css, Theme } from '@emotion/react';
-
-export const pink = (theme: Theme) => css`
-  background-color: ${theme.colors.pink};
-  background: linear-gradient(
-    99.26deg,
-    ${theme.colors.pink},
-    ${theme.colors.pinkLighter}
-  );
-  box-shadow: -4px 4px 10px ${theme.colors.pinkLighter40};
-`;
-
-export const yellow = (theme: Theme) => css`
-  background-color: ${theme.colors.yellow};
-  background: linear-gradient(
-    90deg,
-    ${theme.colors.yellow},
-    ${theme.colors.yellowLighter}
-  );
-  box-shadow: -4px 4px 10px ${theme.colors.yellowLighter40};
-`;
-
-export const yellowWarm = (theme: Theme) => css`
-  background-color: ${theme.colors.yellowLighter};
-  background: linear-gradient(
-    90deg,
-    ${theme.colors.yellowLighter},
-    ${theme.colors.yellowWarm}
-  );
-  box-shadow: -4px 4px 10px ${theme.colors.yellowLighter40};
-`;
-
-export const green = (theme: Theme) => css`
-  background-color: ${theme.colors.green};
-  background: linear-gradient(
-    295.98deg,
-    ${theme.colors.green},
-    ${theme.colors.greenLighter}
-  );
-  box-shadow: -4px 4px 10px ${theme.colors.greenLighter40};
-`;
-
-export const turquoise = (theme: Theme) => css`
-  background-color: ${theme.colors.turquoise};
-  background: linear-gradient(
-    116.22deg,
-    ${theme.colors.turquoise},
-    ${theme.colors.turquoiseLighter}
-  );
-  box-shadow: -4px 4px 10px ${theme.colors.turquoiseLighter40};
-`;
-
-export const purple = (theme: Theme) => css`
-  background-color: ${theme.colors.purple};
-  background: linear-gradient(
-    243.84deg,
-    ${theme.colors.purpleLighter},
-    ${theme.colors.purple}
-  );
-  box-shadow: -4px 4px 10px ${theme.colors.purpleLighter40};
-`;
-
-export const blue = (theme: Theme) => css`
-  background-color: ${theme.colors.blue};
-  background: linear-gradient(
-    90deg,
-    ${theme.colors.blue},
-    ${theme.colors.blueLighter}
-  );
-  box-shadow: -4px 4px 10px ${theme.colors.blueLighter40};
-`;
-
-export const blueLight = (theme: Theme) => css`
-  background-color: ${theme.colors.blueLight};
-  background: linear-gradient(
-    247.37deg,
-    ${theme.colors.blueLightLighter},
-    ${theme.colors.blueLight}
-  );
-  box-shadow: -4px 4px 10px ${theme.colors.blueLightLighter40};
-`;
-
-export const blueLightDarker = (theme: Theme) => css`
-  background-color: ${theme.colors.blueLightDarker};
-  background: linear-gradient(
-    247.37deg,
-    ${theme.colors.blueDark},
-    ${theme.colors.blueLightDarker}
-  );
-  box-shadow: -4px 4px 10px ${theme.colors.blueLightDarker40};
-`;
+import { css, Theme } from '@emotion/react';
+
+export const pink = (theme: Theme) => css`
+  background-color: ${theme.colors.pink};
+  background: linear-gradient(
+    99.26deg,
+    ${theme.colors.pink},
+    ${theme.colors.pinkLighter}
+  );
+  box-shadow: -4px 4px 10px ${theme.colors.pinkLighter40};
+`;
+
+export const yellow = (theme: Theme) => css`
+  background-color: ${theme.colors.yellow};
+  background: linear-gradient(
+    90deg,
+    ${theme.colors.yellow},
+    ${theme.colors.yellowLighter}
+  );
+  box-shadow: -4px 4px 10px ${theme.colors.yellowLighter40};
+`;
+
+export const yellowWarm = (theme: Theme) => css`
+  background-color: ${theme.colors.yellowLighter};
+  background: linear-gradient(
+    90deg,
+    ${theme.colors.yellowLighter},
+    ${theme.colors.yellowWarm}
+  );
+  box-shadow: -4px 4px 10px ${theme.colors.yellowLighter40};
+`;
+
+export const green = (theme: Theme) => css`
+  background-color: ${theme.colors.green};
+  background: linear-gradient(
+    295.98deg,
+    ${theme.colors.green},
+    ${theme.colors.greenLighter}
+  );
+  box-shadow: -4px 4px 10px ${theme.colors.greenLighter40};
+`;
+
+export const turquoise = (theme: Theme) => css`
+  background-color: ${theme.colors.turquoise};
+  background: linear-gradient(
+    116.22deg,
+    ${theme.colors.turquoise},
+    ${theme.colors.turquoiseLighter}
+  );
+  box-shadow: -4px 4px 10px ${theme.colors.turquoiseLighter40};
+`;
+
+export const purple = (theme: Theme) => css`
+  background-color: ${theme.colors.purple};
+  background: linear-gradient(
+    243.84deg,
+    ${theme.colors.purpleLighter},
+    ${theme.colors.purple}
+  );
+  box-shadow: -4px 4px 10px ${theme.colors.purpleLighter40};
+`;
+
+export const blue = (theme: Theme) => css`
+  background-color: ${theme.colors.blue};
+  background: linear-gradient(
+    90deg,
+    ${theme.colors.blue},
+    ${theme.colors.blueLighter}
+  );
+  box-shadow: -4px 4px 10px ${theme.colors.blueLighter40};
+`;
+
+export const blueLight = (theme: Theme) => css`
+  background-color: ${theme.colors.blueLight};
+  background: linear-gradient(
+    247.37deg,
+    ${theme.colors.blueLightLighter},
+    ${theme.colors.blueLight}
+  );
+  box-shadow: -4px 4px 10px ${theme.colors.blueLightLighter40};
+`;
+
+export const blueLightDarker = (theme: Theme) => css`
+  background-color: ${theme.colors.blueLightDarker};
+  background: linear-gradient(
+    247.37deg,
+    ${theme.colors.blueDark},
+    ${theme.colors.blueLightDarker}
+  );
+  box-shadow: -4px 4px 10px ${theme.colors.blueLightDarker40};
+`;

package/src/styles/safari-focus-outline.ts

@@ -1,37 +1,37 @@
-import { css, Theme, SerializedStyles } from '@emotion/react';
-
-type OutlineFn = (
-  theme: Theme,
-  color?: keyof Theme['colors'],
-  borderRadius?: string,
-  borderStyle?: React.CSSProperties['borderStyle'],
-) => SerializedStyles;
-
-/* This is for Safari to make a rounded outline */
-export const focusOutline: OutlineFn = (
-  theme,
-  color?,
-  borderRadius = '12px',
-) => css`
-  &:focus::before {
-    ${outlineStyles(theme, color, borderRadius)}
-  }
-`;
-
-export const outlineStyles: OutlineFn = (
-  theme,
-  color?,
-  borderRadius = '12px',
-  borderStyle = 'solid',
-) => css`
-  content: '';
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
-  border-style: ${borderStyle};
-  border-width: 1px;
-  border-color: ${theme.colors[color || 'greyDarker']};
-  border-radius: ${borderRadius};
-`;
+import { css, Theme, SerializedStyles } from '@emotion/react';
+
+type OutlineFn = (
+  theme: Theme,
+  color?: keyof Theme['colors'],
+  borderRadius?: string,
+  borderStyle?: React.CSSProperties['borderStyle'],
+) => SerializedStyles;
+
+/* This is for Safari to make a rounded outline */
+export const focusOutline: OutlineFn = (
+  theme,
+  color?,
+  borderRadius = '12px',
+) => css`
+  &:focus::before {
+    ${outlineStyles(theme, color, borderRadius)}
+  }
+`;
+
+export const outlineStyles: OutlineFn = (
+  theme,
+  color?,
+  borderRadius = '12px',
+  borderStyle = 'solid',
+) => css`
+  content: '';
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  border-style: ${borderStyle};
+  border-width: 1px;
+  border-color: ${theme.colors[color || 'greyDarker']};
+  border-radius: ${borderRadius};
+`;

package/src/styles/styles.spec.tsx

@@ -1,42 +1,42 @@
-import theme from '@themes/main';
-import { outlineStyles } from './safari-focus-outline';
-import styled from '@emotion/styled';
-
-describe('Styles', () => {
-  describe('Outline', () => {
-    it('Creates an outline with default styles', () => {
-      const Component = styled.button`
-        ${outlineStyles(theme)}
-      `;
-
-      const { getByRole } = render(<Component />);
-      const button = getByRole('button');
-
-      expect(button).toHaveStyleRule('border-width', `1px`);
-      expect(button).toHaveStyleRule('border-style', `solid`);
-      expect(button).toHaveStyleRule('border-radius', `12px`);
-      expect(button).toHaveStyleRule(
-        'border-color',
-        `${theme.colors['greyDarker']}`,
-      );
-    });
-
-    it('Creates an outline with custom styles', () => {
-      const colorName = 'grey20';
-      const Component = styled.button`
-        ${outlineStyles(theme, colorName, '2px', 'dashed')}
-      `;
-
-      const { getByRole } = render(<Component />);
-      const button = getByRole('button');
-
-      expect(button).toHaveStyleRule('border-width', `1px`);
-      expect(button).toHaveStyleRule('border-style', `dashed`);
-      expect(button).toHaveStyleRule('border-radius', `2px`);
-      expect(button).toHaveStyleRule(
-        'border-color',
-        `${theme.colors[colorName]}`,
-      );
-    });
-  });
-});
+import theme from '@themes/main';
+import { outlineStyles } from './safari-focus-outline';
+import styled from '@emotion/styled';
+
+describe('Styles', () => {
+  describe('Outline', () => {
+    it('Creates an outline with default styles', () => {
+      const Component = styled.button`
+        ${outlineStyles(theme)}
+      `;
+
+      const { getByRole } = render(<Component />);
+      const button = getByRole('button');
+
+      expect(button).toHaveStyleRule('border-width', `1px`);
+      expect(button).toHaveStyleRule('border-style', `solid`);
+      expect(button).toHaveStyleRule('border-radius', `12px`);
+      expect(button).toHaveStyleRule(
+        'border-color',
+        `${theme.colors['greyDarker']}`,
+      );
+    });
+
+    it('Creates an outline with custom styles', () => {
+      const colorName = 'grey20';
+      const Component = styled.button`
+        ${outlineStyles(theme, colorName, '2px', 'dashed')}
+      `;
+
+      const { getByRole } = render(<Component />);
+      const button = getByRole('button');
+
+      expect(button).toHaveStyleRule('border-width', `1px`);
+      expect(button).toHaveStyleRule('border-style', `dashed`);
+      expect(button).toHaveStyleRule('border-radius', `2px`);
+      expect(button).toHaveStyleRule(
+        'border-color',
+        `${theme.colors[colorName]}`,
+      );
+    });
+  });
+});

package/src/themes/main.ts

@@ -1,116 +1,116 @@
-import { Theme } from '@emotion/react';
-
-const main: Theme = {
-  colors: {
-    black25: 'rgba(0, 0, 0, 0.25)', // #000000
-    black45: 'rgba(0, 0, 0, 0.45)', // #000000
-    white: 'rgba(255, 255, 255, 1)', //  #ffffff
-    white80: 'rgba(255, 255, 255, 0.8)', //  #ffffff
-    white60: 'rgba(255, 255, 255, 0.6)', //  #ffffff
-    white30: 'rgba(255, 255, 255, 0.3)', //  #ffffff
-    greyLighter: 'rgba(238, 241, 247, 1)', //  #eef1f7
-    greySelectedMenuItem: 'rgba(222, 225, 236, 1)', //  #dee1ec
-    greyFocused: 'rgba(210, 212, 219, 1)', //  #d2d4db
-    greyFocused40: 'rgba(210, 212, 219, 0.4)', //  #d2d4db
-    greyDropdownMain: 'rgba(222, 224, 232, 1)', // #dee0e8
-    greyDropdownFocused: 'rgba(128, 129, 131)', // #808183
-    greyDropdownText: 'rgba(21, 21, 21, 1)', // #151515
-    greyArrowSidebar: 'rgba(218, 219, 220)', // #dadbdc
-    grey: 'rgba(195, 197, 204, 1)', // #c3c5cc
-    grey20: 'rgba(43, 45, 49, 0.2)', // #c3c5cc
-    grey40: 'rgba(43, 45, 49, 0.4)', // #c3c5cc
-    greyShadow24: 'rgba(93, 102, 112, 0.24)', //  #5d6670
-    greyDarker: 'rgba(43, 45, 49, 1)', // #2b2d31
-    greyDarker60: 'rgba(43, 45, 49, 0.6)', // #2b2d31
-    greyDarker80: 'rgba(43, 45, 49, 0.8)', // #2b2d31
-    greyDarker14: 'rgba(43, 45, 49, 0.14)', // #2b2d31
-    greyDark: 'rgb(64, 72, 83)', // #404853
-    greyDisabled: 'rgba(85, 87, 90, 1)', // #55575a
-    greyDisabledCheckbox: 'rgba(164, 167, 171, 1)', // #A4A7AB
-    greyButtonGradient: 'rgba(77, 82, 87, 1)', // #4d5257
-    greyButtonGradientLight: 'rgba(94, 103, 114, 1)', // #5e6772
-    greyBackground: 'rgb(64, 68, 73)', // #404449
-    greyBackgroundLight: 'rgb(76, 84, 93)', // #4c545d
-    greyPopoverLight: 'rgba(242, 244, 247, 1)', // #F2F4F7
-    greyGraphite: 'rgba(71, 74, 80, 1)', //#474a50
-    greyGraphite70: 'rgb(122, 124, 127, 0.7)', // #7a7c7f
-    greyShadow: 'rgba(42, 48, 57, 0.08)', // #2a3039
-    greyShadowHover: 'rgba(93, 102, 112, 0.24)', // #5d6670
-    greyOutline: 'rgba(208,	210,	220, 1)', // #d0d2dc
-    greyFilterIcon: 'rgb(133, 137, 147)', // #858993
-    greyCancelClearButton: 'rgb(101, 101, 103)', // #656567
-    redLighter: 'rgba(242, 136, 142, 1)', // #f2888e
-    redLighter40: 'rgba(242, 136, 142, 0.4)', // #f2888e
-    red: 'rgba(235, 117, 86, 1)', // #eb7556
-    red40: 'rgba(235, 117, 86, 0.4)', // #eb7556
-    greenLighter: 'rgba(137, 217, 150, 1)', // #89d996
-    greenLighter20: 'rgba(137, 217, 150, 0.2)', // #89d996
-    greenLighter40: 'rgba(137, 217, 150, 0.4)', // #89d996
-    greenLighter60: 'rgba(137, 217, 150, 0.6)', // #89d996
-    green: 'rgba(82, 197, 135, 1)', // #52c587
-    green20: 'rgba(82, 197, 135, 0.2)', // #52c587
-    green40: 'rgba(82, 197, 135, 0.4)', // #52c587
-    green60: 'rgba(82, 197, 135, 0.6)', // #52c587
-    greenMint: 'rgba(236, 253, 243, 1)', // #ecfdf3
-    greenDark: 'rgba(11, 159, 67, 1)', // #0b9f43
-    pink: 'rgba(240, 129, 107, 1)', // #f0816b
-    pink20: 'rgba(240, 129, 107, 0.2)', // #f0816b
-    pinkDark: 'rgba(221, 99, 75, 1)', // #DD634B
-    pinkDarker: 'rgba(241, 132, 122, 1)', // #F1847A
-    pinkLighter: 'rgba(249, 153, 144, 1)', // #f99990
-    pinkLighter20: 'rgba(249, 153, 144, 0.2)', // #f99990
-    pinkLighter40: 'rgba(249, 153, 144, 0.4)', // #f99990
-    pinkShadow40: 'rgba(236, 119, 91, 0.4)', // #ec775b
-    yellow: 'rgba(237, 153, 93, 1)', // #ed995d
-    yellow20: 'rgba(237, 153, 93, 0.2)', // #ed995d
-    yellowLighter: 'rgba(237, 186, 93, 1)', // #edba5d
-    yellowLighter20: 'rgba(237, 186, 93, 0.2)', // #edba5d
-    yellowLighter40: 'rgba(237, 186, 93, 0.4)', // #edba5d
-    yellowWarm: 'rgba(237, 223, 93, 1)', // #eddf5d
-    yellowWarm20: 'rgba(237, 223, 93, 0.2)', // #eddf5d
-    yellowWarm40: 'rgba(237, 223, 93, 0.4)', // #eddf5d
-    turquoise: 'rgba(65, 187, 187, 1)', // #41bbbb
-    turquoise20: 'rgba(65, 187, 187, 0.2)', // #41bbbb
-    turquoiseShadow40: 'rgba(143, 207, 207, 0.4)', // #8fcfcf
-    turquoiseLighter: 'rgba(125, 203, 203, 1)', // #7dcbcb
-    turquoiseLighter20: 'rgba(125, 203, 203, 0.2)', // #7dcbcb
-    turquoiseLighter40: 'rgba(125, 203, 203, 0.4)', // #7dcbcb
-    purple: 'rgba(123, 71, 235, 1)', // #7b47eb
-    purple20: 'rgba(123, 71, 235, 0.2)', // #7b47eb
-    purpleLighter: 'rgba(160, 120, 245, 1)', // #a078f5
-    purpleLighter20: 'rgba(160, 120, 245, 0.2)', // #a078f5
-    purpleLighter40: 'rgba(160, 120, 245, 0.4)', // #a078f5
-    purpleDark: 'rgba(156, 122, 235, 1)', // #9c7aeb
-    purpleDark40: 'rgba(156, 122, 235, 0.4)', // #9c7aeb
-    blue: 'rgba(65, 120, 225, 1)', // #4178e1
-    blue20: 'rgba(65, 120, 225, 0.2)', // #4178e1
-    blueDark: 'rgba(36, 101, 227, 1)', // #2465e3
-    blueLightDarker: 'rgba(127, 159, 221)', // #7f9fdd
-    blueDropdownWithSelectedItems: 'rgba(236, 247, 255, 1)', // #ECF7FF
-    blueDropdownWithSelectedItemsBorder: 'rgba(166, 213, 244, 1)', // #A6D5F4
-    blueLighter: 'rgba(117, 153, 222, 1)', // #7599de
-    blueLighter20: 'rgba(117, 153, 222, 0.2)', // #7599de
-    blueLighter40: 'rgba(117, 153, 222, 0.4)', // #7599de
-    blueLight: 'rgba(68, 179, 252, 1)', // #44b3fc
-    blueLight20: 'rgba(68, 179, 252, 0.2)', // #44b3fc
-    blueLightDarker40: 'rgba(127, 159, 221, 0.4)', // #7f9fdd
-    blueLightLighter: 'rgba(133, 199, 242, 1)', // #85c7f2
-    blueLightLighter20: 'rgba(133, 199, 242, 0.2)', // #85c7f2
-    blueLightLighter40: 'rgba(133, 199, 242, 0.4)', // #85c7f2
-    blueNotification: 'rgba(0, 133, 226, 1)', //#0085e2
-    blueNotification40: 'rgba(0, 133, 226, 0.4)', //#0085e2
-    blueButtonHoverGradientFrom: 'rgb(72, 122, 218)', //#487ada
-    blueButtonHoverGradientTo: 'rgb(14, 75, 193)', //#0e4bc1
-    blueButtonActive: 'rgb(7, 69, 189)', //#0745bd
-    blueRoyal: 'rgba(72, 125, 225, 1)', //#487de1
-  },
-  mediaQueries: {
-    xs: '@media screen and (max-width: 389px)',
-    sm: '@media screen and (min-width: 390px)',
-    md: '@media screen and (min-width: 900px)',
-    lg: '@media screen and (min-width: 1440px)',
-    xlg: '@media screen and (min-width: 1920px)',
-  },
-};
-
-export default main;
+import { Theme } from '@emotion/react';
+
+const main: Theme = {
+  colors: {
+    black25: 'rgba(0, 0, 0, 0.25)', // #000000
+    black45: 'rgba(0, 0, 0, 0.45)', // #000000
+    white: 'rgba(255, 255, 255, 1)', //  #ffffff
+    white80: 'rgba(255, 255, 255, 0.8)', //  #ffffff
+    white60: 'rgba(255, 255, 255, 0.6)', //  #ffffff
+    white30: 'rgba(255, 255, 255, 0.3)', //  #ffffff
+    greyLighter: 'rgba(238, 241, 247, 1)', //  #eef1f7
+    greySelectedMenuItem: 'rgba(222, 225, 236, 1)', //  #dee1ec
+    greyFocused: 'rgba(210, 212, 219, 1)', //  #d2d4db
+    greyFocused40: 'rgba(210, 212, 219, 0.4)', //  #d2d4db
+    greyDropdownMain: 'rgba(222, 224, 232, 1)', // #dee0e8
+    greyDropdownFocused: 'rgba(128, 129, 131)', // #808183
+    greyDropdownText: 'rgba(21, 21, 21, 1)', // #151515
+    greyArrowSidebar: 'rgba(218, 219, 220)', // #dadbdc
+    grey: 'rgba(195, 197, 204, 1)', // #c3c5cc
+    grey20: 'rgba(43, 45, 49, 0.2)', // #c3c5cc
+    grey40: 'rgba(43, 45, 49, 0.4)', // #c3c5cc
+    greyShadow24: 'rgba(93, 102, 112, 0.24)', //  #5d6670
+    greyDarker: 'rgba(43, 45, 49, 1)', // #2b2d31
+    greyDarker60: 'rgba(43, 45, 49, 0.6)', // #2b2d31
+    greyDarker80: 'rgba(43, 45, 49, 0.8)', // #2b2d31
+    greyDarker14: 'rgba(43, 45, 49, 0.14)', // #2b2d31
+    greyDark: 'rgb(64, 72, 83)', // #404853
+    greyDisabled: 'rgba(85, 87, 90, 1)', // #55575a
+    greyDisabledCheckbox: 'rgba(164, 167, 171, 1)', // #A4A7AB
+    greyButtonGradient: 'rgba(77, 82, 87, 1)', // #4d5257
+    greyButtonGradientLight: 'rgba(94, 103, 114, 1)', // #5e6772
+    greyBackground: 'rgb(64, 68, 73)', // #404449
+    greyBackgroundLight: 'rgb(76, 84, 93)', // #4c545d
+    greyPopoverLight: 'rgba(242, 244, 247, 1)', // #F2F4F7
+    greyGraphite: 'rgba(71, 74, 80, 1)', //#474a50
+    greyGraphite70: 'rgb(122, 124, 127, 0.7)', // #7a7c7f
+    greyShadow: 'rgba(42, 48, 57, 0.08)', // #2a3039
+    greyShadowHover: 'rgba(93, 102, 112, 0.24)', // #5d6670
+    greyOutline: 'rgba(208,	210,	220, 1)', // #d0d2dc
+    greyFilterIcon: 'rgb(133, 137, 147)', // #858993
+    greyCancelClearButton: 'rgb(101, 101, 103)', // #656567
+    redLighter: 'rgba(242, 136, 142, 1)', // #f2888e
+    redLighter40: 'rgba(242, 136, 142, 0.4)', // #f2888e
+    red: 'rgba(235, 117, 86, 1)', // #eb7556
+    red40: 'rgba(235, 117, 86, 0.4)', // #eb7556
+    greenLighter: 'rgba(137, 217, 150, 1)', // #89d996
+    greenLighter20: 'rgba(137, 217, 150, 0.2)', // #89d996
+    greenLighter40: 'rgba(137, 217, 150, 0.4)', // #89d996
+    greenLighter60: 'rgba(137, 217, 150, 0.6)', // #89d996
+    green: 'rgba(82, 197, 135, 1)', // #52c587
+    green20: 'rgba(82, 197, 135, 0.2)', // #52c587
+    green40: 'rgba(82, 197, 135, 0.4)', // #52c587
+    green60: 'rgba(82, 197, 135, 0.6)', // #52c587
+    greenMint: 'rgba(236, 253, 243, 1)', // #ecfdf3
+    greenDark: 'rgba(11, 159, 67, 1)', // #0b9f43
+    pink: 'rgba(240, 129, 107, 1)', // #f0816b
+    pink20: 'rgba(240, 129, 107, 0.2)', // #f0816b
+    pinkDark: 'rgba(221, 99, 75, 1)', // #DD634B
+    pinkDarker: 'rgba(241, 132, 122, 1)', // #F1847A
+    pinkLighter: 'rgba(249, 153, 144, 1)', // #f99990
+    pinkLighter20: 'rgba(249, 153, 144, 0.2)', // #f99990
+    pinkLighter40: 'rgba(249, 153, 144, 0.4)', // #f99990
+    pinkShadow40: 'rgba(236, 119, 91, 0.4)', // #ec775b
+    yellow: 'rgba(237, 153, 93, 1)', // #ed995d
+    yellow20: 'rgba(237, 153, 93, 0.2)', // #ed995d
+    yellowLighter: 'rgba(237, 186, 93, 1)', // #edba5d
+    yellowLighter20: 'rgba(237, 186, 93, 0.2)', // #edba5d
+    yellowLighter40: 'rgba(237, 186, 93, 0.4)', // #edba5d
+    yellowWarm: 'rgba(237, 223, 93, 1)', // #eddf5d
+    yellowWarm20: 'rgba(237, 223, 93, 0.2)', // #eddf5d
+    yellowWarm40: 'rgba(237, 223, 93, 0.4)', // #eddf5d
+    turquoise: 'rgba(65, 187, 187, 1)', // #41bbbb
+    turquoise20: 'rgba(65, 187, 187, 0.2)', // #41bbbb
+    turquoiseShadow40: 'rgba(143, 207, 207, 0.4)', // #8fcfcf
+    turquoiseLighter: 'rgba(125, 203, 203, 1)', // #7dcbcb
+    turquoiseLighter20: 'rgba(125, 203, 203, 0.2)', // #7dcbcb
+    turquoiseLighter40: 'rgba(125, 203, 203, 0.4)', // #7dcbcb
+    purple: 'rgba(123, 71, 235, 1)', // #7b47eb
+    purple20: 'rgba(123, 71, 235, 0.2)', // #7b47eb
+    purpleLighter: 'rgba(160, 120, 245, 1)', // #a078f5
+    purpleLighter20: 'rgba(160, 120, 245, 0.2)', // #a078f5
+    purpleLighter40: 'rgba(160, 120, 245, 0.4)', // #a078f5
+    purpleDark: 'rgba(156, 122, 235, 1)', // #9c7aeb
+    purpleDark40: 'rgba(156, 122, 235, 0.4)', // #9c7aeb
+    blue: 'rgba(65, 120, 225, 1)', // #4178e1
+    blue20: 'rgba(65, 120, 225, 0.2)', // #4178e1
+    blueDark: 'rgba(36, 101, 227, 1)', // #2465e3
+    blueLightDarker: 'rgba(127, 159, 221)', // #7f9fdd
+    blueDropdownWithSelectedItems: 'rgba(236, 247, 255, 1)', // #ECF7FF
+    blueDropdownWithSelectedItemsBorder: 'rgba(166, 213, 244, 1)', // #A6D5F4
+    blueLighter: 'rgba(117, 153, 222, 1)', // #7599de
+    blueLighter20: 'rgba(117, 153, 222, 0.2)', // #7599de
+    blueLighter40: 'rgba(117, 153, 222, 0.4)', // #7599de
+    blueLight: 'rgba(68, 179, 252, 1)', // #44b3fc
+    blueLight20: 'rgba(68, 179, 252, 0.2)', // #44b3fc
+    blueLightDarker40: 'rgba(127, 159, 221, 0.4)', // #7f9fdd
+    blueLightLighter: 'rgba(133, 199, 242, 1)', // #85c7f2
+    blueLightLighter20: 'rgba(133, 199, 242, 0.2)', // #85c7f2
+    blueLightLighter40: 'rgba(133, 199, 242, 0.4)', // #85c7f2
+    blueNotification: 'rgba(0, 133, 226, 1)', //#0085e2
+    blueNotification40: 'rgba(0, 133, 226, 0.4)', //#0085e2
+    blueButtonHoverGradientFrom: 'rgb(72, 122, 218)', //#487ada
+    blueButtonHoverGradientTo: 'rgb(14, 75, 193)', //#0e4bc1
+    blueButtonActive: 'rgb(7, 69, 189)', //#0745bd
+    blueRoyal: 'rgba(72, 125, 225, 1)', //#487de1
+  },
+  mediaQueries: {
+    xs: '@media screen and (max-width: 389px)',
+    sm: '@media screen and (min-width: 390px)',
+    md: '@media screen and (min-width: 900px)',
+    lg: '@media screen and (min-width: 1440px)',
+    xlg: '@media screen and (min-width: 1920px)',
+  },
+};
+
+export default main;