CSS in JS

Aidos UI uses a custom CSS-in-JS system called jss. Every component accepts a jss prop for styling, and the library includes utilities for theming, responsive design, and type-safe CSS variables.

The jss prop

All components accept a jss prop that works like inline styles but with additional capabilities:

<BaseView jss={{ backgroundColor: "red", padding: 12 }} />

Internally, each property becomes an atomic CSS class with a deterministic hash, enabling server-side rendering and hydration:

<style>
  .x1uc1pme {
    background: red;
  }
  .x1kbdebd {
    padding: 12px;
  }
</style>
<div class="x1uc1pme x1kbdebd" />

Arrays and conditionals

The jss prop accepts arrays and falsy values for conditional styling:

<BaseView
  jss={[
    { padding: 16 },
    isActive && { backgroundColor: "blue" },
    isDisabled && { opacity: 0.5 },
  ]}
/>

Automatic pixel conversion

Numeric values are automatically converted to pixels for dimensional properties:

<BaseView jss={{ padding: 16, fontSize: 14, opacity: 0.5 }} />
// Results in: padding: 16px; font-size: 14px; opacity: 0.5;

Pseudo-selectors

Use string keys for pseudo-classes and pseudo-elements:

// Hover state
jss({ ":hover": { backgroundColor: "blue" } });

// Focus state
jss({ ":focus": { outline: "2px solid blue" } });

// First child
jss({ ":first-child": { marginTop: 0 } });

Descendant selectors

Target child elements with space-prefixed selectors:

// All child divs
jss({ " div": { padding: 8 } });

// Direct children
jss({ " > span": { color: "red" } });

Media queries

Use media query strings as keys:

jss({
  padding: 8,
  "@media (min-width: 750px)": {
    padding: 16,
  },
});

Responsive helpers

The library provides helper functions for common breakpoints:

import { mobile, tablet, laptop, desktop } from "aidos-ui";

<BaseView
  jss={[{ padding: 8 }, tablet({ padding: 16 }), desktop({ padding: 24 })]}
/>;

CSS variables

Use the cssVar() helper for type-safe access to theme variables:

import { cssVar } from "aidos-ui";

<BaseView
  jss={{
    backgroundColor: cssVar("--primary-background"),
    color: cssVar("--primary-text"),
    padding: cssVar("--spacing-m"),
  }}
/>;

Materials

Materials are named, reusable surface treatments. The shared Material type keeps the vocabulary consistent across components, while getMaterial() lets custom surface components use the same treatment.

import { BaseView, getMaterial, type Material } from "aidos-ui";

const material: Material = "aurora"; // "dawn" | "mist" | "twilight"

<BaseView jss={getMaterial(material)} />;

Prefer a component's material prop when it exposes one. Use getMaterial() when building a new surface component.

Available CSS variables

Colors

Text colors

Interactive states

Button backgrounds

Spacing

Border radius

Using toClassnames directly

For custom components, use toClassnames() to convert style objects to class names:

import { toClassnames } from "aidos-ui";

function CustomComponent({ active }) {
  return (
    <div
      className={toClassnames([
        { padding: 16, borderRadius: 8 },
        active && { backgroundColor: "blue" },
      ])}
    >
      Content
    </div>
  );
}