# ⚙️ Core


<!-- WARNING: THIS FILE WAS AUTOGENERATED! DO NOT EDIT! -->

## 🎯 Overview

This module provides the foundational building blocks for Material
Design styling in FastHTML.

<table>
<colgroup>
<col style="width: 35%" />
<col style="width: 32%" />
<col style="width: 32%" />
</colgroup>
<thead>
<tr>
<th>Category</th>
<th>Exports</th>
<th>Purpose</th>
</tr>
</thead>
<tbody>
<tr>
<td>📦 <strong>Constants</strong></td>
<td><code>HEADER_URLS</code>, <code>beer_hdrs</code></td>
<td>CDN links and header components</td>
</tr>
<tr>
<td>🎨 <strong>Helper Lists</strong></td>
<td><code>SIZES</code>, <code>COLORS</code>, <code>MARGINS</code>,
etc.</td>
<td>All BeerCSS utility class names</td>
</tr>
<tr>
<td>🖌️ <strong>MatTheme</strong></td>
<td><code>MatTheme</code></td>
<td>Fluent API for app theming
(<code>MatTheme.blue.headers()</code>)</td>
</tr>
<tr>
<td>🔗 <strong>BeerCssChain</strong></td>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/core.html#beercsschain"><code>BeerCssChain</code></a></td>
<td>Chainable CSS helper classes</td>
</tr>
</tbody>
</table>

------------------------------------------------------------------------

## 📚 Table of Contents

1.  [CDN Headers](#-cdn-headers) - BeerCSS/Material Design CDN setup
2.  [Helper Constants](#-helper-constants) - Utility class name lists  
3.  [MatTheme API](#-mattheme-api) - App theming with color chains
4.  [BeerCssChain](#-beercsschain) - Chainable CSS helpers

## 📦 CDN Headers

BeerCSS and Material Dynamic Colors CDN configuration.

<table>
<thead>
<tr>
<th>Constant</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>HEADER_URLS</code></td>
<td>Dict of CDN URLs for CSS/JS assets</td>
</tr>
<tr>
<td><code>beer_hdrs</code></td>
<td>Pre-configured header tuple for FastHTML apps</td>
</tr>
</tbody>
</table>

> 💡 **Use case**: Include `beer_hdrs` in your FastHTML app’s headers to
> enable Material Design styling.

## 🎨 Helper Constants

BeerCSS utility class names organized by category. These lists power
[`BeerCssChain`](https://abhisheksreesaila.github.io/fh-matui/core.html#beercsschain)
and can be used for validation.

<table>
<colgroup>
<col style="width: 38%" />
<col style="width: 23%" />
<col style="width: 38%" />
</colgroup>
<thead>
<tr>
<th>Category</th>
<th>List</th>
<th>Examples</th>
</tr>
</thead>
<tbody>
<tr>
<td>📏 Sizing</td>
<td><code>SIZES</code>, <code>WIDTH_HEIGHT</code></td>
<td><code>small</code>, <code>large</code>, <code>auto_width</code></td>
</tr>
<tr>
<td>🎭 Effects</td>
<td><code>ELEVATES</code>, <code>BLURS</code>, <code>SHADOWS</code></td>
<td><code>elevate</code>, <code>medium_blur</code>,
<code>shadow</code></td>
</tr>
<tr>
<td>📐 Layout</td>
<td><code>MARGINS</code>, <code>PADDINGS</code>,
<code>POSITIONS</code></td>
<td><code>no_margin</code>, <code>left_padding</code>,
<code>center</code></td>
</tr>
<tr>
<td>🎨 Theme</td>
<td><code>THEME_HELPERS</code>, <code>COLOR_HELPERS</code></td>
<td><code>primary</code>, <code>dark</code>, <code>blue5</code></td>
</tr>
<tr>
<td>✍️ Text</td>
<td><code>TYPOGRAPHY</code></td>
<td><code>bold</code>, <code>italic</code>, <code>uppercase</code></td>
</tr>
</tbody>
</table>

``` python
# Check available sizes
print(SIZES)  # ['tiny', 'small', 'medium', 'large', 'extra', 'wrap', 'no_wrap', 'max']

# All helpers combined for validation
len(ALL_HELPERS)  # 400+ utility classes available
```

    ['tiny', 'small', 'medium', 'large', 'extra', 'wrap', 'no_wrap', 'max']

    408

## 🖌️ MatTheme API

Fluent API for configuring app themes with Material Design colors.

<table>
<colgroup>
<col style="width: 38%" />
<col style="width: 61%" />
</colgroup>
<thead>
<tr>
<th>Method</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>MatTheme.&lt;color&gt;</code></td>
<td>Select a theme color (e.g., <code>MatTheme.blue</code>,
<code>MatTheme.amber</code>)</td>
</tr>
<tr>
<td><code>.headers(title, mode)</code></td>
<td>Generate header tuple with theme scripts</td>
</tr>
</tbody>
</table>

**Available colors**: `amber`, `blue`, `red`, `green`, `purple`,
`orange`, `cyan`, `teal`, `indigo`, `pink`, `lime`, `deep_orange`,
`deep_purple`, `blue_grey`, `brown`, `yellow`

> 💡 **Use case**: `MatTheme.indigo.headers("My App", mode="dark")`
> creates a dark-themed indigo app.

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/core.py#L101"
target="_blank" style="float:right; font-size:smaller">source</a>

### \_ThemeChain.headers

``` python

def headers(
    title:str='App', mode:str='auto'
):

```

*Generate FastHTML headers with BeerCSS theming*

``` python
# Create a blue-themed app
hdrs = MatTheme.blue.headers(title="My App")

# Dark mode with indigo theme  
hdrs = MatTheme.indigo.headers(title="Dashboard", mode="dark")

# Light mode with amber theme
hdrs = MatTheme.amber.headers(title="Settings", mode="light")
```

## 🔗 BeerCssChain

Chainable helper for building BeerCSS class strings with a fluent API.

<table>
<colgroup>
<col style="width: 38%" />
<col style="width: 61%" />
</colgroup>
<thead>
<tr>
<th>Method</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><a
href="https://abhisheksreesaila.github.io/fh-matui/core.html#beercsschain"><code>BeerCssChain()</code></a></td>
<td>Create empty chain</td>
</tr>
<tr>
<td><code>.&lt;helper&gt;</code></td>
<td>Chain any BeerCSS helper (e.g., <code>.small</code>,
<code>.primary</code>, <code>.bold</code>)</td>
</tr>
<tr>
<td><code>str(chain)</code></td>
<td>Convert to space-separated class string</td>
</tr>
</tbody>
</table>

> 💡 **Use case**: Build complex class strings without typos:
> `BeerCssChain().small.primary.bold` → `"small primary bold"`

------------------------------------------------------------------------

<a
href="https://github.com/abhisheksreesaila/fh-matui/blob/master/fh_matui/core.py#L223"
target="_blank" style="float:right; font-size:smaller">source</a>

### BeerCssChain

``` python

def BeerCssChain(
    tokens:NoneType=None
):

```

*Base class for chaining Beer CSS helper classes together*

``` python
# Chain multiple helpers
chain = BeerCssChain().small.primary.bold.round
str(chain)  # "small primary bold round"

# Use with FastHTML components
Div("Hello", cls=str(BeerCssChain().large.center.padding))

# Iterate over tokens
list(BeerCssChain().small.margin.elevate)  # ['small', 'margin', 'elevate']
```

    ['small', 'margin', 'elevate']