docs: use correct screen sizes in theme (#4288)

marigold-ui · Nov 7, 2024 · 29d6f73 · 29d6f73
1 parent f2bae7e
commit 29d6f73
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 10 deletions.
diff --git a/themes/theme-docs/src/index.ts b/themes/theme-docs/src/index.ts
@@ -1,17 +1,12 @@
 import type { Theme } from '@marigold/system';
 import * as components from './components';
 import { root } from './root';
+import { screens } from './screens';
 import { colors } from './tokens';
 
 export const theme: Theme = {
   name: 'docs',
-  screens: {
-    sm: '640px',
-    md: '768px',
-    lg: '1024px',
-    xl: '1280px',
-    '2xl': '1536px',
-  },
+  screens,
   root,
   colors,
   components,

diff --git a/themes/theme-docs/src/preset.ts b/themes/theme-docs/src/preset.ts
@@ -1,5 +1,6 @@
 import { fontFamily } from 'tailwindcss/defaultTheme';
 import { createPreset } from '@marigold/theme-preset';
+import { screens } from './screens';
 import { colors } from './tokens';
 
 export interface PresetConfig {
@@ -17,9 +18,7 @@ export const preset = createPreset({
     container: {
       center: true,
       padding: '2rem',
-      screens: {
-        '2xl': '1400px',
-      },
+      screens,
     },
     extend: {
       fontFamily: {

diff --git a/themes/theme-docs/src/screens.ts b/themes/theme-docs/src/screens.ts
@@ -0,0 +1,7 @@
+export const screens = {
+  sm: '640px',
+  md: '768px',
+  lg: '1024px',
+  xl: '1280px',
+  '2xl': '1400px',
+};