@ssa-ui-kit/core 0.0.1-alpha

package/src/components/Typography/Typography.tsx

@@ -0,0 +1,52 @@
+import { forwardRef } from 'react';
+import { css } from '@emotion/react';
+
+import { TypographyProps } from './types';
+import * as style from './styles';
+
+const variantsMapping = {
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  h4: 'h4',
+  h5: 'h5',
+  h6: 'h6',
+  subtitle: 'h6',
+  body1: 'p',
+  body2: 'p',
+  body3: 'p',
+  caption: 'span',
+};
+
+const Typography = forwardRef<HTMLElement, TypographyProps>(function Typography(
+  {
+    children,
+    weight = 'regular',
+    variant = 'body1',
+    gutter = false,
+    color = 'rgba(43, 45, 49, 1)',
+    as,
+    ...props
+  },
+  ref,
+) {
+  const Component = as || variantsMapping[variant];
+
+  return (
+    <Component
+      ref={ref}
+      css={[
+        style[variant],
+        style[weight],
+        css`
+          color: ${color};
+        `,
+        gutter && style.gutter,
+      ]}
+      {...props}>
+      {children}
+    </Component>
+  );
+});
+
+export default Typography;

package/src/components/Typography/index.ts

@@ -0,0 +1 @@
+export { default } from './Typography';

package/src/components/Typography/styles.ts

@@ -0,0 +1,85 @@
+import { css, Theme } from '@emotion/react';
+
+export const h1 = css`
+  font-size: 2.488rem; //39px
+  line-height: 3.375rem;
+`;
+export const h2 = (theme: Theme) => css`
+  font-size: 1.188rem; // 19px
+  line-height: 1.375rem; //26.23px;
+
+  ${theme.mediaQueries.md} {
+    font-size: 1.719rem; //27px
+  }
+  ${theme.mediaQueries.lg} {
+    font-size: 2.074rem; //33px
+    line-height: 2.813rem; // 45px
+  }
+`;
+export const h3 = (theme: Theme) => css`
+  font-size: 1.438rem; // 23px
+  line-height: 1.625rem;
+
+  ${theme.mediaQueries.lg} {
+    font-size: 1.728rem; //27px
+  }
+`;
+export const h4 = css`
+  font-size: 1.44rem; // 23px
+  line-height: 1.625rem;
+`;
+export const h5 = (theme: Theme) => css`
+  font-size: 1rem; //16px
+  line-height: 1.5rem;
+
+  ${theme.mediaQueries.md} {
+    font-size: 1.2rem; //19px
+  }
+`;
+export const h6 = css`
+  font-size: 1rem; // 16px
+  line-height: 1.375rem;
+`;
+export const subtitle = css`
+  font-size: 0.833rem; // 13.2px
+  line-height: 0.938rem;
+`;
+export const body1 = css`
+  font-size: 0.694rem; //11px
+  line-height: 0.938rem;
+`;
+export const body2 = css`
+  font-size: 0.579rem; //9px
+  line-height: 0.938rem;
+`;
+export const body3 = css`
+  font-size: 0.5rem; //8px
+  line-height: 0.938rem;
+`;
+export const caption = css`
+  display: block;
+  font-size: 0.481rem; //7.6px
+  line-height: 0.75rem;
+`;
+
+// font-weight variants
+export const lighter = css`
+  font-style: normal;
+  font-weight: 400;
+`;
+export const regular = css`
+  font-style: normal;
+  font-weight: 500;
+`;
+export const medium = css`
+  font-style: normal;
+  font-weight: 600;
+`;
+export const bold = css`
+  font-style: normal;
+  font-weight: 700;
+`;
+
+export const gutter = css`
+  margin-block-end: 1rem;
+`;

package/src/components/Typography/types.ts

@@ -0,0 +1,22 @@
+export interface TypographyProps {
+  variant?:
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'subtitle'
+    | 'body1'
+    | 'body2'
+    | 'body3'
+    | 'caption';
+  weight?: 'lighter' | 'regular' | 'medium' | 'bold';
+  gutter?: boolean;
+  color?: string;
+  children: React.ReactNode;
+  as?: React.ElementType;
+  className?: string;
+  ref?: React.Ref<HTMLElement>;
+  id?: string;
+}

package/src/components/Wrapper/Wrapper.spec.tsx

@@ -0,0 +1,15 @@
+import Wrapper from './Wrapper';
+
+describe('Style', () => {
+  it('outlineStyles', () => {
+    const { getByText } = render(
+      <Wrapper alignItems="baseline" direction="row">
+        element
+      </Wrapper>,
+    );
+    const el = getByText('element');
+
+    expect(el).toHaveStyleRule('align-items', `baseline`);
+    expect(el).toHaveStyleRule('flex-direction', `row`);
+  });
+});

package/src/components/Wrapper/Wrapper.tsx

@@ -0,0 +1,19 @@
+import styled from '@emotion/styled';
+import { CommonProps } from '@global-types/emotion';
+
+const Wrapper = styled.div<
+  {
+    avatarSize?: number;
+    direction?: string;
+    alignItems?: string;
+  } & CommonProps
+>`
+  display: flex;
+  align-items: ${({ alignItems }) => (alignItems ? alignItems : 'center')};
+
+  width: 100%;
+
+  flex-direction: ${({ direction }) => (direction ? direction : 'row')};
+`;
+
+export default Wrapper;

