@gluonjs/atoms / packages/atoms/src / UiAtomStyleOptions

Interface: UiAtomStyleOptions

Properties

id

readonly id: string

Stable transport and ownership identity for this component stylesheet.

order?

readonly optional order?: number

Stable order inside the Atom cascade layer. Defaults to 100.

scope?

readonly optional scope?: string

sheet

readonly sheet: CSSStyleSheet

Example

Name one constructable stylesheet so defineUiAtom can create immutable Atom ownership metadata:

import { css } from '@gluonjs/core';
import {
  defineUiAtom,
  type DefineUiAtomOptions,
  type LooseUiAtomProps,
  type UiAtomBaseProps,
  type UiAtomProps,
  type UiAtomStyleOptions,
} from '@gluonjs/atoms';

interface TextLinkProps extends UiAtomBaseProps {
  readonly href?: string;
}

const style = {
  id: 'goods-text-link',
  sheet: css`:where(.goods-text-link) { text-underline-offset: 0.2em; }`,
} satisfies UiAtomStyleOptions;
const options = {
  displayName: 'TextLink',
  tag: ({ href }) => href ? 'a' : 'span',
  style,
  nativeProps: ({ href, children }, tag) => ({
    class: 'goods-text-link',
    children,
    ...(tag === 'a' ? { href } : {}),
  }),
} satisfies DefineUiAtomOptions<TextLinkProps, 'a' | 'span'>;
const TextLink = defineUiAtom(options);
const props = { href: '/shop', children: 'Shop' } satisfies UiAtomProps<TextLinkProps, 'a' | 'span'>;
const legacy = { slot: { content: 'Legacy label' } } satisfies LooseUiAtomProps;
console.log(TextLink(props), legacy.slot?.content);