Mixins / foldkit-mixins/theme

Knob

namespace · packages/mixins/src/theme/knob.ts:8

namespace Knob {}

Knobs: the typed inputs a theme sets. Each knob is a Schema for the value a theme writes, the CSS variables that value writes, and what those variables hold when no theme sets it (its default, or the expression it follows). Every token derives from knob variables, so a theme is only its knob values (docs/theme-knobs.md).

In the guides

Members

Knob.angle

function · packages/mixins/src/theme/knob.ts:80

function angle<const Name extends string>(
  options: Omit<Range<Name>, 'min' | 'max' | 'step'> &
    Partial<Pick<Range<Name>, 'min' | 'max' | 'step'>>,
): Knob<number, Name>

A number of degrees around the hue wheel.

Knob.Choice

interface · packages/mixins/src/theme/knob.ts:139

interface Choice<O extends Options> extends Knob<keyof O & string, Written<O>> {
  readonly options: {
    readonly [K in keyof O]: Variables<Written<O>>
  }
}

A knob that is one of its options, each in full, as write gives a chosen one.

Knob.choice

function · packages/mixins/src/theme/knob.ts:148

function choice<const O extends Options>(options: {
  readonly default: keyof O & string
  readonly options: O
  readonly title: string
  readonly description: string
}): Choice<O>

One of options, each the variables it writes: choosing spring writes the ease variable as var(--fk-motion-spring). Every option names the same variables, so switching writes each again.

Knob.Control

type · packages/mixins/src/theme/knob.ts:14

type Control =
  | {
      readonly kind: 'range'
      readonly min: number
      readonly max: number
      readonly step: number
      readonly unit: string
    }
  | {
      readonly kind: 'choice'
      readonly options: ReadonlyArray<string>
    }
  | {
      readonly kind: 'font'
    }

How a knob is drawn as a control: a range for a number, a choice of options, a font stack.

Knob.font

function · packages/mixins/src/theme/knob.ts:168

function font<const Name extends string>(options: {
  readonly variable: Name
  readonly default: string
  readonly follows?: string
  readonly title: string
  readonly description: string
}): Knob<string, Name>

A font stack: any non-empty CSS font-family value.

Knob.Knob

interface · packages/mixins/src/theme/knob.ts:30

interface Knob<Value, Names extends string = string> {
  readonly schema: Schema.Codec<Value>
  write(value: Value): Readonly<Partial<Record<Names, string>>>
  readonly unset: Variables<Names>
  readonly default: Value
  readonly title: string
  readonly description: string
  readonly control: Control
}

A knob of Value writing the variables Names. write gives those a value sets (a light-only value leaves the dark one out); unset gives every one, as no theme set it.

Knob.length

function · packages/mixins/src/theme/knob.ts:87

function length(
  unit: 'px' | 'em' | 'rem',
): <const Name extends string>(options: Range<Name>) => Knob<number, Name>

A length in unit, written with it (1px, -0.025em).

Knob.number

const · packages/mixins/src/theme/knob.ts:78

const number: <const Name extends string>(
  options: Range<Name>,
) => Knob<number, Name>

A plain number: a multiplier, a chroma.

Knob.percent

const · packages/mixins/src/theme/knob.ts:85

const percent: <const Name extends string>(
  options: Range<Name>,
) => Knob<number, Name>

A percentage, written with %.

Knob.Schemed

interface · packages/mixins/src/theme/knob.ts:95

interface Schemed<Light extends string, Dark extends string> extends Knob<
  | number
  | {
      readonly light?: number
      readonly dark?: number
    },
  Light | Dark
> {
  readonly light: Knob<number, Light>
  readonly dark: Knob<number, Dark>
}

A knob per scheme, and each half as a knob of its own: its range, its title.

Knob.schemed

function · packages/mixins/src/theme/knob.ts:103

function schemed<Light extends string, Dark extends string>(
  light: Knob<number, Light>,
  dark: Knob<number, Dark>,
): Schemed<Light, Dark>

Knob.Variables

type · packages/mixins/src/theme/knob.ts:11

type Variables<Names extends string = string> = Readonly<Record<Names, string>>

A knob's variables, by the name after --fk-knob-, each a CSS value.