feat: change theme and continue button

packages/components/src/Button/Button.style.tsx

@@ -1,8 +1,6 @@
-import styled, { css } from 'styled-components';
-import { ArrowTopRightOnSquare } from '@interlay/icons';
-import { theme } from '@interlay/theme';
 import { ButtonSizes, ButtonVariants } from '@interlay/themev2';
 import { ButtonColors } from '@interlay/themev2/src/components';
+import styled, { css } from 'styled-components';
 
 type StyledButtonProps = {
   $fullWidth?: boolean;
@@ -16,61 +14,44 @@ const StyledButton = styled.button<StyledButtonProps>`
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  text-decoration: none;
   width: ${(props) => (props.$fullWidth ? '100%' : 'auto')};
   background: none;
-  outline: ${({ $isFocusVisible }) => !$isFocusVisible && 'none'};
+  outline: transparent solid 2px;
   border: 0px solid;
 
-  border-radius: ${({ theme }) => theme.button.rounded};
-  font-weight: ${({ theme }) => theme.button.fontWeight};
+  text-decoration: none;
+  appearance: none;
+  user-select: none;
 
-  ${({ theme, $size }) => css(theme.button.size[$size])}
-  ${({ theme, $variant, $color }) => {
-    const { bg, color, border, hover, focus, disabled, active } = theme.button.variant[$variant].color[$color];
+  ${({ theme, $size, $variant, $color, $isFocusVisible }) => {
+    const { active, disabled, hover, focus, focusVisible } = theme.button.variant[$variant].color[$color];
 
     return css`
-      background-color: ${bg};
-      color: ${color};
-      border: ${border};
+      ${theme.button.base}
+      ${theme.button.size[$size]}
+      ${theme.button.variant[$variant].color[$color].base}
+      ${$isFocusVisible && focusVisible}
 
       &:hover:not([disabled]) {
-        background-color: ${hover.bg};
+        ${hover}
       }
 
       &:active:not([disabled]) {
-        background-color: ${active.bg};
+        ${active}
       }
 
       &:focus:not([disabled]) {
-        box-shadow: ${focus?.boxShadow};
+        ${focus}
       }
 
       &[aria-disabled='true'],
       &[disabled] {
         pointer-events: none;
         cursor: not-allowed;
-        color: ${disabled.color};
-        background-color: ${disabled.bg};
-        border: ${disabled.border};
+        ${disabled}
       }
     `;
   }}
-
-  transition: ${({ theme }) => theme.transition('common', 'normal', 'easeIn')}
-`;
-
-const LoadingWrapper = styled.span`
-  display: flex;
-  align-items: center;
-  margin-right: ${theme.spacing.spacing2};
-`;
-
-const StyledIcon = styled(ArrowTopRightOnSquare)`
-  margin-left: ${theme.spacing.spacing2};
-  width: 1.2em;
-  height: 1.2em;
-  color: inherit;
 `;
 
-export { LoadingWrapper, StyledButton, StyledIcon };
+export { StyledButton };

packages/core/themeV2/src/components/button.ts

@@ -1,44 +1,27 @@
-type ButtonSizes = 's' | 'md' | 'lg' | 'xl' | '2xl';
+import { Styles } from 'styled-components/dist/types';
 
-type ButtonSizeParams = {
-  padding: string;
-  fontSize: string;
-  lineHeight: string;
-  height: string;
-};
+type ButtonSizes = 's' | 'md' | 'lg' | 'xl' | '2xl';
 
 type ButtonColors = 'default' | 'primary';
 
 type ButtonColorsParams = {
-  color: string;
-  bg: string;
-  border?: string;
-  hover: {
-    bg: string;
-  };
-  active: {
-    bg: string;
-  };
-  focus?: {
-    boxShadow: string;
-  };
-  disabled: {
-    color: string;
-    bg?: string;
-    border?: string;
-  };
+  base: Styles<object>;
+  hover: Styles<object>;
+  active: Styles<object>;
+  focus?: Styles<object>;
+  focusVisible?: Styles<object>;
+  disabled: Styles<object>;
 };
 
-type ButtonVariants = 'solid' | 'outline' | 'ghost';
-
 type ButtonVariantParams = {
   color: Record<ButtonColors, ButtonColorsParams>;
 };
 
+type ButtonVariants = 'solid' | 'outline' | 'ghost';
+
 type ButtonTheme = {
-  rounded: string;
-  fontWeight: number;
-  size: Record<ButtonSizes, ButtonSizeParams>;
+  base: Styles<object>;
+  size: Record<ButtonSizes, Styles<object>>;
   variant: Record<ButtonVariants, ButtonVariantParams>;
 };
 

packages/core/themeV2/src/core/colors.ts

@@ -1,21 +1,15 @@
-type Color = {
-  50: string;
-  75: string;
-  100: string;
-  200: string;
-  300: string;
-  400: string;
-  500: string;
-};
+type ColorHue = keyof Colors;
+
+type ColorShade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
 
 type Colors = {
   light: string;
   dark: string;
-  primary: Color;
+  primary: Record<ColorShade, string>;
   // secondary: Color;
-  grey: Color;
+  grey: Record<ColorShade, string>;
   // success: Color;
   // error: Color;
 };
 
-export type { Colors };
+export type { Colors, ColorHue, ColorShade };

packages/core/themeV2/src/core/transition.ts

@@ -1,3 +1,5 @@
+import { Styles } from 'styled-components/dist/types';
+
 type TransitionProperty = keyof typeof transitionProprety;
 
 const transitionProprety = {
@@ -32,8 +34,11 @@ const transition = (
   property: TransitionProperty,
   duration: TransitionDuration,
   timingFunction?: TransitionTimingFunction
-) =>
-  `${transitionProprety[property]} ${transitionDuration[duration]} ${timingFunction ? transitionTimingFunction[timingFunction] : ''}`;
+): Styles<object> => ({
+  transitionProperty: transitionProprety[property],
+  transitionDuration: transitionDuration[duration],
+  transitionTimingFunction: timingFunction && transitionTimingFunction[timingFunction]
+});
 
 export { transition };
 export type { TransitionProperty, TransitionDuration, TransitionTimingFunction };

packages/core/themeV2/src/core/typography.ts

@@ -1,57 +1,57 @@
-import { css } from 'styled-components';
+import { Styles } from 'styled-components/dist/types';
 
 import { style } from '../utils';
 
 import { fontSize } from './font-size';
 import { lineHeight } from './line-height';
 
-type Typography = keyof typeof typographyBase;
+type Typography = 'xs' | 's' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl';
 
-const typographyBase = {
-  xs: css({
+const typographyBase: Record<Typography, Styles<object>> = {
+  xs: {
     fontSize: fontSize('xs', 'rem'),
     lineHeight: lineHeight('xs', 'rem')
-  }),
-  s: css({
+  },
+  s: {
     fontSize: fontSize('s', 'rem'),
     lineHeight: lineHeight('s', 'rem')
-  }),
-  md: css({
+  },
+  md: {
     fontSize: fontSize('md', 'rem'),
     lineHeight: lineHeight('md', 'rem')
-  }),
-  lg: css({
+  },
+  lg: {
     fontSize: fontSize('lg', 'rem'),
     lineHeight: lineHeight('lg', 'rem')
-  }),
-  xl: css({
+  },
+  xl: {
     fontSize: fontSize('xl', 'rem'),
     lineHeight: lineHeight('xl', 'rem')
-  }),
-  '2xl': css({
+  },
+  '2xl': {
     fontSize: fontSize('2xl', 'rem'),
     lineHeight: lineHeight('2xl', 'rem')
-  }),
-  '3xl': css({
+  },
+  '3xl': {
     fontSize: fontSize('3xl', 'rem'),
     lineHeight: lineHeight('3xl', 'rem')
-  }),
-  '4xl': css({
+  },
+  '4xl': {
     fontSize: fontSize('4xl', 'rem'),
     lineHeight: lineHeight('4xl', 'rem')
-  }),
-  '5xl': css({
+  },
+  '5xl': {
     fontSize: fontSize('5xl', 'rem'),
     lineHeight: lineHeight('5xl', 'rem')
-  }),
-  '6xl': css({
+  },
+  '6xl': {
     fontSize: fontSize('6xl', 'rem'),
     lineHeight: lineHeight('6xl', 'rem')
-  }),
-  '7xl': css({
+  },
+  '7xl': {
     fontSize: fontSize('7xl', 'rem'),
     lineHeight: lineHeight('7xl', 'rem')
-  })
+  }
 };
 
 const typography = style(typographyBase);