@modern-js/main-doc 2.8.0 → 2.10.0

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

@@ -0,0 +1,1175 @@
+---
+title: source.designSystem
+sidebar_label: designSystem
+---
+# designSystem
+
+- **Type:** `Object`
+- **Default:** See configuration details below.
+
+:::caution Caution
+You need to enable the Tailwind CSS feature through `pnpm run new` first.
+
+:::
+
+<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',
+  },
+};
+```
+
+:::tip
+More about: <a href="https://tailwindcss.com/docs/configuration#theme" target="_blank">TailwindCSS configuration</a>.
+
+:::
+
+</details>
+
+`designSystem` is used to define the project's color palette, typographic scale (Typographic Scales or Type Scale), font list, breakpoints, border rounded values, and more. Because Modern.js borrowed the design method of Tailwind Theme, and also integrates Tailwind CSS internally, the `designSystem` is used in the same way as Tailwind CSS Theme.
+
+### Structure
+
+The `designSystem` object contains properties for `screens`, `colors`, and `spacing`, as well as each customizable core plugin.
+
+#### Screens
+
+Use `screens` to customize response breakpoints in your project:
+
+```js
+const designSystem = {
+  screens: {
+    sm: '640px',
+    md: '768px',
+    lg: '1024px',
+    xl: '1280px',
+  },
+};
+```
+
+Where the property name in the `screens` object is the screen name (used as a prefix for adaptive utility variants generated by `Tailwind CSS`, such as `md:text-center`), and the value is the `min-width` at which the breakpoint should begin.
+
+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 name you like as a breakpoint property 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` now looks 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 a `max-width` breakpoint instead of a `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, to create breakpoints with `min-width` and `max-width` definitions, for example:
+
+```js
+const designSystem = {
+  screens: {
+    sm: { min: '640px', max: '767px' },
+    md: { min: '768px', max: '1023px' },
+    lg: { min: '1024px', max: '1279px' },
+    xl: { min: '1280px' },
+  },
+};
+```
+
+##### Multiple ranges of breakpoints
+
+Sometimes it is useful to apply a single breakpoint definition to multiple scopes.
+
+For example, let's say you have a `sidebar` and want the breakpoint to be based on the width of the content area rather than the entire viewport. You can simulate this situation, using a smaller breakpoint style when the `sidebar` is visible and shrinks the content area:
+
+```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 a fully customized media query for the breakpoint, you can use an object with a `raw` attribute:
+
+```js
+const designSystem = {
+  extend: {
+    screens: {
+      portrait: { raw: '(orientation: portrait)' },
+      // => @media (orientation: portrait) { ... }
+    },
+  },
+};
+```
+
+##### Print Style
+
+The `raw` option can be especially useful if you need to apply a different style to the print.
+
+All you need to do is add a `print` in `designSystem.extend.screens`:
+
+```js
+const designSystem = {
+  extend: {
+    screens: {
+      print: { raw: 'print' },
+      // => @media print { ... }
+    },
+  },
+};
+```
+
+You can then use a class like `print:text-black` to specify styles that are only applied when someone tries to print a page:
+
+```html
+<div class="text-gray-700 print:text-black">
+  {/* ...  */}
+</div>
+```
+
+##### Dark Mode
+
+The `raw` option can be used to implement the "dark mode" screen:
+
+```js
+const designSystem = {
+  extend: {
+    screens: {
+      dark: { raw: '(prefers-color-scheme: dark)' },
+      // => @media (prefers-color-scheme: dark) { ... }
+    },
+  },
+};
+```
+
+You can then style the element differently in dark mode using the `dark:` prefix:
+
+```html
+<div class="text-gray-700 dark:text-gray-200">
+  {/* ...  */}
+</div>
+```
+
+Note that since these `screen variants` are implemented in `Tailwind CSS`, ** you cannot use this method to combine breakpoints with dark modes **, for example `md:dark:text-gray-300` will not work.
+
+#### Colors
+
+The `colors` property allows you to customize the global palette of 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.
+
+o learn more, see: [Customizing Colors](https://tailwindcss.com/docs/customizing-colors).
+
+#### Spacing
+
+Using the `space` property, you can customize the global spacing and scaling of items:
+
+```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.
+
+To learn more, see: [Customizing Spacing](https://tailwindcss.com/docs/customizing-spacing).
+
+#### Core plugins
+
+The rest of the topic section is used to configure the values available for each core plugin.
+
+For example, the `borderRadius` property allows you to customize the `utilities` of the rounded corners that will be generated:
+
+```js
+const designSystem = {
+  borderRadius: {
+    none: '0',
+    sm: '.125rem',
+    default: '.25rem',
+    lg: '.5rem',
+    full: '9999px',
+  },
+};
+```
+
+** The property name determines the suffix of the generated class, and the value determines the value of the actual CSS declaration. ** The example `borderRadius` configuration above will generate the following CSS class:
+
+```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 will notice that the `rounded` class is created without the suffix using the `default` property in the theme configuration. This is a common convention in Tailwind CSS supported by many, though not all, core plugins.
+
+To learn more about customizing a specific core plugin, visit the plugin's documentation.
+
+### Custom default configuration
+
+Out of the box, your project will automatically inherit values from the default theme configuration. If you want to customize the default theme, you have several different options depending on the target.
+
+#### Override default configuration
+
+To override the options in the default configuration, add the properties to override in `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 completely replaces the default property configuration, so in the example above, the default `opacity utilities` is not generated.
+
+Any properties you don't provide will be inherited from the default theme, so in the example above, the default theme configuration for color, spacing, border rounded corners, background position, and more will be preserved.
+
+#### Extension default configuration
+
+If you want to keep the default value for the theme option, but want to add a new value, add the extended content in the `designSystem.extend` property.
+
+For example, if you want to add an additional breakpoint but keep the existing one, 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,
+  },
+});
+```
+
+You can of course 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,
+  },
+});
+```
+
+#### Reference other values
+
+If you need to reference another value in the configuration, you can do so by providing a closure function instead of a static value. The function will receive a `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 a `fill` utility for each color in the palette by referencing `theme('colors')` on a `fill` configuration.
+
+```ts title="modern.config.ts"
+const designSystem = {
+  colors: {
+    // ...
+  },
+  fill: theme => theme('colors'),
+};
+
+export default defineConfig({
+  source: {
+    designSystem,
+  },
+});
+```
+
+The `theme()` function tries to find the value you're looking for from a 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 parse the value you're looking for.
+
+**Reference default configuration**
+
+If you want to reference a value in the default configuration for any reason, you can import it from `tailwindcss/defaultTheme`. A useful example is if you want to add one of 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,
+  },
+});
+```
+
+#### Disable the entire core plugin
+
+If you don't want to generate any classes for a core plugin, it's better to set the plugin to `false` in the `corePlugins` configuration instead of providing an empty object for this 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` anyway, and it's best to keep them consistent.
+
+#### Add your own key
+
+In many cases, it can be useful to add your own properties to the configuration object.
+
+An example of this is adding new properties for reuse between multiple core plugins. For example, you can extract a `positions` object that both the `backgroundPosition` and `objectPosition` plugins can 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 attributes to a custom plugin for reference. For example, if you wrote a gradual change plugin for a project, you can add a gradual change attribute to the subject object referenced by the plugin:
+
+```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')],
+    },
+  },
+});
+```
+
+### Configure reference
+
+With the exception of `screens`, `colors`, and `spacing`, all properties in the configuration object map to the core plugin of `Tailwind CSS`. Since many plugins are responsible for accepting only CSS properties for static value sets (eg `float`), note that not every plugin has corresponding properties in the theme object.
+
+All of these properties can also be used in the `designSystem.extend` property to extend the default theme.
+
+See this [link](https://tailwindcss.com/docs/theme#configuration-reference) for what all properties do.
+
+### Additional configuration
+
+In addition to the same configuration as the Tailwind CSS Theme, there are additional configurations available Modern.js.
+
+#### source.designSystem.supportStyledComponents
+
+The configuration type is `boolean` and defaults to `false`.
+
+When the configuration value is `true`, the runtime provides the `styled-components` `ThemeProvider` component outside the application and will inject it through the `Theme Token` object generated by `designSystem`.