chore: import styled-components instead styled-components/macro

layerx-labs · Apr 4, 2024 · df3060a · df3060a
1 parent 24af521
commit df3060a
Show file tree

Hide file tree

Showing 24 changed files with 58 additions and 54 deletions.
diff --git a/src/atoms/avatar-image/styles.tsx b/src/atoms/avatar-image/styles.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import { rem } from 'polished';
 import { colors } from '../../ions/variables';
 

diff --git a/src/atoms/button-dropdown/styles.tsx b/src/atoms/button-dropdown/styles.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import { rem } from 'polished';
 import { field, misc } from '../../ions/variables';
 
@@ -39,8 +39,8 @@ export const ActionsMenuStyle = styled.div<ActionsMenuInterface>`
       opacity: 1;
       // prettier-ignore
       height: calc(${rem('45px')} * ${props => props.visibleActions} + ${rem(
-  '2px'
-)});
+        '2px'
+      )});
       max-height: ${rem('1280px')};
     }
 

diff --git a/src/atoms/button-link/styles.tsx b/src/atoms/button-link/styles.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import { rem } from 'polished';
 import { ButtonColor, ButtonVariant } from '../button/types';
 import { colors, typography, button, misc } from '../../ions/variables';
@@ -23,8 +23,8 @@ export const ButtonLinkStyle = styled.a<ButtonStyleProps>`
     props.color === 'white'
       ? colors.grey100
       : props.color === 'black'
-      ? colors.grey900
-      : useColor(props.color ?? 'black').hover};
+        ? colors.grey900
+        : useColor(props.color ?? 'black').hover};
 
   border-width: ${props =>
     props.variant === 'outline' ? button.borderWidth : 0};
@@ -34,8 +34,8 @@ export const ButtonLinkStyle = styled.a<ButtonStyleProps>`
     props.variant === 'text'
       ? 0
       : props.rounded
-      ? '999px'
-      : button.borderRadius};
+        ? '999px'
+        : button.borderRadius};
   background-color: ${props =>
     props.variant === 'solid' ? 'var(--bg)' : 'transparent'};
   width: min-content;

diff --git a/src/atoms/button/styles.tsx b/src/atoms/button/styles.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import { rem } from 'polished';
 import { ButtonColor, ButtonVariant } from './types';
 import { colors, typography, button, misc } from '../../ions/variables';
@@ -23,8 +23,8 @@ export const ButtonWrapper = styled.button<ButtonProps>`
     props.color === 'white'
       ? colors.grey100
       : props.color === 'black'
-      ? colors.grey900
-      : useColor(props.color ?? 'black').hover};
+        ? colors.grey900
+        : useColor(props.color ?? 'black').hover};
 
   margin: 0;
   border-width: ${props =>
@@ -35,8 +35,8 @@ export const ButtonWrapper = styled.button<ButtonProps>`
     props.variant === 'text'
       ? 0
       : props.rounded
-      ? '999px'
-      : button.borderRadius};
+        ? '999px'
+        : button.borderRadius};
   background-color: ${props =>
     props.variant === 'solid' ? 'var(--bg)' : 'transparent'};
   width: min-content;

diff --git a/src/atoms/checkbox-button/styles.tsx b/src/atoms/checkbox-button/styles.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import { rem } from 'polished';
 import { colors, field, misc } from '../../ions/variables';
 
@@ -13,15 +13,15 @@ export const CheckboxWrapper = styled.label<CheckboxWrapperProps>`
       props.disabled
         ? field.borderColor
         : props.checked
-        ? field.successBorderColor
-        : field.borderColor};
+          ? field.successBorderColor
+          : field.borderColor};
   border-radius: ${field.borderRadius};
   background-color: ${props =>
     props.disabled
       ? field.disabledBackgroundColor
       : props.checked
-      ? field.successBackgroundColor
-      : field.backgroundColor};
+        ? field.successBackgroundColor
+        : field.backgroundColor};
   height: ${field.height};
   display: flex;
   align-items: center;
@@ -42,17 +42,17 @@ export const CheckboxWrapper = styled.label<CheckboxWrapperProps>`
       props.disabled
         ? field.disabledBackgroundColor
         : props.checked
-        ? field.successBackgroundColor
-        : field.borderColor};
+          ? field.successBackgroundColor
+          : field.borderColor};
   }
 
   span {
     color: ${props =>
       props.disabled
         ? field.disabledColor
         : props.checked
-        ? colors.white
-        : null};
+          ? colors.white
+          : null};
     transition-duration: ${misc.transitionDuration};
   }
 `;

diff --git a/src/atoms/checkbox/styles.tsx b/src/atoms/checkbox/styles.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import { rem } from 'polished';
 import { colors, field, misc } from '../../ions/variables';
 
@@ -29,8 +29,8 @@ export const CheckboxWrapper = styled.label<CheckboxWrapperProps>`
       props.disabled
         ? field.disabledColor
         : props.error
-        ? field.errorBorderColor
-        : null};
+          ? field.errorBorderColor
+          : null};
     border-color: ${props => (props.error ? field.errorBorderColor : null)};
   }
 `;

diff --git a/src/atoms/error-field/styles.tsx b/src/atoms/error-field/styles.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import { ErrorFieldColor } from './types';
 import { field } from '../../ions/variables';
 import { rem } from 'polished';

diff --git a/src/atoms/icon/stories/styles.tsx b/src/atoms/icon/stories/styles.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import { rem } from 'polished';
 import { colors } from '../../../ions/variables';
 

