@modern-js/main-doc 2.32.0 → 2.32.2-alpha.1

package/docs/en/configure/app/source/design-system.mdx

@@ -1,1175 +0,0 @@
----
-sidebar_label: designSystem
----
-
-# source.designSystem
-
-- **Type:** `Object`
-- **Default:** See configuration details below.
-
-:::caution
-Tailwind CSS feature needs to be enabled first by running `pnpm run new`.
-
-:::
-
-<details>
-  <summary>DesignSystem Configuration Details</summary>
-
-```js
-const designSystem = {
-  screens: {
-    sm: '640px',
-    md: '768px',
-    lg: '1024px',
-    xl: '1280px',
-  },
-  colors: {
-    transparent: 'transparent',
-    current: 'currentColor',
-
-    black: '#000',
-    white: '#fff',
-
-    gray: {
-      100: '#f7fafc',
-      200: '#edf2f7',
-      300: '#e2e8f0',
-      400: '#cbd5e0',
-      500: '#a0aec0',
-      600: '#718096',
-      700: '#4a5568',
-      800: '#2d3748',
-      900: '#1a202c',
-    },
-    red: {
-      100: '#fff5f5',
-      200: '#fed7d7',
-      300: '#feb2b2',
-      400: '#fc8181',
-      500: '#f56565',
-      600: '#e53e3e',
-      700: '#c53030',
-      800: '#9b2c2c',
-      900: '#742a2a',
-    },
-    orange: {
-      100: '#fffaf0',
-      200: '#feebc8',
-      300: '#fbd38d',
-      400: '#f6ad55',
-      500: '#ed8936',
-      600: '#dd6b20',
-      700: '#c05621',
-      800: '#9c4221',
-      900: '#7b341e',
-    },
-    yellow: {
-      100: '#fffff0',
-      200: '#fefcbf',
-      300: '#faf089',
-      400: '#f6e05e',
-      500: '#ecc94b',
-      600: '#d69e2e',
-      700: '#b7791f',
-      800: '#975a16',
-      900: '#744210',
-    },
-    green: {
-      100: '#f0fff4',
-      200: '#c6f6d5',
-      300: '#9ae6b4',
-      400: '#68d391',
-      500: '#48bb78',
-      600: '#38a169',
-      700: '#2f855a',
-      800: '#276749',
-      900: '#22543d',
-    },
-    teal: {
-      100: '#e6fffa',
-      200: '#b2f5ea',
-      300: '#81e6d9',
-      400: '#4fd1c5',
-      500: '#38b2ac',
-      600: '#319795',
-      700: '#2c7a7b',
-      800: '#285e61',
-      900: '#234e52',
-    },
-    blue: {
-      100: '#ebf8ff',
-      200: '#bee3f8',
-      300: '#90cdf4',
-      400: '#63b3ed',
-      500: '#4299e1',
-      600: '#3182ce',
-      700: '#2b6cb0',
-      800: '#2c5282',
-      900: '#2a4365',
-    },
-    indigo: {
-      100: '#ebf4ff',
-      200: '#c3dafe',
-      300: '#a3bffa',
-      400: '#7f9cf5',
-      500: '#667eea',
-      600: '#5a67d8',
-      700: '#4c51bf',
-      800: '#434190',
-      900: '#3c366b',
-    },
-    purple: {
-      100: '#faf5ff',
-      200: '#e9d8fd',
-      300: '#d6bcfa',
-      400: '#b794f4',
-      500: '#9f7aea',
-      600: '#805ad5',
-      700: '#6b46c1',
-      800: '#553c9a',
-      900: '#44337a',
-    },
-    pink: {
-      100: '#fff5f7',
-      200: '#fed7e2',
-      300: '#fbb6ce',
-      400: '#f687b3',
-      500: '#ed64a6',
-      600: '#d53f8c',
-      700: '#b83280',
-      800: '#97266d',
-      900: '#702459',
-    },
-  },
-  spacing: {
-    px: '1px',
-    0: '0',
-    1: '0.25rem',
-    2: '0.5rem',
-    3: '0.75rem',
-    4: '1rem',
-    5: '1.25rem',
-    6: '1.5rem',
-    8: '2rem',
-    10: '2.5rem',
-    12: '3rem',
-    16: '4rem',
-    20: '5rem',
-    24: '6rem',
-    32: '8rem',
-    40: '10rem',
-    48: '12rem',
-    56: '14rem',
-    64: '16rem',
-  },
-  backgroundColor: theme => theme('colors'),
-  backgroundOpacity: theme => theme('opacity'),
-  backgroundPosition: {
-    bottom: 'bottom',
-    center: 'center',
-    left: 'left',
-    'left-bottom': 'left bottom',
-    'left-top': 'left top',
-    right: 'right',
-    'right-bottom': 'right bottom',
-    'right-top': 'right top',
-    top: 'top',
-  },
-  backgroundSize: {
-    auto: 'auto',
-    cover: 'cover',
-    contain: 'contain',
-  },
-  borderColor: theme => ({
-    ...theme('colors'),
-    default: theme('colors.gray.300', 'currentColor'),
-  }),
-  borderOpacity: theme => theme('opacity'),
-  borderRadius: {
-    none: '0',
-    sm: '0.125rem',
-    default: '0.25rem',
-    md: '0.375rem',
-    lg: '0.5rem',
-    full: '9999px',
-  },
-  borderWidth: {
-    default: '1px',
-    0: '0',
-    2: '2px',
-    4: '4px',
-    8: '8px',
-  },
-  boxShadow: {
-    xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
-    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-    default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
-    md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
-    lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
-    xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
-    '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
-    inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
-    outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
-    none: 'none',
-  },
-  container: {},
-  cursor: {
-    auto: 'auto',
-    default: 'default',
-    pointer: 'pointer',
-    wait: 'wait',
-    text: 'text',
-    move: 'move',
-    'not-allowed': 'not-allowed',
-  },
-  divideColor: theme => theme('borderColor'),
-  divideOpacity: theme => theme('borderOpacity'),
-  divideWidth: theme => theme('borderWidth'),
-  fill: {
-    current: 'currentColor',
-  },
-  flex: {
-    1: '1 1 0%',
-    auto: '1 1 auto',
-    initial: '0 1 auto',
-    none: 'none',
-  },
-  flexGrow: {
-    0: '0',
-    default: '1',
-  },
-  flexShrink: {
-    0: '0',
-    default: '1',
-  },
-  fontFamily: {
-    sans: [
-      'system-ui',
-      '-apple-system',
-      'BlinkMacSystemFont',
-      '"Segoe UI"',
-      'Roboto',
-      '"Helvetica Neue"',
-      'Arial',
-      '"Noto Sans"',
-      'sans-serif',
-      '"Apple Color Emoji"',
-      '"Segoe UI Emoji"',
-      '"Segoe UI Symbol"',
-      '"Noto Color Emoji"',
-    ],
-    serif: ['Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
-    mono: [
-      'Menlo',
-      'Monaco',
-      'Consolas',
-      '"Liberation Mono"',
-      '"Courier New"',
-      'monospace',
-    ],
-  },
-  fontSize: {
-    xs: '0.75rem',
-    sm: '0.875rem',
-    base: '1rem',
-    lg: '1.125rem',
-    xl: '1.25rem',
-    '2xl': '1.5rem',
-    '3xl': '1.875rem',
-    '4xl': '2.25rem',
-    '5xl': '3rem',
-    '6xl': '4rem',
-  },
-  fontWeight: {
-    hairline: '100',
-    thin: '200',
-    light: '300',
-    normal: '400',
-    medium: '500',
-    semibold: '600',
-    bold: '700',
-    extrabold: '800',
-    black: '900',
-  },
-  height: theme => ({
-    auto: 'auto',
-    ...theme('spacing'),
-    full: '100%',
-    screen: '100vh',
-  }),
-  inset: {
-    0: '0',
-    auto: 'auto',
-  },
-  letterSpacing: {
-    tighter: '-0.05em',
-    tight: '-0.025em',
-    normal: '0',
-    wide: '0.025em',
-    wider: '0.05em',
-    widest: '0.1em',
-  },
-  lineHeight: {
-    none: '1',
-    tight: '1.25',
-    snug: '1.375',
-    normal: '1.5',
-    relaxed: '1.625',
-    loose: '2',
-    3: '.75rem',
-    4: '1rem',
-    5: '1.25rem',
-    6: '1.5rem',
-    7: '1.75rem',
-    8: '2rem',
-    9: '2.25rem',
-    10: '2.5rem',
-  },
-  listStyleType: {
-    none: 'none',
-    disc: 'disc',
-    decimal: 'decimal',
-  },
-  margin: (theme, { negative }) => ({
-    auto: 'auto',
-    ...theme('spacing'),
-    ...negative(theme('spacing')),
-  }),
-  maxHeight: {
-    full: '100%',
-    screen: '100vh',
-  },
-  maxWidth: (theme, { breakpoints }) => ({
-    none: 'none',
-    xs: '20rem',
-    sm: '24rem',
-    md: '28rem',
-    lg: '32rem',
-    xl: '36rem',
-    '2xl': '42rem',
-    '3xl': '48rem',
-    '4xl': '56rem',
-    '5xl': '64rem',
-    '6xl': '72rem',
-    full: '100%',
-    ...breakpoints(theme('screens')),
-  }),
-  minHeight: {
-    0: '0',
-    full: '100%',
-    screen: '100vh',
-  },
-  minWidth: {
-    0: '0',
-    full: '100%',
-  },
-  objectPosition: {
-    bottom: 'bottom',
-    center: 'center',
-    left: 'left',
-    'left-bottom': 'left bottom',
-    'left-top': 'left top',
-    right: 'right',
-    'right-bottom': 'right bottom',
-    'right-top': 'right top',
-    top: 'top',
-  },
-  opacity: {
-    0: '0',
-    25: '0.25',
-    50: '0.5',
-    75: '0.75',
-    100: '1',
-  },
-  order: {
-    first: '-9999',
-    last: '9999',
-    none: '0',
-    1: '1',
-    2: '2',
-    3: '3',
-    4: '4',
-    5: '5',
-    6: '6',
-    7: '7',
-    8: '8',
-    9: '9',
-    10: '10',
-    11: '11',
-    12: '12',
-  },
-  padding: theme => theme('spacing'),
-  placeholderColor: theme => theme('colors'),
-  placeholderOpacity: theme => theme('opacity'),
-  space: (theme, { negative }) => ({
-    ...theme('spacing'),
-    ...negative(theme('spacing')),
-  }),
-  stroke: {
-    current: 'currentColor',
-  },
-  strokeWidth: {
-    0: '0',
-    1: '1',
-    2: '2',
-  },
-  textColor: theme => theme('colors'),
-  textOpacity: theme => theme('opacity'),
-  width: theme => ({
-    auto: 'auto',
-    ...theme('spacing'),
-    '1/2': '50%',
-    '1/3': '33.333333%',
-    '2/3': '66.666667%',
-    '1/4': '25%',
-    '2/4': '50%',
-    '3/4': '75%',
-    '1/5': '20%',
-    '2/5': '40%',
-    '3/5': '60%',
-    '4/5': '80%',
-    '1/6': '16.666667%',
-    '2/6': '33.333333%',
-    '3/6': '50%',
-    '4/6': '66.666667%',
-    '5/6': '83.333333%',
-    '1/12': '8.333333%',
-    '2/12': '16.666667%',
-    '3/12': '25%',
-    '4/12': '33.333333%',
-    '5/12': '41.666667%',
-    '6/12': '50%',
-    '7/12': '58.333333%',
-    '8/12': '66.666667%',
-    '9/12': '75%',
-    '10/12': '83.333333%',
-    '11/12': '91.666667%',
-    full: '100%',
-    screen: '100vw',
-  }),
-  zIndex: {
-    auto: 'auto',
-    0: '0',
-    10: '10',
-    20: '20',
-    30: '30',
-    40: '40',
-    50: '50',
-  },
-  gap: theme => theme('spacing'),
-  gridTemplateColumns: {
-    none: 'none',
-    1: 'repeat(1, minmax(0, 1fr))',
-    2: 'repeat(2, minmax(0, 1fr))',
-    3: 'repeat(3, minmax(0, 1fr))',
-    4: 'repeat(4, minmax(0, 1fr))',
-    5: 'repeat(5, minmax(0, 1fr))',
-    6: 'repeat(6, minmax(0, 1fr))',
-    7: 'repeat(7, minmax(0, 1fr))',
-    8: 'repeat(8, minmax(0, 1fr))',
-    9: 'repeat(9, minmax(0, 1fr))',
-    10: 'repeat(10, minmax(0, 1fr))',
-    11: 'repeat(11, minmax(0, 1fr))',
-    12: 'repeat(12, minmax(0, 1fr))',
-  },
-  gridColumn: {
-    auto: 'auto',
-    'span-1': 'span 1 / span 1',
-    'span-2': 'span 2 / span 2',
-    'span-3': 'span 3 / span 3',
-    'span-4': 'span 4 / span 4',
-    'span-5': 'span 5 / span 5',
-    'span-6': 'span 6 / span 6',
-    'span-7': 'span 7 / span 7',
-    'span-8': 'span 8 / span 8',
-    'span-9': 'span 9 / span 9',
-    'span-10': 'span 10 / span 10',
-    'span-11': 'span 11 / span 11',
-    'span-12': 'span 12 / span 12',
-  },
-  gridColumnStart: {
-    auto: 'auto',
-    1: '1',
-    2: '2',
-    3: '3',
-    4: '4',
-    5: '5',
-    6: '6',
-    7: '7',
-    8: '8',
-    9: '9',
-    10: '10',
-    11: '11',
-    12: '12',
-    13: '13',
-  },
-  gridColumnEnd: {
-    auto: 'auto',
-    1: '1',
-    2: '2',
-    3: '3',
-    4: '4',
-    5: '5',
-    6: '6',
-    7: '7',
-    8: '8',
-    9: '9',
-    10: '10',
-    11: '11',
-    12: '12',
-    13: '13',
-  },
-  gridTemplateRows: {
-    none: 'none',
-    1: 'repeat(1, minmax(0, 1fr))',
-    2: 'repeat(2, minmax(0, 1fr))',
-    3: 'repeat(3, minmax(0, 1fr))',
-    4: 'repeat(4, minmax(0, 1fr))',
-    5: 'repeat(5, minmax(0, 1fr))',
-    6: 'repeat(6, minmax(0, 1fr))',
-  },
-  gridRow: {
-    auto: 'auto',
-    'span-1': 'span 1 / span 1',
-    'span-2': 'span 2 / span 2',
-    'span-3': 'span 3 / span 3',
-    'span-4': 'span 4 / span 4',
-    'span-5': 'span 5 / span 5',
-    'span-6': 'span 6 / span 6',
-  },
-  gridRowStart: {
-    auto: 'auto',
-    1: '1',
-    2: '2',
-    3: '3',
-    4: '4',
-    5: '5',
-    6: '6',
-    7: '7',
-  },
-  gridRowEnd: {
-    auto: 'auto',
-    1: '1',
-    2: '2',
-    3: '3',
-    4: '4',
-    5: '5',
-    6: '6',
-    7: '7',
-  },
-  transformOrigin: {
-    center: 'center',
-    top: 'top',
-    'top-right': 'top right',
-    right: 'right',
-    'bottom-right': 'bottom right',
-    bottom: 'bottom',
-    'bottom-left': 'bottom left',
-    left: 'left',
-    'top-left': 'top left',
-  },
-  scale: {
-    0: '0',
-    50: '.5',
-    75: '.75',
-    90: '.9',
-    95: '.95',
-    100: '1',
-    105: '1.05',
-    110: '1.1',
-    125: '1.25',
-    150: '1.5',
-  },
-  rotate: {
-    '-180': '-180deg',
-    '-90': '-90deg',
-    '-45': '-45deg',
-    0: '0',
-    45: '45deg',
-    90: '90deg',
-    180: '180deg',
-  },
-  translate: (theme, { negative }) => ({
-    ...theme('spacing'),
-    ...negative(theme('spacing')),
-    '-full': '-100%',
-    '-1/2': '-50%',
-    '1/2': '50%',
-    full: '100%',
-  }),
-  skew: {
-    '-12': '-12deg',
-    '-6': '-6deg',
-    '-3': '-3deg',
-    0: '0',
-    3: '3deg',
-    6: '6deg',
-    12: '12deg',
-  },
-  transitionProperty: {
-    none: 'none',
-    all: 'all',
-    default:
-      'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform',
-    colors: 'background-color, border-color, color, fill, stroke',
-    opacity: 'opacity',
-    shadow: 'box-shadow',
-    transform: 'transform',
-  },
-  transitionTimingFunction: {
-    linear: 'linear',
-    in: 'cubic-bezier(0.4, 0, 1, 1)',
-    out: 'cubic-bezier(0, 0, 0.2, 1)',
-    'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
-  },
-  transitionDuration: {
-    75: '75ms',
-    100: '100ms',
-    150: '150ms',
-    200: '200ms',
-    300: '300ms',
-    500: '500ms',
-    700: '700ms',
-    1000: '1000ms',
-  },
-  transitionDelay: {
-    75: '75ms',
-    100: '100ms',
-    150: '150ms',
-    200: '200ms',
-    300: '300ms',
-    500: '500ms',
-    700: '700ms',
-    1000: '1000ms',
-  },
-};
-```
-
-</details>
-
-:::tip
-For more information on TailwindCSS configuration, please refer to [here](https://tailwindcss.com/docs/configuration#theme).
-
-:::
-
-The `designSystem` is used to define the project's color palette, typographic scales, font list, breakpoints, border radius values, and more. As Modern.js uses the design approach of Tailwind Theme and also integrates Tailwind CSS internally, the usage of `designSystem` is the same as that of Tailwind CSS Theme.
-
-### Structure
-
-The `designSystem` object contains properties for `screens`, `colors`, `spacing`, and each customizable core plugin.
-
-#### Screens
-
-Use `screens` to customize the responsive breakpoints in your project:
-
-```js
-const designSystem = {
-  screens: {
-    sm: '640px',
-    md: '768px',
-    lg: '1024px',
-    xl: '1280px',
-  },
-};
-```
-
-The property names in the `screens` object are screen names (used as prefixes for the responsive utility variants generated by TailwindCSS, such as `md:text-center`), and the values are the `min-width` at which the breakpoint should start.
-
-The default breakpoints are inspired by common device resolutions:
-
-```js
-const designSystem = {
-  screens: {
-    sm: '640px',
-    // => @media (min-width: 640px) { ... }
-
-    md: '768px',
-    // => @media (min-width: 768px) { ... }
-
-    lg: '1024px',
-    // => @media (min-width: 1024px) { ... }
-
-    xl: '1280px',
-    // => @media (min-width: 1280px) { ... }
-  },
-};
-```
-
-You can use any names you like as properties for your breakpoints in your project:
-
-```js
-const designSystem = {
-  screens: {
-    tablet: '640px',
-    // => @media (min-width: 640px) { ... }
-
-    laptop: '1024px',
-    // => @media (min-width: 1024px) { ... }
-
-    desktop: '1280px',
-    // => @media (min-width: 1280px) { ... }
-  },
-};
-```
-
-These screen names are reflected in `utilities`, so `text-center` would now look like this:
-
-```css
-.text-center {
-  text-align: center;
-}
-
-@media (min-width: 640px) {
-  .tablet\:text-center {
-    text-align: center;
-  }
-}
-
-@media (min-width: 1024px) {
-  .laptop\:text-center {
-    text-align: center;
-  }
-}
-
-@media (min-width: 1280px) {
-  .desktop\:text-center {
-    text-align: center;
-  }
-}
-```
-
-##### Max-width Breakpoint
-
-If you want to use `max-width` breakpoints instead of `min-width`, you can specify the screen as an object with a `max` property:
-
-```js
-const designSystem = {
-  screens: {
-    xl: { max: '1279px' },
-    // => @media (max-width: 1279px) { ... }
-
-    lg: { max: '1023px' },
-    // => @media (max-width: 1023px) { ... }
-
-    md: { max: '767px' },
-    // => @media (max-width: 767px) { ... }
-
-    sm: { max: '639px' },
-    // => @media (max-width: 639px) { ... }
-  },
-};
-```
-
-If necessary, you can create breakpoints with both `min-width` and `max-width` definitions, like so:
-
-```js
-const designSystem = {
-  screens: {
-    sm: { min: '640px', max: '767px' },
-    md: { min: '768px', max: '1023px' },
-    lg: { min: '1024px', max: '1279px' },
-    xl: { min: '1280px' },
-  },
-};
-```
-
-##### Breakpoints with Multiple Ranges
-
-Sometimes it can be useful to apply a single breakpoint definition to multiple ranges.
-
-For example, suppose you have a `sidebar` and want to base the breakpoints on the width of the content area rather than the entire viewport. You can simulate this by using a smaller breakpoint style when the `sidebar` is visible and the content area is reduced:
-
-```js
-const designSystem = {
-  screens: {
-    sm: '500px',
-    md: [
-      // Sidebar appears at 768px, so revert to `sm:` styles between 768px
-      // and 868px, after which the main content area is wide enough again to
-      // apply the `md:` styles.
-      { min: '668px', max: '767px' },
-      { min: '868px' },
-    ],
-    lg: '1100px',
-    xl: '1400px',
-  },
-};
-```
-
-##### Custom Media Queries
-
-If you need to provide fully custom media queries for your breakpoints, you can use an object with a `raw` property:
-
-```js
-const designSystem = {
-  extend: {
-    screens: {
-      portrait: { raw: '(orientation: portrait)' },
-      // => @media (orientation: portrait) { ... }
-    },
-  },
-};
-```
-
-##### Print Style
-
-The `raw` option may be especially useful if you need to apply different styles for printing.
-
-All you need to do is add a `print` under `designSystem.extend.screens`:
-
-```js
-const designSystem = {
-  extend: {
-    screens: {
-      print: { raw: 'print' },
-      // => @media print { ... }
-    },
-  },
-};
-```
-
-Then, you can use classes like `print:text-black` to specify styles that should only be applied when someone tries to print the page:
-
-```html
-<div class="text-gray-700 print:text-black">
-  {/* ...  */}
-</div>
-```
-
-##### Dark Mode
-
-The `raw` option can be used to implement "dark mode" screens:
-
-```js
-const designSystem = {
-  extend: {
-    screens: {
-      dark: { raw: '(prefers-color-scheme: dark)' },
-      // => @media (prefers-color-scheme: dark) { ... }
-    },
-  },
-};
-```
-
-Then, you can use the `dark:` prefix to set different styles for elements in dark mode:
-
-```html
-<div class="text-gray-700 dark:text-gray-200">
-  {/* ...  */}
-</div>
-```
-
-Please note that since these screen variants are implemented in TailwindCSS, **it is not possible to use this method to combine breakpoints with dark mode**, e.g. `md:dark:text-gray-300` will not work.
-
-#### Colors
-
-The `colors` property allows you to customize the global color palette for your project.
-
-```js
-const designSystem = {
-  colors: {
-    transparent: 'transparent',
-    black: '#000',
-    white: '#fff',
-    gray: {
-      100: '#f7fafc',
-      // ...
-      900: '#1a202c',
-    },
-
-    // ...
-  },
-};
-```
-
-By default, these colors are inherited by the `backgroundColor`, `textColor`, and `borderColor` core plugins.
-
-For more information, see [Customizing Colors](https://tailwindcss.com/docs/customizing-colors).
-
-#### Spacing
-
-Use the `space` property to customize the global spacing and scale ratios for your project:
-
-```js
-const designSystem = {
-  spacing: {
-    px: '1px',
-    0: '0',
-    1: '0.25rem',
-    2: '0.5rem',
-    3: '0.75rem',
-    4: '1rem',
-    5: '1.25rem',
-    6: '1.5rem',
-    8: '2rem',
-    10: '2.5rem',
-    12: '3rem',
-    16: '4rem',
-    20: '5rem',
-    24: '6rem',
-    32: '8rem',
-    40: '10rem',
-    48: '12rem',
-    56: '14rem',
-    64: '16rem',
-  },
-};
-```
-
-By default, these values are inherited by the `padding`, `margin`, `negativeMargin`, `width`, and `height` core plugins.
-
-For more information, see [Customizing Spacing](https://tailwindcss.com/docs/customizing-spacing).
-
-#### Core Plugins
-
-The rest of the theme section is used to configure the values available for each core plugin.
-
-For example, the `borderRadius` property allows you to customize the `utilities` for the generated border radius:
-
-```js
-const designSystem = {
-  borderRadius: {
-    none: '0',
-    sm: '.125rem',
-    default: '.25rem',
-    lg: '.5rem',
-    full: '9999px',
-  },
-};
-```
-
-**The property name determines the suffix of the generated classes, and the value determines the value of the actual CSS declaration.** The `borderRadius` configuration example above will generate the following CSS classes:
-
-```css
-.rounded-none {
-  border-radius: 0;
-}
-.rounded-sm {
-  border-radius: 0.125rem;
-}
-.rounded {
-  border-radius: 0.25rem;
-}
-.rounded-lg {
-  border-radius: 0.5rem;
-}
-.rounded-full {
-  border-radius: 9999px;
-}
-```
-
-You may notice that the `rounded` class without a suffix is created using the `default` property in the theme configuration. This is a common convention in Tailwind CSS that many (although not all) core plugins support.
-
-For more information on customizing specific core plugins, see the documentation for that plugin.
-
-### Customizing the Default Configuration
-
-Out of the box, your project will inherit values from the default theme configuration. If you want to customize the default theme, there are a few different options depending on your goals.
-
-#### Overriding Default Configuration
-
-To override an option in the default configuration, add the property you want to override to `designSystem`:
-
-```ts title="modern.config.ts"
-const designSystem = {
-  // Replaces all of the default `opacity` values
-  opacity: {
-    0: '0',
-    20: '0.2',
-    40: '0.4',
-    60: '0.6',
-    80: '0.8',
-    100: '1',
-  },
-};
-
-export default defineConfig({
-  source: {
-    designSystem,
-  },
-});
-```
-
-This will completely replace the default property configuration, so in the example above, the default `opacity utilities` will not be generated.
-
-Any properties you don't provide will still inherit from the default theme, so in the example above, the default theme configuration for colors, spacing, border radius, background positions, etc. will be preserved.
-
-#### Extending Default Configuration
-
-If you want to keep the default values for a theme option but add new values, add the extension under the `designSystem.extend` property.
-
-For example, if you want to add an additional breakpoint but keep the existing ones, you can extend the `screens` property:
-
-```ts title="modern.config.ts"
-const designSystem = {
-  extend: {
-    // Adds a new breakpoint in addition to the default breakpoints
-    screens: {
-      '2xl': '1440px',
-    },
-  },
-};
-
-export default defineConfig({
-  source: {
-    designSystem,
-  },
-});
-```
-
-Of course, you can override some parts of the default theme and extend other parts of the default theme in the same configuration:
-
-```ts title="modern.config.ts"
-const designSystem = {
-  opacity: {
-    0: '0',
-    20: '0.2',
-    40: '0.4',
-    60: '0.6',
-    80: '0.8',
-    100: '1',
-  },
-  extend: {
-    screens: {
-      '2xl': '1440px',
-    },
-  },
-};
-
-export default defineConfig({
-  source: {
-    designSystem,
-  },
-});
-```
-
-#### Referencing Other Values
-
-If you need to reference another value in your configuration, you can do so by providing a closure function instead of a static value. The function will receive the `theme()` function as an argument, which you can use to look up other values in the configuration using dot notation.
-
-For example, you can generate `fill` utilities for each color in your palette by referencing `theme('colors')` on the `fill` configuration:
-
-```ts title="modern.config.ts"
-const designSystem = {
-  colors: {
-    // ...
-  },
-  fill: theme => theme('colors'),
-};
-
-export default defineConfig({
-  source: {
-    designSystem,
-  },
-});
-```
-
-The `theme()` function attempts to find the value you're looking for from the fully merged configuration object, so it can reference your own custom settings as well as default theme values. It also works recursively, so as long as there's a static value at the end of the chain, it can resolve the value you're looking for.
-
-**Referencing Default Configuration**
-
-If you want to reference a value from the default configuration for any reason, you can import it from `tailwindcss/defaultTheme`. A useful example is if you want to add a font from the fonts provided by the default configuration:
-
-```ts title="modern.config.ts"
-const defaultTheme = require('tailwindcss/defaultTheme');
-
-const designSystem = {
-  extend: {
-    fontFamily: {
-      sans: ['Lato', ...defaultTheme.fontFamily.sans],
-    },
-  },
-};
-
-export default defineConfig({
-  source: {
-    designSystem,
-  },
-});
-```
-
-#### Disabling Entire Core Plugins
-
-If you don't want to generate any classes for a particular core plugin, it's best to set that plugin to `false` in the `corePlugins` configuration rather than providing an empty object for that property in the configuration:
-
-```js
-// Don't assign an empty object in your theme configuration
-
-const designSystem = {
-  opacity: {},
-};
-
-// Do disable the plugin in your corePlugins configuration
-const designSyttem = {
-  corePlugins: {
-    opacity: false,
-  },
-};
-```
-
-The end result is the same, but since many core plugins don't expose any configuration, they can only be disabled using `corePlugins`, so it's best to be consistent.
-
-#### Adding Your Own Keys
-
-In many cases, adding your own properties to the configuration object can be useful.
-
-One example of this is adding a new property for reuse between multiple core plugins. For example, you could extract a `positions` object that both the `backgroundPosition` and `objectPosition` plugins could reference:
-
-```js
-const designSystem = {
-  positions: {
-    bottom: 'bottom',
-    center: 'center',
-    left: 'left',
-    'left-bottom': 'left bottom',
-    'left-top': 'left top',
-    right: 'right',
-    'right-bottom': 'right bottom',
-    'right-top': 'right top',
-    top: 'top',
-  },
-  backgroundPosition: theme => theme('positions'),
-  objectPosition: theme => theme('positions'),
-};
-```
-
-Another example is adding new properties for reference in custom plugins. For example, if you've written a gradient plugin for your project, you could add a `gradients` property to the theme object that the plugin references:
-
-```ts title="modern.config.ts"
-const designSystem = {
-  gradients: theme => ({
-    'blue-green': [theme('colors.blue.500'), theme('colors.green.500')],
-    'purple-blue': [theme('colors.purple.500'), theme('colors.blue.500')],
-    // ...
-  }),
-};
-
-export default defineConfig({
-  source: {
-    designSystem,
-  },
-  tools: {
-    tailwind: {
-      plugins: [require('./plugins/gradients')],
-    },
-  },
-});
-```
-
-### Configuration Reference
-
-In addition to `screens`, `colors`, and `spacing`, all properties in the configuration object map to core plugins in TailwindCSS. Because many plugins are responsible for CSS properties that only accept a set of static values (e.g. `float`), not every plugin has a corresponding property in the theme object.
-
-All of these properties can also be extended from the default theme under the `designSystem.extend` property.
-
-For a complete list of all properties and their effects, see this [link](https://tailwindcss.com/docs/theme#configuration-reference).
-
-### Additional Configuration
-
-In addition to the configuration that is the same as Tailwind CSS Theme, there is additional configuration provided by Modern.js.
-
-#### source.designSystem.supportStyledComponents
-
-This configuration is of type `boolean` and defaults to `false`.
-
-When this configuration value is `true`, a `styled-components` `ThemeProvider` component is provided at the outermost layer of the application at runtime, and the `Theme Token` object generated through `designSystem` is injected.