LYTS exposes all CSS classes and custom properties, which are used by the components internally, as a JavaScript API:

import {
  boxStyles,
  stackStyles,
  rowStyles
  // ...
} from '@christiankaindl/lyts'

This makes it possible to add global styles targeting all or individual LYTS components. To use this feature a JavaScript based approach to styling is required, such as vanilla-extract, Stitches or styled-components.

For example, here we add a global outline for all Stack components, using vanilla-extract:

/* styles.css.ts */
import { stackStyles, toSelectorString } from '@christiankaindl/lyts'
import { globalStyle } from '@vanilla-extract/css'

// The stackStyles.stack className looks something like "box stack"
// The toSelectorString() function transforms it into a valid CSS selector -> ".box.stack"
const stackSelector = toSelectorString(stackStyles.stack)

// Apply an outline to all Stack components
globalStyle(stackSelector, {
  outline: '1px solid blue'
})

Of course you can use this selector any way you like and construct more complex selectors with it:

/* MyComponent.css.ts */
import { boxStyles, toSelectorString } from '@christiankaindl/lyts'
import { style, globalStyle } from '@vanilla-extract/css'

// Create a className for your component
export const myComponent = style({})
const boxSelector = toSelectorString(boxStyles.box)

// Target all LYTS components in MyComponent, and increase the font-size of the first child
globalStyle(`${myComponent} ${boxSelector} > *:first-child`, {
  fontSize: '1.2em'
})

Box is inherited by all components, so you can use it to target every LYTS component at once.

This documentation site uses the class names API to render examples with colored outlines, as well as to add global styles for the HTML <a> tag.