Mixins / foldkit-mixins/theme

OklchKnobs

interface · packages/mixins/src/theme/oklch.ts:13

interface OklchKnobs {
  readonly accent: {
    readonly h: number
    readonly c: number
    readonly l: string
    readonly dark?: {
      readonly l?: string
      readonly c?: number
    }
  }
  readonly secondaryHueShift?: number
  readonly tertiaryHueShift?: number
  readonly neutral?: {
    readonly h: number
  }
  readonly surfaceSaturation?: number
  readonly surfaceContrast?: string
  readonly contrastFactor?: number
  readonly syntaxChroma?: number
  readonly menu?: {
    readonly accent?: 'subtle' | 'bold'
    readonly color?:
      'default' | 'inverted' | 'translucent' | 'inverted-translucent'
  }
  readonly feedback?: {
    readonly success?: number
    readonly warning?: number
    readonly error?: number
    readonly info?: number
  }
}

Members

OklchKnobs.accent

property · packages/mixins/src/theme/oklch.ts:15

readonly accent: {
  readonly h: number
  readonly c: number
  readonly l: string
  readonly dark?: {
    readonly l?: string
    readonly c?: number
  }
}

The brand color: hue in degrees, chroma 0–0.4, lightness as a percentage.

OklchKnobs.secondaryHueShift

property · packages/mixins/src/theme/oklch.ts:23

readonly secondaryHueShift?: number

Degrees added to the accent hue for the secondary and tertiary families.

OklchKnobs.tertiaryHueShift

property · packages/mixins/src/theme/oklch.ts:24

readonly tertiaryHueShift?: number

OklchKnobs.neutral

property · packages/mixins/src/theme/oklch.ts:31

readonly neutral?: {
  readonly h: number
}

The hue of the neutrals (surfaces, text, outlines, the shadow), apart from the accent's, as a base color is: a warm stone under a blue accent. Without it the neutrals take the accent's hue, and follow it when the accent-h knob moves.

OklchKnobs.surfaceSaturation

property · packages/mixins/src/theme/oklch.ts:33

readonly surfaceSaturation?: number

Chroma of neutral surfaces; 0 is gray.

OklchKnobs.surfaceContrast

property · packages/mixins/src/theme/oklch.ts:35

readonly surfaceContrast?: string

How far apart the surface steps are, 0–100%.

OklchKnobs.contrastFactor

property · packages/mixins/src/theme/oklch.ts:37

readonly contrastFactor?: number

Multiplies text chroma.

OklchKnobs.syntaxChroma

property · packages/mixins/src/theme/oklch.ts:39

readonly syntaxChroma?: number

Chroma of the code colors (syntax-*), 0–0.4; default 0.14.

property · packages/mixins/src/theme/oklch.ts:47

readonly menu?: {
  readonly accent?: 'subtle' | 'bold'
  readonly color?:
    'default' | 'inverted' | 'translucent' | 'inverted-translucent'
}

How menus, listboxes and comboboxes draw their panels, as shadcn's menu options: the row the keys or pointer are on in a tint of the text (subtle, the default) or the accent's fill (bold); the panel in the page's surface (default), the opposite scheme's (inverted), or either see-through over a blur (translucent, inverted-translucent).

OklchKnobs.feedback

property · packages/mixins/src/theme/oklch.ts:52

readonly feedback?: {
  readonly success?: number
  readonly warning?: number
  readonly error?: number
  readonly info?: number
}

Hues of the feedback families.