package/src/components/Wrapper/index.ts

@@ -0,0 +1 @@
+export { default } from './Wrapper';

package/src/consts.ts

@@ -0,0 +1,18 @@
+export const SCREEN_SIZES = {
+  390: {
+    width: 390,
+    height: 844,
+  },
+  900: {
+    width: 900,
+    height: 1200,
+  },
+  1440: {
+    width: 1440,
+    height: 900,
+  },
+  1920: {
+    width: 1920,
+    height: 1080,
+  },
+};

package/src/index.ts

@@ -0,0 +1,85 @@
+import './injectGlobal';
+export * from './types/global';
+
+import './types/global.d';
+import './types/emotion.d';
+
+export * from './types/emotion';
+export { default as mainTheme } from './themes/main';
+
+export * as globalStyles from './styles/global';
+export * as styleUtils from './styles/safari-focus-outline';
+
+export * from './components/AccordionGroup';
+export { default as Avatar } from './components/Avatar';
+export { default as Badge } from './components/Badge';
+export { default as Button } from './components/Button';
+export { default as Card } from './components/Card';
+export { default as CardBase } from './components/Card/CardBase';
+export { default as CardContent } from './components/CardContent';
+export { default as CardHeader } from './components/CardHeader';
+export { default as ColorPicker } from './components/ColorPicker';
+export { default as Checkbox } from './components/Checkbox';
+export * from './components/Checkbox';
+export { default as FormCheckbox } from './components/FormCheckbox';
+export * from './components/FormCheckbox';
+export { default as Dropdown } from './components/Dropdown';
+export { default as DropdownOption } from './components/DropdownOption';
+export type { IDropdownOption } from './components/DropdownOptions';
+export { default as Icon } from './components/Icon';
+export * from './components/Icon';
+export * from './components/Icon/types';
+export { default as Input } from './components/Input';
+export { default as Label } from './components/Label';
+export { default as Modal } from './components/Modal';
+export { default as ModalDismissButton } from './components/ModalDismissButton';
+export { default as ModalContent } from './components/ModalContent';
+export { default as ModalOpenButton } from './components/ModalOpenButton';
+export * from './components/Modal';
+export * from './components/Popover';
+export { default as MultipleDropdown } from './components/MultipleDropdown';
+export { default as MultipleDropdownNotification } from './components/MultipleDropdownNotification';
+export { default as MultipleDropdownOptions } from './components/MultipleDropdownOptions';
+export { default as ProgressBar } from './components/ProgressBar';
+export { default as ProgressCircle } from './components/ProgressCircle';
+export { default as ProgressLegend } from './components/ProgressLegend';
+export { default as ProgressLegendItem } from './components/ProgressLegendItem';
+export { default as ProgressVertical } from './components/ProgressVertical';
+export { default as Stepper } from './components/Stepper';
+export { default as Step } from './components/Step';
+export { default as StepLabel } from './components/StepLabel';
+export { default as Switch } from './components/Switch';
+export * from './components/Switch';
+export { default as Table } from './components/Table';
+export { default as TableHead } from './components/TableHead';
+export { default as TableRow } from './components/TableRow';
+export { default as TableCell } from './components/TableCell';
+export { default as TableBody } from './components/TableBody';
+export { default as Tooltip } from './components/Tooltip';
+export { default as TooltipTrigger } from './components/TooltipTrigger';
+export { default as TooltipContent } from './components/TooltipContent';
+export * from './components/Tooltip';
+export { default as TabBar } from './components/TabBar';
+export { default as Tab } from './components/Tab';
+export { default as LargeTab } from './components/LargeTab';
+export * from './components/TabBar';
+export { default as Tag } from './components/Tag';
+export * from './components/Tag';
+export { default as Textarea } from './components/Textarea';
+export * from './components/Textarea';
+export { default as TextField } from './components/TextField';
+export * from './components/TextField';
+export { default as Typography } from './components/Typography';
+export * from './components/Typography';
+export { default as Wrapper } from './components/Wrapper';
+export * from './components/Wrapper';
+export { default as Radio } from './components/Radio';
+export { default as RadioGroup } from './components/RadioGroup';
+export { default as FormRadioGroup } from './components/FormRadioGroup';
+export { default as ResponsiveImage } from './components/ResponsiveImage';
+export * from './components/ResponsiveImage';
+export { default as Form } from './components/Form';
+export { default as FormGroup } from './components/FormGroup';
+export { default as FormAction } from './components/FormAction';
+export { default as Indicator } from './components/Indicator';
+export * from './components/ButtonGroup';

package/src/injectGlobal.ts

@@ -0,0 +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;
+  }
+  
+`;

package/src/styles/global.ts

@@ -0,0 +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};
+`;

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

@@ -0,0 +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};
+`;

package/src/styles/styles.spec.tsx

@@ -0,0 +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]}`,
+      );
+    });
+  });
+});

package/src/themes/main.ts

@@ -0,0 +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: 390px)',
+    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;

package/src/types/emotion.d.ts

@@ -0,0 +1,7 @@
+/* eslint-disable @typescript-eslint/no-empty-interface */
+import '@emotion/react';
+import { Theme as T } from './emotion';
+
+declare module '@emotion/react' {
+  export interface Theme extends T {}
+}