# Styling

Read once during Phase 2b (Code Orientation). Not needed per-page.

## Setup

```css
/* globals.css */
@import "@tailor-platform/app-shell/theme.css";
@import "tailwindcss";
```

- Z-index CSS variables: `--z-sidebar` (10), `--z-popup` (50), `--z-overlay` (50) — override in `:root` if needed

## Theming

AppShell controls its theme through CSS variables. Override them in `:root` or a scoped selector to customize the look and feel:

```css
:root {
  --color-primary: #3b82f6;
  --color-background: #ffffff;
}
```

Import `@tailor-platform/app-shell/theme.css` to load the default variable definitions. Any variable can be overridden after the import.

## Component Styling with Data Attributes

AppShell's UI components support data attribute-based styling, following the [Base UI data attributes](https://base-ui.com/react/handbook/styling#data-attributes) convention. Components expose `data-*` attributes that reflect their internal state, allowing CSS-only style control without JavaScript:

```css
/* Style a component based on its state */
.SwitchThumb[data-checked] {
  background-color: green;
}

.MenuItem[data-highlighted] {
  background-color: var(--color-primary);
  color: white;
}
```

This approach works with Tailwind as well:

```tsx
<Switch.Thumb className="bg-gray-300 data-[checked]:bg-green-500" />
```

Check each component's API reference for available data attributes.
