fix: augmentation of preset default and web sandbox react types

apps/web-sandbox/package.json

@@ -12,8 +12,6 @@
     "@testing-library/user-event": "^12.8.3",
     "@types/jest": "^26.0.22",
     "@types/node": "^12.20.10",
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.3",
     "react-scripts": "4.0.3",
     "typescript": "^4.2.4",
     "web-vitals": "^1.1.1"

apps/web-sandbox/src/App.tsx

@@ -43,6 +43,7 @@ function App() {
     codeStyle: {
       display: 'block',
       py: 's',
+      color: 'primary.dark',
     },
   });
 

apps/web-sandbox/src/index.tsx

@@ -23,7 +23,7 @@ loadFont({
       url: 'https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap',
     },
   ],
-  name: 'regular',
+  name: 'default',
   family: 'Roboto',
 });
 

apps/web-sandbox/src/theme.ts

@@ -6,13 +6,12 @@ export const components = {
   Button: {
     tag: 'button',
     style: {
-      transition: 'slow',
-      height: '2xl',
-      width: '2xl',
+      transition: 'fast',
+      size: '2xl',
       bg: 'primary',
       color: 'white',
       borderRadius: 'm',
-      border: 'primary',
+      border: 'strong',
       '&:hover': {
         bg: 'transparent',
         color: 'primary',
@@ -34,6 +33,7 @@ export const components = {
           '&:hover': {
             bg: 'transparent',
             color: 'primary',
+            borderColor: 'primary',
           },
         },
       },
@@ -64,19 +64,19 @@ export const components = {
     variants: {
       h1: {
         tag: 'h1',
-        style: { color: 'headTextColor' },
+        style: { color: 'headText' },
       },
       h2: {
         tag: 'h1',
-        style: { color: 'headTextColor' },
+        style: { color: 'headText' },
       },
       h3: {
         tag: 'h3',
-        style: { color: 'headTextColor' },
+        style: { color: 'headText' },
       },
       code: {
         tag: 'pre',
-        style: { color: 'textColor' },
+        style: { color: 'text' },
       },
     },
   },

package.json

@@ -47,6 +47,8 @@
     "@testing-library/react": "^11.2.6",
     "@testing-library/react-hooks": "^5.1.1",
     "@types/jest": "^26.0.21",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.2",
     "@types/react-test-renderer": "^17.0.1",
     "@types/styled-components": "^5.1.9",
     "@typescript-eslint/eslint-plugin": "^4.18.0",

packages/preset-default/src/base/colors.ts

@@ -54,9 +54,3 @@ export const lightColors = {
   headText: '#000000',
   invertedHeadText: '#ffffff',
 };
-
-type LocalColors = typeof lightColors & typeof darkColors;
-
-declare module '@morfeo/spec' {
-  export interface Colors extends LocalColors {}
-}

packages/preset-default/src/base/fontSizes.ts

@@ -10,9 +10,3 @@ export const fontSizes = {
   '4xl': '7rem',
   none: '0',
 };
-
-type LocalFontSizes = typeof fontSizes;
-
-declare module '@morfeo/spec' {
-  export interface FontSizes extends LocalFontSizes {}
-}

packages/preset-default/src/base/index.ts

@@ -1,6 +1,42 @@
-import { baseTheme } from './baseTheme';
+import { Theme } from '@morfeo/spec';
+import { borderStyles } from './borderStyles';
+import { borderWidths } from './borderWidths';
+import { borders } from './borders';
+import { breakpoints } from './breakpoints';
+import { fontSizes } from './fontSizes';
+import { fontWeights } from './fontWeights';
+import { gradients } from './gradients';
+import { letterSpacings } from './letterSpacings';
+import { lineHeights } from './lineHeights';
+import { opacities } from './opacities';
+import { radii } from './radii';
+import { shadows } from './shadows';
+import { sizes } from './sizes';
+import { spacings } from './spacings';
+import { transitions } from './transitions';
+import { zIndices } from './zIndices';
 import { darkColors, lightColors } from './colors';
 
+export const baseTheme: Omit<Theme, 'components' | 'fonts' | 'colors'> = {
+  borderStyles,
+  borderWidths,
+  borders,
+  breakpoints,
+  fontSizes,
+  fontWeights,
+  gradients,
+  letterSpacings,
+  lineHeights,
+  opacities,
+  radii,
+  shadows,
+  sizes,
+  spacings,
+  transitions,
+  zIndices,
+  mediaQueries: {},
+};
+
 export const darkTheme = {
   ...baseTheme,
   colors: darkColors,
@@ -10,3 +46,15 @@ export const lightTheme = {
   ...baseTheme,
   colors: lightColors,
 };
+
+type LocalColors = typeof lightColors & typeof darkColors;
+type LocalSizes = typeof sizes;
+type LocalFontSizes = typeof fontSizes;
+type LocalSpacings = typeof spacings;
+
+declare module '@morfeo/spec' {
+  export interface Sizes extends LocalSizes {}
+  export interface Colors extends LocalColors {}
+  export interface Spacings extends LocalSpacings {}
+  export interface FontSizes extends LocalFontSizes {}
+}

packages/preset-default/src/base/sizes.ts

@@ -20,10 +20,3 @@ export const sizes = {
   '100vw': '100vw',
   none: '0px',
 };
-
-type LocalSizes = typeof sizes;
-
-declare module '@morfeo/spec' {
-  export interface Sizes extends LocalSizes {}
-}
-

packages/preset-default/src/base/spacings.ts

@@ -12,9 +12,3 @@ export const spacings = {
   '4xl': '5rem',
   '5xl': '6rem',
 };
-
-type LocalSpacings = typeof spacings;
-
-declare module '@morfeo/spec' {
-  export interface Spacings extends LocalSpacings {}
-}