tokens

Documentation

Index

• Variables
• type Bezier
• type ColorScale
• type ColorTokens
• type ElevationLevel
• type ElevationScale
• type MotionScale
• type RadiusScale
• type SpacingScale
• type TypeScale

Variables

var (
	Slate = ColorScale{
		C50:  color.NRGBA{0xf8, 0xfa, 0xfc, 0xff},
		C100: color.NRGBA{0xf1, 0xf5, 0xf9, 0xff},
		C200: color.NRGBA{0xe2, 0xe8, 0xf0, 0xff},
		C300: color.NRGBA{0xcb, 0xd5, 0xe1, 0xff},
		C400: color.NRGBA{0x94, 0xa3, 0xb8, 0xff},
		C500: color.NRGBA{0x64, 0x74, 0x8b, 0xff},
		C600: color.NRGBA{0x47, 0x55, 0x69, 0xff},
		C700: color.NRGBA{0x33, 0x41, 0x55, 0xff},
		C800: color.NRGBA{0x1e, 0x29, 0x3b, 0xff},
		C900: color.NRGBA{0x0f, 0x17, 0x2a, 0xff},
		C950: color.NRGBA{0x02, 0x06, 0x17, 0xff},
	}
	Blue = ColorScale{
		C50:  color.NRGBA{0xef, 0xf6, 0xff, 0xff},
		C100: color.NRGBA{0xdb, 0xea, 0xfe, 0xff},
		C200: color.NRGBA{0xbf, 0xdb, 0xfe, 0xff},
		C300: color.NRGBA{0x93, 0xc5, 0xfd, 0xff},
		C400: color.NRGBA{0x60, 0xa5, 0xfa, 0xff},
		C500: color.NRGBA{0x3b, 0x82, 0xf6, 0xff},
		C600: color.NRGBA{0x25, 0x63, 0xeb, 0xff},
		C700: color.NRGBA{0x1d, 0x4e, 0xd8, 0xff},
		C800: color.NRGBA{0x1e, 0x40, 0xaf, 0xff},
		C900: color.NRGBA{0x1e, 0x3a, 0x8a, 0xff},
		C950: color.NRGBA{0x17, 0x25, 0x54, 0xff},
	}
	Red = ColorScale{
		C50:  color.NRGBA{0xfe, 0xf2, 0xf2, 0xff},
		C100: color.NRGBA{0xfe, 0xe2, 0xe2, 0xff},
		C200: color.NRGBA{0xfe, 0xca, 0xca, 0xff},
		C300: color.NRGBA{0xfc, 0xa5, 0xa5, 0xff},
		C400: color.NRGBA{0xf8, 0x71, 0x71, 0xff},
		C500: color.NRGBA{0xef, 0x44, 0x44, 0xff},
		C600: color.NRGBA{0xdc, 0x26, 0x26, 0xff},
		C700: color.NRGBA{0xb9, 0x1c, 0x1c, 0xff},
		C800: color.NRGBA{0x99, 0x1b, 0x1b, 0xff},
		C900: color.NRGBA{0x7f, 0x1d, 0x1d, 0xff},
		C950: color.NRGBA{0x45, 0x0a, 0x0a, 0xff},
	}

	White = color.NRGBA{0xff, 0xff, 0xff, 0xff}
)

Palette families taken verbatim from the Tailwind CSS v3 default config.

var DefaultDark = ColorTokens{
	Background:       Slate.C950,
	OnBackground:     Slate.C50,
	Surface:          Slate.C900,
	OnSurface:        Slate.C100,
	SurfaceVariant:   Slate.C800,
	OnSurfaceVariant: Slate.C300,
	Primary:          Blue.C400,
	OnPrimary:        Slate.C900,
	Secondary:        Slate.C400,
	OnSecondary:      Slate.C900,
	Error:            Red.C400,
	OnError:          Slate.C900,
	Outline:          Slate.C700,
}

DefaultDark is the canonical dark-mode colour token set.

var DefaultLight = ColorTokens{
	Background:       White,
	OnBackground:     Slate.C900,
	Surface:          Slate.C50,
	OnSurface:        Slate.C900,
	SurfaceVariant:   Slate.C100,
	OnSurfaceVariant: Slate.C700,
	Primary:          Blue.C700,
	OnPrimary:        White,
	Secondary:        Slate.C600,
	OnSecondary:      White,
	Error:            Red.C700,
	OnError:          White,
	Outline:          Slate.C300,
}

DefaultLight is the canonical light-mode colour token set.

var DefaultTypeScale = TypeScale{
	DisplayLarge:  57,
	DisplayMedium: 45,
	DisplaySmall:  36,

	HeadlineLarge:  32,
	HeadlineMedium: 28,
	HeadlineSmall:  24,

	TitleLarge:  22,
	TitleMedium: 16,
	TitleSmall:  14,

	LabelLarge:  14,
	LabelMedium: 12,
	LabelSmall:  11,

	BodyLarge:  16,
	BodyMedium: 14,
	BodySmall:  12,
}

DefaultTypeScale is the canonical MD3 type scale.

var Elevation = ElevationScale{
	Level0: 0,
	Level1: 1,
	Level2: 3,
	Level3: 6,
	Level4: 8,
	Level5: 12,
}

Elevation is the default scale instance.

