b2b exposes preset

themes/theme-core/package.json

@@ -13,7 +13,9 @@
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "exports": {
-    "./index.css": "./dist/index.css"
+    "./index.css": "./dist/index.css",
+    "./preset": "./dist/preset.mjs",
+    "./preset/cjs": "./dist/preset.js"
   },
   "sideEffects": false,
   "files": [
@@ -25,17 +27,17 @@
     "directory": "packages/theme-core"
   },
   "devDependencies": {
-    "@marigold/theme-preset": "workspace:*",
     "@marigold/tsconfig": "workspace:*",
     "autoprefixer": "10.4.14",
     "cssnano": "6.0.1",
     "postcss": "8.4.26",
     "tailwindcss": "3.3.3",
     "tsup": "6.7.0"
   },
-  "peerDependencies": {
+  "dependencies": {
     "@marigold/components": "workspace:*",
-    "@marigold/system": "workspace:*"
+    "@marigold/system": "workspace:*",
+    "@marigold/theme-preset": "workspace:*"
   },
   "scripts": {
     "build": "NODE_ENV=production tsup",

themes/theme-core/src/preset.ts

@@ -1,26 +1,29 @@
 import { createPreset } from '@marigold/theme-preset';
 
-import { theme } from './theme';
+import { screens } from './screens';
+import { colors } from './tokens';
 
 export interface PresetConfig {
   name: string;
   preflight?: boolean;
 }
 
-export const preset = createPreset('core', {
+export type Preset = ReturnType<typeof createPreset>;
+
+export const preset: Preset = createPreset('core', {
   corePlugins: {
     preflight: false,
   },
   theme: {
     extend: {
-      screens: theme.screens,
+      screens,
       fontFamily: {
         body: 'Arial, Helvetica, sans-serif',
       },
       fontSize: {
         body: '13px',
       },
-      colors: theme.colors,
+      colors,
       transitionTimingFunction: {
         'ease-out': 'ease-out',
       },

themes/theme-core/src/screens.ts

@@ -0,0 +1,7 @@
+export const screens = {
+  sm: '640px',
+  md: '768px',
+  lg: '1024px',
+  xl: '1280px',
+  '2xl': '1536px',
+};

themes/theme-core/src/theme.ts

@@ -1,19 +1,15 @@
 import { Theme } from '@marigold/system';
-import { colors } from './tokens';
-import * as components from './components';
 
 import { root } from './root';
+import { screens } from './screens';
+import { colors } from './tokens';
+
+import * as components from './components';
 
 export const theme: Theme = {
   name: 'core',
-  screens: {
-    sm: '640px',
-    md: '768px',
-    lg: '1024px',
-    xl: '1280px',
-    '2xl': '1536px',
-  },
+  screens,
   root,
-  colors: colors,
+  colors,
   components,
 };

themes/theme-core/tsup.config.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from 'tsup';
 
 export default defineConfig({
-  entry: ['src/index.ts', 'src/index.css'],
+  entry: ['src/index.ts', 'src/index.css', 'src/preset.ts'],
   format: ['esm', 'cjs'],
   tsconfig: './tsconfig.build.json',
   dts: true,