Fix/design system

packages/components/src/Card/Card.style.tsx

@@ -24,7 +24,7 @@ const StyledCard = styled(Flex)<StyledCardProps>`
     const { border, boxShadow, backgroundColor, ...baseCss } = theme.card.base;
 
     return css`
-      border: ${typeof $bordered === 'boolean' ? border : `1px solid ${$bordered}`};
+      border: ${typeof $bordered === 'boolean' ? border : `1px solid ${theme.color($bordered)}`};
       box-shadow: ${$shadowed && boxShadow};
       background-color: ${$background ? theme.color($background) : backgroundColor};
       ${baseCss}

packages/components/src/Card/Card.tsx

@@ -36,7 +36,7 @@ const Card = forwardRef<HTMLDivElement, CardProps>(
       elementType,
       isDisabled,
       rounded = 'xl',
-      padding = 'md',
+      padding = 'xl',
       shadowed = false,
       bordered = true,
       ...props

packages/components/src/Flex/Flex.stories.tsx

@@ -6,9 +6,9 @@ export default {
   title: 'Layout/Flex',
   component: Flex,
 
-  args: {
-    gap: 'md'
-  },
+  // args: {
+  //   gap: 'md'
+  // },
   render: (args: FlexProps) => (
     <Flex {...args}>
       <div style={{ height: 60, width: 100, background: 'red' }} />

packages/components/src/Flex/Flex.style.tsx

@@ -1,30 +1,35 @@
-import type { AlignItems, AlignSelf, Direction, JustifyContent, Spacing, Wrap } from '@interlay/theme';
+import type { AlignItems, AlignSelf, Direction, JustifyContent, ResponsiveProp, Spacing, Wrap } from '@interlay/theme';
 
 import { styled } from 'styled-components';
-import { StyledMarginProps } from '@interlay/hooks';
+import { StyledMarginProps, StyledPaddingProps } from '@interlay/hooks';
 
+import { paddingCSS } from '../utils/padding';
 import { marginCSS } from '../utils/margin';
+import { getResponsiveCSS, getSpacingResponsiveCSS } from '../utils/responsive';
 
 type StyledFlexProps = {
-  $gap?: Spacing;
-  $justifyContent?: JustifyContent;
-  $alignItems?: AlignItems;
-  $direction?: Direction;
-  $flex?: string | number;
-  $wrap?: Wrap;
-  $alignSelf?: AlignSelf;
-} & StyledMarginProps;
+  $gap?: ResponsiveProp<Spacing>;
+  $justifyContent?: ResponsiveProp<JustifyContent>;
+  $alignItems?: ResponsiveProp<AlignItems>;
+  $direction?: ResponsiveProp<Direction>;
+  $flex?: ResponsiveProp<string | number>;
+  $wrap?: ResponsiveProp<Wrap>;
+  $alignSelf?: ResponsiveProp<AlignSelf>;
+} & StyledMarginProps &
+  StyledPaddingProps;
 
 const StyledFlex = styled.div<StyledFlexProps>`
   display: flex;
-  flex-direction: ${(props) => props.$direction};
-  justify-content: ${(props) => props.$justifyContent};
-  align-items: ${(props) => props.$alignItems};
-  gap: ${({ theme, $gap }) => $gap && theme.spacing($gap)};
-  flex: ${(props) => props.$flex};
-  flex-wrap: ${(props) => (typeof props.$wrap === 'boolean' ? 'wrap' : props.$wrap)};
   align-self: ${(props) => props.$alignSelf};
   ${(props) => marginCSS(props)};
+  ${(props) => paddingCSS(props)};
+  ${({ $gap, theme }) => getSpacingResponsiveCSS(theme, 'gap', $gap)}
+  ${({ $justifyContent, theme }) => getResponsiveCSS(theme, 'justify-content', $justifyContent)}
+  ${({ $alignItems, theme }) => getResponsiveCSS(theme, 'align-items', $alignItems)}
+  ${({ $flex, theme }) => getResponsiveCSS(theme, 'flex', $flex)}
+  ${({ $wrap, theme }) =>
+    getResponsiveCSS(theme, 'flex-wrap', $wrap, (prop) => (typeof prop === 'boolean' ? 'wrap' : prop))}
+    ${({ $alignSelf, theme }) => getResponsiveCSS(theme, 'align-self', $alignSelf)}
 `;
 
 export { StyledFlex };

packages/components/src/Flex/Flex.tsx

@@ -2,25 +2,35 @@ import type { HTMLAttributes } from 'react';
 
 import { forwardRef } from 'react';
 import { useStyleProps } from '@interlay/hooks';
-import { AlignItems, AlignSelf, Direction, JustifyContent, MarginProps, Spacing, Wrap } from '@interlay/theme';
+import {
+  AlignItems,
+  AlignSelf,
+  Direction,
+  JustifyContent,
+  MarginProps,
+  PaddingProps,
+  ResponsiveProp,
+  Spacing,
+  Wrap
+} from '@interlay/theme';
 
 import { ElementTypeProp } from '../utils/types';
 
 import { StyledFlex } from './Flex.style';
 
 type Props = {
-  gap?: Spacing;
-  justifyContent?: JustifyContent;
-  alignItems?: AlignItems;
-  direction?: Direction;
-  flex?: string | number;
-  wrap?: Wrap | boolean;
-  alignSelf?: AlignSelf;
+  gap?: ResponsiveProp<Spacing>;
+  justifyContent?: ResponsiveProp<JustifyContent>;
+  alignItems?: ResponsiveProp<AlignItems>;
+  direction?: ResponsiveProp<Direction>;
+  flex?: ResponsiveProp<string | number>;
+  wrap?: ResponsiveProp<Wrap | boolean>;
+  alignSelf?: ResponsiveProp<AlignSelf>;
 };
 
 type NativeAttrs = Omit<HTMLAttributes<unknown>, keyof Props>;
 
-type FlexProps = Props & NativeAttrs & ElementTypeProp & MarginProps;
+type FlexProps = Props & NativeAttrs & ElementTypeProp & MarginProps & PaddingProps;
 
 const Flex = forwardRef<HTMLElement, FlexProps>(
   (

packages/components/src/Text/Dl/Dt.tsx

@@ -7,7 +7,9 @@ import { mapTextProps } from '../utils';
 type DtProps = TextProps<HTMLElement>;
 
 const Dt = forwardRef<HTMLElement, DtProps>(
-  ({ color = 'light', ...props }, ref): JSX.Element => <Text ref={ref} as='dt' {...mapTextProps({ color, ...props })} />
+  ({ color = 'grey-200', ...props }, ref): JSX.Element => (
+    <Text ref={ref} as='dt' {...mapTextProps({ color, ...props })} />
+  )
 );
 
 Dt.displayName = 'Dt';

packages/components/src/Text/style.tsx

@@ -3,19 +3,22 @@ import styled, { css } from 'styled-components';
 
 type StyledTextProps = {
   $color: Color | 'inherit';
-  $size: Typography;
-  $weight: FontWeight;
+  $size: Typography | 'inherit';
+  $weight: FontWeight | 'inherit';
   $align?: NormalAlignments;
   $rows?: number;
   $noWrap?: boolean;
+  $fontFamily?: string;
 };
 
 const Text = styled.p<StyledTextProps>`
-  ${({ theme, $size }) => theme.typography($size)}
-  color: ${({ theme, $color }) => ($color === 'inherit' ? 'inherit' : theme.color($color))};
-  font-weight: ${({ theme, $weight }) => theme.fontWeight($weight)};
+  ${({ theme, $size }) =>
+    $size === 'inherit' ? { fontSize: 'inherit', lineHeight: 'inherit' } : theme.typography($size)}
+  color: ${({ theme, $color }) => ($color === 'inherit' ? $color : theme.color($color))};
+  font-weight: ${({ theme, $weight }) => ($weight === 'inherit' ? $weight : theme.fontWeight($weight))};
   text-align: ${({ $align }) => $align};
   white-space: ${({ $noWrap }) => $noWrap && 'nowrap'};
+  font-family: ${({ $fontFamily }) => $fontFamily};
 
   ${({ $rows }) =>
     $rows &&

packages/components/src/Text/types.ts

@@ -10,6 +10,7 @@ type Props = {
   weight?: FontWeight;
   rows?: number;
   noWrap?: boolean;
+  fontFamily?: string;
 };
 
 type NativeAttrs<T = unknown> = Omit<HTMLAttributes<T>, keyof Props>;

packages/components/src/Text/utils.ts

@@ -8,15 +8,17 @@ const mapTextProps = <T extends TextProps = TextProps>({
   align,
   rows,
   noWrap,
+  fontFamily,
   ...props
-}: T): Omit<T, 'color' | 'size' | 'align' | 'weight' | 'rows' | 'noWrap'> & StyledTextProps => ({
+}: T): Omit<T, 'color' | 'size' | 'align' | 'weight' | 'rows' | 'noWrap' | 'fontFamily'> & StyledTextProps => ({
   ...props,
   $color: color,
   $size: size,
   $weight: weight,
   $align: align,
   $rows: rows,
-  $noWrap: noWrap
+  $noWrap: noWrap,
+  $fontFamily: fontFamily
 });
 
 export { mapTextProps };

packages/components/src/utils/margin.ts

@@ -1,17 +1,19 @@
 import { css } from 'styled-components';
 
+import { getSpacingResponsiveCSS } from './responsive';
+
 const marginCSS = ({ theme, ...props }: any) => {
   const marginTop = props.$marginTop || props.$marginY;
   const marginBottom = props.$marginBottom || props.$marginY;
   const marginLeft = props.$marginLeft || props.$marginX;
   const marginRight = props.$marginRight || props.$marginX;
 
   return css`
-    margin: ${props.$margin && theme.spacing(props.$margin)};
-    margin-top: ${marginTop && theme.spacing(marginTop)};
-    margin-bottom: ${marginBottom && theme.spacing(marginBottom)};
-    margin-left: ${marginLeft && theme.spacing(marginLeft)};
-    margin-right: ${marginRight && theme.spacing(marginRight)};
+    ${getSpacingResponsiveCSS(theme, 'margin', props.$margin)}
+    ${getSpacingResponsiveCSS(theme, 'margin-top', marginTop)}
+  ${getSpacingResponsiveCSS(theme, 'margin-bottom', marginBottom)}
+  ${getSpacingResponsiveCSS(theme, 'margin-left', marginLeft)}
+  ${getSpacingResponsiveCSS(theme, 'margin-right', marginRight)}
   `;
 };
 

packages/components/src/utils/padding.ts

@@ -0,0 +1,20 @@
+import { css } from 'styled-components';
+
+import { getSpacingResponsiveCSS } from './responsive';
+
+const paddingCSS = ({ theme, ...props }: any) => {
+  const paddingTop = props.$paddingTop || props.$paddingY;
+  const paddingBottom = props.$paddingBottom || props.$paddingY;
+  const paddingLeft = props.$paddingLeft || props.$paddingX;
+  const paddingRight = props.$paddingRight || props.$paddingX;
+
+  return css`
+    ${getSpacingResponsiveCSS(theme, 'padding', props.$padding)}
+    ${getSpacingResponsiveCSS(theme, 'padding-top', paddingTop)}
+  ${getSpacingResponsiveCSS(theme, 'padding-bottom', paddingBottom)}
+  ${getSpacingResponsiveCSS(theme, 'padding-left', paddingLeft)}
+  ${getSpacingResponsiveCSS(theme, 'padding-right', paddingRight)}
+  `;
+};
+
+export { paddingCSS };

packages/components/src/utils/responsive.ts

@@ -1,25 +1,31 @@
-import { theme, BreakPoints, ResponsiveProp } from '@interlay/theme';
+import { ResponsiveProp, Spacing, Theme } from '@interlay/theme';
+import { css } from 'styled-components';
 
-const getResponsiveCSS = <T extends number | string>(key: string, prop?: ResponsiveProp<T>): string | undefined => {
-  if (!prop) return undefined;
+const getSpacingResponsiveCSS = (theme: Theme, attribute: string, prop?: ResponsiveProp<Spacing>) =>
+  typeof prop === 'object'
+    ? css`
+        ${prop.xs && theme.breakpoints.media.xs`${attribute}: ${theme.spacing(prop.xs)};`}
+        ${prop.s && theme.breakpoints.media.s`${attribute}: ${theme.spacing(prop.s)};`}
+    ${prop.md && theme.breakpoints.media.md`${attribute}: ${theme.spacing(prop.md)};`}
+    ${prop.lg && theme.breakpoints.media.lg`${attribute}: ${theme.spacing(prop.lg)};`}
+    ${prop.xl && theme.breakpoints.media.xl`${attribute}: ${theme.spacing(prop.xl)};`}
+      `
+    : prop && `${attribute}:${theme.spacing(prop)};`;
 
-  if (typeof prop === 'object') {
-    let finalQuery = '';
+const getResponsiveCSS = (
+  theme: Theme,
+  attribute: string,
+  prop?: ResponsiveProp<string | number | boolean>,
+  condition?: (prop: string | number | boolean) => string | number
+) =>
+  typeof prop === 'object'
+    ? css`
+        ${prop.xs && theme.breakpoints.media.xs`${attribute}: ${condition ? condition(prop.xs) : prop.xs};`}
+        ${prop.s && theme.breakpoints.media.s`${attribute}: ${condition ? condition(prop.s) : prop.s};`}
+    ${prop.md && theme.breakpoints.media.md`${attribute}: ${condition ? condition(prop.md) : prop.md};`}
+    ${prop.lg && theme.breakpoints.media.lg`${attribute}: ${condition ? condition(prop.lg) : prop.lg};`}
+    ${prop.xl && theme.breakpoints.media.xl`${attribute}: ${condition ? condition(prop.xl) : prop.xl};`}
+      `
+    : prop && `${attribute}:${prop};`;
 
-    for (const breakpoint of Object.keys(prop)) {
-      const query = `
-        @media (min-width: ${theme.breakpoints.values[breakpoint as BreakPoints]}px){
-          ${key}: ${prop[breakpoint as BreakPoints]};
-        }
-      `;
-
-      finalQuery = finalQuery.concat(query);
-    }
-
-    return finalQuery;
-  }
-
-  return `${key}: ${prop};`;
-};
-
-export { getResponsiveCSS };
+export { getResponsiveCSS, getSpacingResponsiveCSS };

packages/core/theme/src/core/breakpoints.ts

@@ -1,10 +1,13 @@
-type BreakPoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+// @ts-nocheck
+import { css } from 'styled-components';
 
-type ResponsiveProp<T extends number | string> = T | Partial<{ [K in BreakPoints]: T }>;
+type BreakPoints = 'xs' | 's' | 'md' | 'lg' | 'xl';
+
+type ResponsiveProp<T extends number | string | boolean> = T | Partial<{ [K in BreakPoints]: T }>;
 
 const values: Record<BreakPoints, number> = {
   xs: 0, // phone
-  sm: 600, // tablet
+  s: 600, // tablet
   md: 900, // small laptop
   lg: 1200, // desktop
   xl: 1536 // large screen
@@ -13,7 +16,34 @@ const values: Record<BreakPoints, number> = {
 const breakpoints = {
   values,
   up: (key: BreakPoints): string => `(min-width:${values[key]}px)`,
-  down: (key: BreakPoints): string => `(max-width:${values[key]}px)`
+  down: (key: BreakPoints): string => `(max-width:${values[key]}px)`,
+  media: {
+    xs: (...args) => css`
+      @media (min-width: ${values.xs}px) {
+        ${css(...args)};
+      }
+    `,
+    s: (...args) => css`
+      @media (min-width: ${values.s}px) {
+        ${css(...args)};
+      }
+    `,
+    md: (...args) => css`
+      @media (min-width: ${values.md}px) {
+        ${css(...args)};
+      }
+    `,
+    lg: (...args) => css`
+      @media (min-width: ${values.lg}px) {
+        ${css(...args)};
+      }
+    `,
+    xl: (...args) => css`
+      @media (min-width: ${values.xl}px) {
+        ${css(...args)};
+      }
+    `
+  }
 };
 
 export { breakpoints };

packages/core/theme/src/core/index.ts

@@ -1,3 +1,4 @@
+import { ResponsiveProp } from './breakpoints';
 import { Spacing } from './space';
 
 export type Status = 'error' | 'warning' | 'success';
@@ -27,13 +28,23 @@ export type AlignSelf =
 export type Placement = 'top' | 'right' | 'bottom' | 'left';
 
 export interface MarginProps {
-  margin?: Spacing;
-  marginTop?: Spacing;
-  marginBottom?: Spacing;
-  marginLeft?: Spacing;
-  marginRight?: Spacing;
-  marginX?: Spacing;
-  marginY?: Spacing;
+  margin?: ResponsiveProp<Spacing>;
+  marginTop?: ResponsiveProp<Spacing>;
+  marginBottom?: ResponsiveProp<Spacing>;
+  marginLeft?: ResponsiveProp<Spacing>;
+  marginRight?: ResponsiveProp<Spacing>;
+  marginX?: ResponsiveProp<Spacing>;
+  marginY?: ResponsiveProp<Spacing>;
+}
+
+export interface PaddingProps {
+  padding?: ResponsiveProp<Spacing>;
+  paddingTop?: ResponsiveProp<Spacing>;
+  paddingBottom?: ResponsiveProp<Spacing>;
+  paddingLeft?: ResponsiveProp<Spacing>;
+  paddingRight?: ResponsiveProp<Spacing>;
+  paddingX?: ResponsiveProp<Spacing>;
+  paddingY?: ResponsiveProp<Spacing>;
 }
 
 export type Orientation = 'horizontal' | 'vertical';

packages/core/theme/src/define.ts

@@ -42,7 +42,7 @@ const baseTheme = {
   typography,
   transition,
   maxWidth,
-  ...breakpoints
+  breakpoints
 };
 
 type ThemeParams = {