import CodeRender from '../../CodeRender'

## Extends

### Extends Colors

```js filename="icestack.config.cjs"
/**
 * @type {import('@icestack/ui').Config}
 */
const config = {
  outdir: './my-ui',
  base: {
    themes: {
      // light theme
      light: {
        types: {
          // auto generate colors:
          // info, info-content, info-hover, info-active
          info: '#13c2c2',
          // secondary, secondary-content, secondary-hover, secondary-active
          secondary: '#2f54eb'
        }
      },
      // dark theme
      dark: {
        types: {
          // is dark: true
          // [string, boolean|options]
          info: ['#13c2c2', true],
          // full control css vars
          secondary: {
            secondary: '#2f54eb',
            'secondary-content': '#ffffff',
            'secondary-hover': '#263ea0',
            'secondary-active': '#5273e0'
          }
        }
      }
    }
  }
}
module.exports = config
```

<CodeRender
  className="space-x-2"
  code={`<button class="btn btn-info">Info</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-info btn-outline">Info Outline</button>
<button class="btn btn-secondary btn-outline">Secondary Outline</button>
`}
></CodeRender>

```html
<button class="btn btn-info">Info</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-info btn-outline">Info Outline</button>
<button class="btn btn-secondary btn-outline">Secondary Outline</button>
```

### Extends Sizes

```js filename="icestack.config.cjs"
/**
 * @type {import('@icestack/ui').Config}
 */
const config = {
  outdir: './my-ui',
  components: {
    // component name
    button: {
      extend: {
        //utils
        utils: [
          // Sizes
          //xl and 2xl
          `.btn-xl {
             @apply min-h-20 h-20 px-8;
             font-size: 1.25rem;
           }
           .btn-2xl {
             @apply min-h-24 h-24 px-10;
             font-size: 1.5rem;
           }
           `,
          // 3xl 4xl
          ({ selector }) => {
            return `
             ${selector}-3xl{
              @apply min-h-28 h-28 px-12;
              font-size: 1.75rem;
             }
               ${selector}-4xl {
                 @apply min-h-32 h-32 px-14;
                 font-size: 2rem;
               }`
          }
        ]
      }
    }
  }
}
module.exports = config
```

<CodeRender className='space-y-2' code={`
<div class="flex space-x-2 items-center">
<span>Extends</span>

<button class="btn btn-4xl">4xl</button>
<button class="btn btn-3xl">3xl</button>
<button class="btn btn-2xl">2xl</button>
<button class="btn btn-xl">xl</button>
</div>
<div class="flex space-x-2 items-center">
<span>Default</span>

<button class="btn btn-lg">Large</button>
<button class="btn btn-md">Normal</button>
<button class="btn btn-sm">Small</button>
<button class="btn btn-xs">Tiny</button>
</div>
`}></CodeRender>

```html
<button class="btn btn-4xl">4xl</button>
<button class="btn btn-3xl">3xl</button>
<button class="btn btn-2xl">2xl</button>
<button class="btn btn-xl">xl</button>
<button class="btn btn-lg">Large</button>
<button class="btn btn-md">Normal</button>
<button class="btn btn-sm">Small</button>
<button class="btn btn-xs">Tiny</button>
```
