feat: Use own styled system "lib" again

src/Box/Box.tsx

@@ -1,18 +1,18 @@
 import styled from '@emotion/styled';
-import { layout } from '@styled-system/layout';
 import { flexbox } from '@styled-system/flexbox';
 import { position } from '@styled-system/position';
-import type { LayoutProps, FlexboxProps, PositionProps } from 'styled-system';
+import { layout, type FlexboxProps, type PositionProps } from 'styled-system';
 import { system } from '@styled-system/core';
 
-import { color, ColorProps } from './color';
+import { color, ColorProps } from './interpolations/color';
 import { CssFunctionReturn } from '../types';
 import { baseStyle } from '../shared/baseStyle';
 import { getByPath } from '../utils/getByPath';
 import { themeVars } from '../theme/themeVars';
 import { interpolateCssProp } from '../utils/interpolateCssProp';
-import { margin, MarginProps, PaddingProps, padding } from './spacingInterpolation';
+import { margin, MarginProps, PaddingProps, padding } from './interpolations/spacing';
 import { ifProp } from '../styleHelpers/styleProp';
+import { LayoutProps } from './interpolations/layout';
 
 export interface BoxCssProps {
   css?: CssFunctionReturn;

src/Box/interpolations/color.spec.ts

@@ -0,0 +1,49 @@
+import { defaultTheme } from '../../theme';
+import { PabloThemeableProps } from '../../theme/types';
+import { color } from './color';
+
+let props: PabloThemeableProps = {
+  theme: defaultTheme,
+} as any;
+
+beforeEach(() => {
+  props = {
+    theme: defaultTheme,
+  } as any;
+});
+
+test('bg color', () => {
+  expect(color({ ...props, bgColor: 'brand.main' })).toEqual({
+    backgroundColor: 'var(--pbl-theme-colors-brand-main)',
+  });
+});
+
+test('text color', () => {
+  expect(color({ ...props, textColor: 'brand.main' })).toEqual({
+    color: 'var(--pbl-theme-colors-brand-main)',
+  });
+});
+
+test('opacity', () => {
+  expect(color({ ...props, opacity: 0.5 })).toEqual({
+    opacity: 0.5,
+  });
+  expect(color({ ...props, opacity: '0.4' })).toEqual({
+    opacity: '0.4',
+  });
+});
+
+test('styled interpolation functions', () => {
+  expect(color.bgColor('brand.main')(props)).toEqual({
+    backgroundColor: 'var(--pbl-theme-colors-brand-main)',
+  });
+  expect(color.textColor('brand.main')(props)).toEqual({
+    color: 'var(--pbl-theme-colors-brand-main)',
+  });
+  expect(color.opacity(0.5)(props)).toEqual({
+    opacity: 0.5,
+  });
+  expect(color.opacity('0.4')(props)).toEqual({
+    opacity: '0.4',
+  });
+});

src/Box/interpolations/color.ts

@@ -0,0 +1,31 @@
+// Only types
+
+import type { TextColorProps, BackgroundColorProps } from 'styled-system';
+import { themeVars } from '../../theme/themeVars';
+import { getByPath } from '../../utils/getByPath';
+import { InterpolationTransformFn, system } from '../system';
+
+export interface ColorProps {
+  bgColor?: BackgroundColorProps['backgroundColor'];
+  textColor?: TextColorProps['color'];
+  opacity?: number;
+}
+
+const colorTransform: InterpolationTransformFn<string> = (value) =>
+  getByPath(themeVars.colors, value) || value;
+
+export const color = system([
+  {
+    properties: ['color'],
+    fromProps: ['textColor'],
+    transform: colorTransform,
+  },
+  {
+    properties: ['backgroundColor'],
+    fromProps: ['bgColor'],
+    transform: colorTransform,
+  },
+  {
+    properties: ['opacity'],
+  },
+]);

src/Box/interpolations/layout.spec.ts

@@ -0,0 +1,115 @@
+import { defaultTheme } from '../../theme';
+import { PabloThemeableProps } from '../../theme/types';
+import { layout } from './layout';
+
+let props: PabloThemeableProps = {
+  theme: defaultTheme,
+} as any;
+
+beforeEach(() => {
+  props = {
+    theme: defaultTheme,
+  } as any;
+});
+
+test('width', () => {
+  expect(layout({ ...props, width: 100 })).toEqual({
+    width: '100px',
+  });
+  expect(layout({ ...props, width: '100%' })).toEqual({
+    width: '100%',
+  });
+  expect(layout({ ...props, width: 0.9 })).toEqual({
+    width: '90%',
+  });
+});
+
+test('height', () => {
+  expect(layout({ ...props, height: 100 })).toEqual({
+    height: '100px',
+  });
+  expect(layout({ ...props, height: '100%' })).toEqual({
+    height: '100%',
+  });
+});
+
+test('minWidth', () => {
+  expect(layout({ ...props, minWidth: 100 })).toEqual({
+    minWidth: '100px',
+  });
+  expect(layout({ ...props, minWidth: '100%' })).toEqual({
+    minWidth: '100%',
+  });
+});
+
+test('minHeight', () => {
+  expect(layout({ ...props, minHeight: 100 })).toEqual({
+    minHeight: '100px',
+  });
+  expect(layout({ ...props, minHeight: '100%' })).toEqual({
+    minHeight: '100%',
+  });
+});
+
+test('maxWidth', () => {
+  expect(layout({ ...props, maxWidth: 100 })).toEqual({
+    maxWidth: '100px',
+  });
+  expect(layout({ ...props, maxWidth: '100%' })).toEqual({
+    maxWidth: '100%',
+  });
+});
+
+test('maxHeight', () => {
+  expect(layout({ ...props, maxHeight: 100 })).toEqual({
+    maxHeight: '100px',
+  });
+  expect(layout({ ...props, maxHeight: '100%' })).toEqual({
+    maxHeight: '100%',
+  });
+});
+
+test('squareSize', () => {
+  expect(layout({ ...props, squareSize: 100 })).toEqual({
+    width: '100px',
+    height: '100px',
+  });
+  expect(layout({ ...props, squareSize: '100%' })).toEqual({
+    width: '100%',
+    height: '100%',
+  });
+});
+
+test('display', () => {
+  expect(layout({ ...props, display: 'flex' })).toEqual({
+    display: 'flex',
+  });
+});
+
+test('styled interpolation functions', () => {
+  expect(layout.width(100)(props)).toEqual({
+    width: '100px',
+  });
+  expect(layout.height(100)(props)).toEqual({
+    height: '100px',
+  });
+  expect(layout.minWidth(100)(props)).toEqual({
+    minWidth: '100px',
+  });
+  expect(layout.minHeight(100)(props)).toEqual({
+    minHeight: '100px',
+  });
+  expect(layout.maxWidth(100)(props)).toEqual({
+    maxWidth: '100px',
+  });
+  expect(layout.maxHeight(100)(props)).toEqual({
+    maxHeight: '100px',
+  });
+  expect(layout.squareSize(100)(props)).toEqual({
+    width: '100px',
+    height: '100px',
+  });
+  expect(layout.display('flex')(props)).toEqual({
+    display: 'flex',
+  });
+});

src/Box/interpolations/layout.ts

@@ -0,0 +1,55 @@
+import type * as CSS from 'csstype';
+import { pixelTransform, ResponsiveValue, system } from '../system';
+import { PabloTheme } from '../../theme/types';
+import { isNumber } from '../../utils/isNumber';
+
+interface LayoutProps {
+  width?: ResponsiveValue<number | string>;
+  height?: ResponsiveValue<number | string>;
+  minWidth?: ResponsiveValue<number | string>;
+  minHeight?: ResponsiveValue<number | string>;
+  maxWidth?: ResponsiveValue<number | string>;
+  maxHeight?: ResponsiveValue<number | string>;
+  squareSize?: ResponsiveValue<number | string>;
+  display?: ResponsiveValue<CSS.Property.Display>;
+}
+
+const widthTransform = (value: number | string, theme: PabloTheme) =>
+  isNumber(value) && value <= 1 ? `${value * 100}%` : pixelTransform(value, theme);
+
+const layout = system([
+  {
+    properties: ['width'],
+    transform: widthTransform,
+  },
+  {
+    properties: ['height'],
+    transform: pixelTransform,
+  },
+  {
+    properties: ['minWidth'],
+    transform: pixelTransform,
+  },
+  {
+    properties: ['minHeight'],
+    transform: pixelTransform,
+  },
+  {
+    properties: ['maxWidth'],
+    transform: pixelTransform,
+  },
+  {
+    properties: ['maxHeight'],
+    transform: pixelTransform,
+  },
+  {
+    properties: ['width', 'height'],
+    fromProps: ['squareSize'],
+    transform: pixelTransform,
+  },
+  {
+    properties: ['display'],
+  },
+]);
+
+export { layout, widthTransform, type LayoutProps };