テーマの調整

/* app/globals.css */
@import '@novi-ui/core/base.css';
@import '@novi-ui/raster/raster.css';

:root {
  --novi-color-primary: oklch(58% 0.18 265);
  --novi-color-primary-fg: oklch(99% 0 0);
}

[data-novi-scheme='dark'] {
  --novi-color-primary: oklch(72% 0.15 265);
}

import { Button, Card, CardBody, CardHeader } from '@novi-ui/raster'

// slot ごとにクラスを足す。variant のクラスを上書きしたいときもこれを使う。
export function WideSaveButton() {
  return (
    <Button
      color="primary"
      classNames={{
        root: 'w-full justify-between',
        label: 'tracking-wide',
      }}
    >
      保存
    </Button>
  )
}

// どの slot があるかは各コンポーネントのページの slot 表にある。
export function TightCard() {
  return (
    <Card classNames={{ header: 'pb-1', body: 'pt-1' }}>
      <CardHeader>売上</CardHeader>
      <CardBody>¥1,240,000</CardBody>
    </Card>
  )
}

pnpm add tailwind-variants

import { Button, buttonStyles } from '@novi-ui/raster'
import { tv } from 'tailwind-variants'

// slot ベースの定義では `base` は効かない。**必ず `slots` を使う。**
export const wideButtonStyles = tv({
  extend: buttonStyles,
  slots: {
    root: 'w-full justify-between',
  },
})

// 拡張した styles は自分で呼び、結果を classNames に渡す。
export function WideButton() {
  const s = wideButtonStyles({ size: 'lg' })

  return (
    <Button size="lg" classNames={{ root: s.root() }}>
      続ける
    </Button>
  )
}