diff --git a/src/atoms/label/styles.tsx b/src/atoms/label/styles.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import { rem } from 'polished';
 import { colors, typography } from '../../ions/variables';
 

diff --git a/src/atoms/tag-number/styles.tsx b/src/atoms/tag-number/styles.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import { rem } from 'polished';
 import { TagColor } from '../tag/types';
 import { useColor } from '../../utils/hooks/use-color';

diff --git a/src/atoms/tag/styles.tsx b/src/atoms/tag/styles.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import { rem } from 'polished';
 import { TagVariant, TagColor } from './types';
 import { typography } from '../../ions/variables';

diff --git a/src/atoms/text-field/styles.tsx b/src/atoms/text-field/styles.tsx
@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components/macro';
+import styled, { css } from 'styled-components';
 import { rem } from 'polished';
 import { field, misc, typography } from '../../ions/variables';
 import icons from '../../ions/icons';
@@ -66,8 +66,8 @@ export const TextFieldInputStyle = styled.input<InputStyleProps>`
         props.error
           ? 'rgb(235,87,87)'
           : 'rgb(217,212,237)'}" d=${JSON.stringify(
-      icons[props.icon]
-    )} /></svg>');
+        icons[props.icon]
+      )} /></svg>');
       padding-left: ${rem('40px')};
 
       &:focus {

diff --git a/src/atoms/truncate-line/styles.tsx b/src/atoms/truncate-line/styles.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 
 export const TruncateWrapper = styled.div`
   display: table;

diff --git a/src/molecules/actions-menu/styles.tsx b/src/molecules/actions-menu/styles.tsx
@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components/macro';
+import styled, { css } from 'styled-components';
 import { rem } from 'polished';
 import { field } from '../../ions/variables';
 

diff --git a/src/molecules/card-value/styles.tsx b/src/molecules/card-value/styles.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import { rem } from 'polished';
 import { colors, field, typography } from '../../ions/variables';
 

diff --git a/src/molecules/empty-table/styles.tsx b/src/molecules/empty-table/styles.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import { rem, rgba } from 'polished';
 import { colors, field, typography } from '../../ions/variables';
 import { device } from '../../ions/breakpoints';

diff --git a/src/molecules/form-group/styles.tsx b/src/molecules/form-group/styles.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import { rem } from 'polished';
 import { colors, field } from '../../ions/variables';
 interface WrapperProps {

diff --git a/src/molecules/modal-footer/styles.tsx b/src/molecules/modal-footer/styles.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import { rem } from 'polished';
 import { device } from '../../ions/breakpoints';
 

diff --git a/src/molecules/note-card/styles.tsx b/src/molecules/note-card/styles.tsx
@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components/macro';
+import styled, { css } from 'styled-components';
 import { NoteColor } from './types';
 import { rem } from 'polished';
 import { device } from '../../ions/breakpoints';

diff --git a/src/molecules/number-input-spinner/styles.tsx b/src/molecules/number-input-spinner/styles.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import { rem } from 'polished';
 import { colors, field, misc, typography } from '../../ions/variables';
 

diff --git a/src/molecules/table-dnd/styles.tsx b/src/molecules/table-dnd/styles.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import { rem } from 'polished';
 import { colors, field, misc, typography } from '../../ions/variables';
 import { device } from '../../ions/breakpoints';

diff --git a/src/molecules/table/styles.tsx b/src/molecules/table/styles.tsx
@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components/macro';
+import styled, { css } from 'styled-components';
 import { rem } from 'polished';
 import { colors, field, misc, typography } from '../../ions/variables';
 import { device } from '../../ions/breakpoints';
@@ -16,11 +16,8 @@ export const OverflowWrapper = styled.div`
   @media ${device.s} {
     display: block;
     border-radius: ${field.borderRadius};
-    background: linear-gradient(
-        to right,
-        ${colors.white} 30%,
-        rgba(255, 255, 255, 0)
-      ),
+    background:
+      linear-gradient(to right, ${colors.white} 30%, rgba(255, 255, 255, 0)),
       linear-gradient(to right, rgba(255, 255, 255, 0), ${colors.white} 70%) 0
         100%,
       radial-gradient(
@@ -36,9 +33,16 @@ export const OverflowWrapper = styled.div`
         0 100%;
     background-repeat: no-repeat;
     background-color: ${colors.white};
-    background-size: ${rem('40px')} 100%, ${rem('40px')} 100%,
-      ${rem('14px')} 100%, ${rem('14px')} 100%;
-    background-position: 0 0, 100%, 0 0, 100%;
+    background-size:
+      ${rem('40px')} 100%,
+      ${rem('40px')} 100%,
+      ${rem('14px')} 100%,
+      ${rem('14px')} 100%;
+    background-position:
+      0 0,
+      100%,
+      0 0,
+      100%;
     background-attachment: local, local, scroll, scroll;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;

diff --git a/src/molecules/wizard-steps/styles.tsx b/src/molecules/wizard-steps/styles.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import { rem } from 'polished';
 import { device } from '../../ions/breakpoints';
 import { colors, field, typography } from '../../ions/variables';

diff --git a/src/organisms/modal/styles.tsx b/src/organisms/modal/styles.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components/macro';
+import styled from 'styled-components';
 import { rem, rgba } from 'polished';
 import { colors, field, misc, typography } from '../../ions/variables';
 import { device } from '../../ions/breakpoints';