var Motion = MotionScale{
	DurXFast:  75 * time.Millisecond,
	DurFast:   150 * time.Millisecond,
	DurNormal: 250 * time.Millisecond,
	DurSlow:   400 * time.Millisecond,
	DurXSlow:  700 * time.Millisecond,

	EaseLinear: Bezier{P1: [2]float32{0, 0}, P2: [2]float32{1, 1}},
	EaseIn:     Bezier{P1: [2]float32{0.4, 0}, P2: [2]float32{1, 1}},
	EaseOut:    Bezier{P1: [2]float32{0, 0}, P2: [2]float32{0.2, 1}},
	EaseInOut:  Bezier{P1: [2]float32{0.4, 0}, P2: [2]float32{0.2, 1}},
}

Motion is the default scale instance.

var Radius = RadiusScale{
	None: 0,
	Sm:   2,
	Base: 4,
	Md:   6,
	Lg:   8,
	Xl:   12,
	Xl2:  16,
	Xl3:  24,
	Full: 9999,
}

Radius is the default scale instance.

var Spacing = SpacingScale{
	S0:  0,
	S1:  4,
	S2:  8,
	S3:  12,
	S4:  16,
	S5:  20,
	S6:  24,
	S8:  32,
	S10: 40,
	S12: 48,
	S16: 64,
	S20: 80,
	S24: 96,
}

Spacing is the default scale instance.

Types

type Bezier

type Bezier struct {
	P1, P2 [2]float32
}

Bezier holds the two inner control points of a cubic-bezier easing curve, equivalent to CSS cubic-bezier(P1.X, P1.Y, P2.X, P2.Y).

type ColorScale

type ColorScale struct {
	C50, C100, C200, C300, C400, C500, C600, C700, C800, C900, C950 color.NRGBA
}

ColorScale holds the eleven Tailwind shade stops for one hue family (50–950).

type ColorTokens

type ColorTokens struct {
	Background       color.NRGBA
	OnBackground     color.NRGBA
	Surface          color.NRGBA
	OnSurface        color.NRGBA
	SurfaceVariant   color.NRGBA
	OnSurfaceVariant color.NRGBA
	Primary          color.NRGBA
	OnPrimary        color.NRGBA
	Secondary        color.NRGBA
	OnSecondary      color.NRGBA
	Error            color.NRGBA
	OnError          color.NRGBA
	Outline          color.NRGBA // border/divider; no "On" counterpart
}

ColorTokens holds the semantic foreground/background token pairs consumed by every Prism component. Each "On" field is the recommended text/icon colour rendered on top of its companion field.

type ElevationLevel

type ElevationLevel int

ElevationLevel selects an entry on the ElevationScale by name. The dp value for a given level is read from the Elevation instance.

const (
	Level0 ElevationLevel = iota
	Level1
	Level2
	Level3
	Level4
	Level5
)

type ElevationScale

type ElevationScale struct {
	Level0 float32 // 0 dp
	Level1 float32 // 1 dp
	Level2 float32 // 3 dp
	Level3 float32 // 6 dp
	Level4 float32 // 8 dp
	Level5 float32 // 12 dp
}

ElevationScale holds shadow-depth stops in device-independent pixels, following Material Design 3 elevation levels 0–5.

type MotionScale

type MotionScale struct {
	// Duration stops — strictly increasing fastest → slowest.
	DurXFast  time.Duration // 75 ms
	DurFast   time.Duration // 150 ms
	DurNormal time.Duration // 250 ms
	DurSlow   time.Duration // 400 ms
	DurXSlow  time.Duration // 700 ms

	// Easing presets (CSS standard curves).
	EaseLinear Bezier
	EaseIn     Bezier
	EaseOut    Bezier
	EaseInOut  Bezier
}

MotionScale holds duration stops and easing presets for animation tokens.

type RadiusScale

type RadiusScale struct {
	None float32 // 0 dp
	Sm   float32 // 2 dp
	Base float32 // 4 dp
	Md   float32 // 6 dp
	Lg   float32 // 8 dp
	Xl   float32 // 12 dp
	Xl2  float32 // 16 dp
	Xl3  float32 // 24 dp
	Full float32 // 9999 dp — pill / full-circle
}

RadiusScale holds border-radius stops in device-independent pixels, mirroring the Tailwind border-radius naming convention.

type SpacingScale

type SpacingScale struct {
	S0  float32 // 0 dp
	S1  float32 // 4 dp
	S2  float32 // 8 dp
	S3  float32 // 12 dp
	S4  float32 // 16 dp
	S5  float32 // 20 dp
	S6  float32 // 24 dp
	S8  float32 // 32 dp
	S10 float32 // 40 dp
	S12 float32 // 48 dp
	S16 float32 // 64 dp
	S20 float32 // 80 dp
	S24 float32 // 96 dp
}

SpacingScale holds named stops on the 4-pt grid, Tailwind-aligned. Field names match the Tailwind spacing key; values are device-independent pixels.

type TypeScale

type TypeScale struct {
	DisplayLarge  float32 // 57 dp
	DisplayMedium float32 // 45 dp
	DisplaySmall  float32 // 36 dp

	HeadlineLarge  float32 // 32 dp
	HeadlineMedium float32 // 28 dp
	HeadlineSmall  float32 // 24 dp

	TitleLarge  float32 // 22 dp
	TitleMedium float32 // 16 dp
	TitleSmall  float32 // 14 dp

	LabelLarge  float32 // 14 dp
	LabelMedium float32 // 12 dp
	LabelSmall  float32 // 11 dp

	BodyLarge  float32 // 16 dp
	BodyMedium float32 // 14 dp
	BodySmall  float32 // 12 dp
}

TypeScale holds font-size stops for each Material Design 3 type role, expressed in device-independent pixels (dp).