# @epilot360/core-ui

Core UI package containing global design tokens and configurations for epilot's design system.

📖 [View Storybook Documentation](https://main--67c6bdb2c8953d85ee8fc349.chromatic.com/)

### Installation
```bash
npm  install  @epilot360/core-ui
# or
yarn  add  @epilot360/core-ui
```
### Tailwind configuration

This package provides a shared Tailwind configuration for consistent styling. To use this in your project, add the following to your tailwind.config.js:

```ts
import tailwindConfig from '@epilot360/core-ui';

export default {
    presets: [tailwindConfig],
    //Project specific configurations
}
```

If you're only using the Tailwind preset without importing any components, you'll need to import the tokens separately to have access to the CSS variables:

```ts
import '@epilot360/core-ui/dist/tokens.css';
```

### Design Tokens only

If you only want the design tokens without importing the entire library, you can import just the tokens.css file:

Import in JavaScript/TypeScript

```js
import '@epilot360/core-ui/dist/tokens.css';
```

Or in a CSS file:

```css
@import '@epilot360/core-ui/dist/tokens.css';
```

### Theme Provider

A theme provider component that supports light and dark themes is available. To use it, wrap your application with the `EpilotThemeProvider`:

```tsx
import { EpilotThemeProvider } from '@epilot360/core-ui';

function App() {
  return (
    <EpilotThemeProvider theme="light">
      {/* Other Components */}
    </EpilotThemeProvider>
  );
}
```

Note: When using theme switching, Tailwind color utilities (like `text-blue-9`) will not automatically respond to theme changes. Other utilities (typography, spacing, etc.) work normally regardless of theme.

### Components

To use any of the components inside the library:

```tsx
import { Button } from '@epilot360/core-ui';

function CustomComponent() {
  return (
    <Button variant="solid" size="2">
      Primary Button
    </Button>
  );
}
```