@strato-css/preset-advanced

Advanced preset for Strato CSS framework. This preset provides animation utilities, transform utilities, backdrop filters, and table utilities.

Installation

pnpm add @strato-css/preset-advanced

Usage

import { defineConfig } from '@strato-css/core';
import presetAdvanced from '@strato-css/preset-advanced';

export default defineConfig({
  presets: [
    presetAdvanced()
  ]
});

Features

Animation Utilities

Keyframe Animations

• animate-spin - Rotate 360deg
• animate-ping - Scale and fade out
• animate-pulse - Fade in and out
• animate-bounce - Bounce up and down

Animation Utilities

• animate-none - No animation
• Custom animation durations
• Custom animation delays
• Custom animation timing functions

Transform Utilities

Scale Transforms

• scale-0 to scale-150 - Scale from 0% to 150%
• scale-x-0 to scale-x-150 - Scale X axis
• scale-y-0 to scale-y-150 - Scale Y axis

Rotate Transforms

• rotate-0 to rotate-180 - Rotate in 45deg increments
• rotate-270, rotate-360 - Additional rotations
• Negative rotations: -rotate-45, -rotate-90, etc.

Translate Transforms

• translate-x-0 to translate-x-full - X translation
• translate-y-0 to translate-y-full - Y translation
• Negative translations available

Skew Transforms

• skew-x-0 to skew-x-12 - Skew X axis
• skew-y-0 to skew-y-12 - Skew Y axis
• Negative skews available

Transform Origin

• origin-center, origin-top, origin-right, etc.
• origin-top-left, origin-top-right, etc.

Backdrop Filter Utilities

Blur

• backdrop-blur-none, backdrop-blur-sm, backdrop-blur, backdrop-blur-md, backdrop-blur-lg, backdrop-blur-xl, backdrop-blur-2xl, backdrop-blur-3xl

Brightness

• backdrop-brightness-0 to backdrop-brightness-150 - In 25 unit increments
• backdrop-brightness-50, backdrop-brightness-75, etc.

Contrast

• backdrop-contrast-0 to backdrop-contrast-200 - In 50 unit increments
• Negative contrast: backdrop-contrast-50

Grayscale

• backdrop-grayscale-0 to backdrop-grayscale - Grayscale filter

Hue Rotate

• backdrop-hue-rotate-0 to backdrop-hue-rotate-180 - In 15deg increments

Invert

• backdrop-invert-0 to backdrop-invert - Invert filter

Saturate

• backdrop-saturate-0 to backdrop-saturate-200 - In 50 unit increments

Sepia

• backdrop-sepia-0 to backdrop-sepia - Sepia filter

Table Utilities

Table Layout

• table-auto - Automatic table layout
• table-fixed - Fixed table layout

Border Collapse

• border-collapse - Collapse borders
• border-separate - Separate borders

Caption Side

• caption-top - Caption on top
• caption-bottom - Caption on bottom

Table Cell Alignment

• table-cell - Display as table cell
• table-row - Display as table row
• table-header-group - Display as table header
• table-row-group - Display as table row group
• table-footer-group - Display as table footer
• table-column-group - Display as table column group
• table-column - Display as table column

Examples

Animations

<div class="animate-spin">
  Loading...
</div>

<div class="animate-pulse">
  Loading...
</div>

Transforms

<div class="scale-150 rotate-45">
  Scaled and rotated
</div>

<div class="hover:scale-110 transition">
  Scale on hover
</div>

Backdrop Filters

<div class="backdrop-blur-md bg-white/30">
  Frosted glass effect
</div>

<div class="backdrop-brightness-110">
  Brighter backdrop
</div>

Tables

<table class="table-auto border-collapse">
  <thead class="table-header-group">
    <tr class="table-row">
      <th class="table-cell">Header</th>
    </tr>
  </thead>
  <tbody class="table-row-group">
    <tr class="table-row">
      <td class="table-cell">Cell</td>
    </tr>
  </tbody>
</table>

Development

Testing

# Run all tests
pnpm test

# Run tests in watch mode
pnpm test --watch

# Run tests with UI
pnpm test:ui

# Run tests with coverage
pnpm test:coverage

Build

# Build the package
pnpm build

# Build in watch mode
pnpm dev

Type Checking

# Run TypeScript type checking
pnpm typecheck

License

MIT