The styling engine built for design systems

const Button = tasty({
  as: 'button',
  styles: {
    fill: {
      '': '#purple',
      ':hover': '#purple-04',
      ':active': '#purple-05',
    },
    color: '#white',
    padding: '1.5x 3x',
    radius: 'round',
    border: 'none',
    cursor: 'pointer',
    transition: 'theme',
  },
});

/* Default: not hovered and not active */
.t0.t0:not(:hover):not(:active) {
  background: var(--purple-color);
}

/* Hovered but not active */
.t0.t0:hover:not(:active) {
  background: var(--purple-04-color);
}

/* Active */
.t0.t0:active {
  background: var(--purple-05-color);
}

/* Base styles (always applied) */
.t0.t0 {
  color: white;
  padding: 12px 24px;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  transition: all var(--transition-duration)
    var(--transition-timing-function);
}

// Define a reusable state alias
configure({
  states: {
    '@dark': '@root(schema=dark) | (!@root(schema) & @media(prefers-color-scheme: dark))',
  },
});

// Use the alias in styles
const Text = tasty({
  // You can also define `@dark` here
  styles: {
    color: {
      '': '#text',
      '@dark': '#text-on-dark',
    },
  },
});

/* Branch 1: Explicit dark schema */
:root[data-schema="dark"] .t0.t0 {
  color: var(--text-on-dark-color);
}

/* Branch 2: No schema attribute + OS prefers dark */
@media (prefers-color-scheme: dark) {
  :root:not([data-schema]) .t0.t0 {
    color: var(--text-on-dark-color);
  }
}

/* Default: no schema + OS does not prefer dark */
@media (not (prefers-color-scheme: dark)) {
  :root:not([data-schema="dark"]) .t0.t0 {
    color: var(--text-color);
  }
}

/* Default: schema is set but not dark */
:root:not([data-schema="dark"])[data-schema] .t0.t0 {
  color: var(--text-color);
}

State Maps

Style any property based on pseudo‑classes, data attributes, media queries, and more.

const Button = tasty({
  as: 'button',
  styles: {
    fill: {
      '': '#primary-accent-surface',
      ':hover': '#primary-icon',
      ':active': '#primary-text',
      '[disabled]': '#primary-disabled',
    },
    cursor: {
      '': 'pointer',
      '[disabled]': 'not-allowed',
    },
    transition: 'theme',
  },
});

Responsive Design

Define breakpoints once, use @mobile and @tablet as states anywhere.

configure({
  states: {
    '@tablet': '@media(640px <= w < 1024px)',
    '@mobile': '@media(w < 640px)',
  },
});

const Layout = tasty({
  styles: {
    display: 'grid',
    gridColumns: {
      '': '1sf 1sf 1sf',
      '@tablet': '1sf 1sf',
      '@mobile': '1sf',
    },
    gap: {
      '': '4x',
      '@mobile': '2x',
    },
    padding: {
      '': '8x 4x',
      '@mobile': '4x 2x',
    },
  },
});

Sub‑Elements

Style inner elements from the parent. Typed sub‑components via the elements prop.

const Card = tasty({
  styles: {
    padding: '4x',
    radius: '1cr',
    border: true,
    Title: {
      $: '>',
      preset: 'h3',
      color: '#primary-accent-text',
    },
    Content: {
      $: '>',
      preset: 't2',
      color: '#primary-text',
    },
  },
  elements: { Title: 'h3', Content: 'div' },
});

// Usage:
// <Card>
//   <Card.Title>Hello</Card.Title>
//   <Card.Content>World</Card.Content>
// </Card>

Configuration

Set up global states, custom units, functions, and reusable style recipes — all in one place.

import { configure } from '@tenphi/tasty';

configure({
  states: {
    '@dark': '@root(theme=dark) | @media(prefers-color-scheme: dark)',
    '@mobile': '@media(w < 640px)',
  },
  units: {
    col: (n) => `${(n / 12) * 100}%`,
    gap: '4px',
  },
  funcs: {
    fluid: ([min, max]) =>
      `clamp(${min.output}, 2.5vw + 1rem, ${max.output})`,
  },
  recipes: {
    card: {
      padding: '3x',
      fill: '#surface',
      radius: '1cr',
      border: true,
      shadow: '0 1x 3x #shadow-sm',
    },
  },
});