Utils

import type { CSS } from "@hypergood/css"

export const styleConfig = {
  utils: {
    gridCols: (columnCount: number) => ({
      gridTemplateColumns: `repeat(${columnCount}, minmax(0, 1fr))`,
    }),
  }
} satisfies StyleConfig

function Row(props) {
  return (
    <div 
      {...props} 
      css={{
        gridCols: 4,
      }} 
    />
  )
}

.description {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

import type { CSS } from "@hypergood/css"

export const styleConfig = {
  utils: {
    lineClamp: (lines: number) => ({
      overflow: "hidden",
      display: "-webkit-box",
      "-webkit-box-orient": "vertical"
      "-webkit-line-clamp": lines,
    }),
  }
} satisfies StyleConfig

function Description(props) {
  return (
    <div 
      {...props} 
      css={{
        lineClamp: 3,
      }} 
    />
  )
}

.description {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

import type { CSS } from "@hypergood/css"

export const styleConfig = {
  utils: {
    darkMode: (css: CSS) => ({
      '&[data-theme="dark"], [data-theme="dark"] &': css,
    }),
  }
} satisfies StyleConfig

function Card(props) {
  return (
    <div 
      {...props} 
      css={{
        backgroundColor: 'white',
        darkMode: {
          backgroundColor: 'black',
        },
      }} 
    />
  )
}

.button {
  background-color: white;
}
.button[data-theme="dark"], [data-theme="dark"] .button {
  background-color: black;
}