Typed styling for design systems

import { defineSystem, defineToken } from '@toned/core'

const colours = {
  info: { soft: '#eef2ff', line: '#bac8ff', solid: '#284bdd' },
  success: { soft: '#eaf6ef', line: '#cde9d8', solid: '#1d7a4c' },
  danger: { soft: '#fdecea', line: '#f3c9c4', solid: '#b3261e' },
} as const

const shapes = {
  card: { padding: 20, borderRadius: 12 },
  compact: { padding: 12, borderRadius: 12 },
  pill: { padding: '2px 10px', borderRadius: 999 },
} as const

const text = {
  title: { fontSize: 18, fontWeight: 600, color: '#17234b' },
  body: { fontSize: 15, fontWeight: 400, color: '#34405f' },
  label: { fontSize: 12, fontWeight: 600, color: '#ffffff' },
} as const

type Tone = keyof typeof colours

// A token is one design decision: its name, the values it allows, and what
// each value means. A stylesheet can use these values and nothing else.
export const ui = defineSystem({
  id: 'notice',
  tokens: {
    tint: defineToken({
      values: ['info', 'success', 'danger'],
      resolve: (tone: Tone) => ({
        backgroundColor: colours[tone].soft,
        borderColor: colours[tone].line,
        borderWidth: 1,
        borderStyle: 'solid',
      }),
    }),
    fill: defineToken({
      values: ['info', 'success', 'danger'],
      resolve: (tone: Tone) => ({ backgroundColor: colours[tone].solid }),
    }),
    shape: defineToken({
      values: ['card', 'compact', 'pill'],
      resolve: (shape: keyof typeof shapes) => shapes[shape],
    }),
    text: defineToken({
      values: ['title', 'body', 'label'],
      resolve: (style: keyof typeof text) => text[style],
    }),
    stack: defineToken({
      values: [4, 8] as const,
      resolve: (gap) => ({
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'flex-start',
        gap,
      }),
    }),
  },
})

export const { stylesheet } = ui

import type { Variants } from '@toned/core'

import { stylesheet } from './system.ts'

type NoticeVariants = {
  tone: 'info' | 'success' | 'danger'
  size: 'regular' | 'compact'
}

export const noticeStyles = stylesheet({
  Root: { tint: 'info', shape: 'card', stack: 8 },
  Badge: { $kind: 'text', fill: 'info', shape: 'pill', text: 'label' },
  Title: { $kind: 'text', text: 'title' },
  Body: { $kind: 'text', text: 'body' },
}).variants(($: Variants<NoticeVariants>) => ({
  [$.tone('success')]: {
    Root: { tint: 'success' },
    Badge: { fill: 'success' },
  },
  [$.tone('danger')]: {
    Root: { tint: 'danger' },
    Badge: { fill: 'danger' },
  },
  [$.size('compact')]: {
    Root: { shape: 'compact', stack: 4 },
    Title: { text: 'body' },
  },
}))

import { createElements } from '@toned/react'
import type { ReactNode } from 'react'

import { noticeStyles } from './styles.ts'

const Parts = createElements(noticeStyles)

export function Notice({
  tone,
  size,
  label,
  title,
  children,
}: {
  tone: 'info' | 'success' | 'danger'
  size: 'regular' | 'compact'
  label: string
  title: string
  children: ReactNode
}) {
  return (
    <Parts tone={tone} size={size}>
      <Parts.Root>
        <Parts.Badge as="span">{label}</Parts.Badge>
        <Parts.Title as="strong">{title}</Parts.Title>
        <Parts.Body as="p">{children}</Parts.Body>
      </Parts.Root>
    </Parts>
  )
}

import { createInlineRenderer } from '@toned/core/server'

import { noticeStyles } from './styles.ts'
import { ui } from './system.ts'

// No React and no stylesheet: the core resolves the sheet to plain props.
const email = createInlineRenderer(ui, { tokens: {} })

export function noticeEmailProps(variants: {
  tone: 'info' | 'success' | 'danger'
  size: 'regular' | 'compact'
}) {
  return email.resolve(noticeStyles, { variants })
}