motif

Documentation

Overview

Package motif contains the Mechane themes.

Index

• Variables
• type ElmMotif
• type Motif
  • func (m Motif) ToElmMotif() ElmMotif
  • func (m Motif) ToTypescriptMotif() TypescriptMotif
• type TypescriptMotif

Variables

var Default = MetroOrange

Default motif.

var MetroOrange = Motif{
	MotifName: "MetroOrange",

	Accent:                 rgb.Deepskyblue,
	BoxShadow:              "0px 0.1em 0.5em 1px DimGray",
	ButtonBackground:       rgb.White.ToRGBA(0.85),
	ButtonOpaqueBackground: rgb.White,
	Error:                  rgb.Red,
	Primary:                rgb.Darkorange,
	PrimaryGlow:            metroGlow,
	PrimaryLight:           rgb.Orange,
	Ready:                  rgb.PastelYellow,
	TextNormal:             rgb.Black,
	TextPassive:            rgb.Darkgrey,
	Warning:                rgb.PastelRed,

	TextBigPassive: rgb.Lightgray,

	BoxShadowGlow:         fmt.Sprintf("0px 0px 0.7em 0.2em %s", metroGlow),
	ButtonHoverBackground: rgb.White.ToRGBA(0.95),
	Disabled:              rgb.Lightgray,
	InputBorderFocus:      rgb.Dodgerblue,
	InputBorderPrimary:    rgb.Gold,
	PreBackground:         rgb.CosmicLatte.ToRGBA(0.85),
	StitchingMajor:        rgb.Orange,
	StitchingMinor1:       rgb.Deepskyblue,
	StitchingMinor2:       rgb.Gold,
	StitchingMinor3:       rgb.Silver,

	ButtonBorder:       "0.4",
	ButtonBorderRadius: "1.2",
	ButtonIconFontSize: "2",
	ButtonPadding:      "0.6",
}

MetroOrange is an orangey themed motif.

var SchematicPrussian = Motif{
	MotifName: "SchematicPrussian",

	Accent:                 rgb.Violet,
	BoxShadow:              "0px 0.1em 0.5em 1px DimGray",
	ButtonBackground:       rgb.White.ToRGBA(0.85),
	ButtonOpaqueBackground: rgb.White,
	Error:                  rgb.Red,
	Primary:                rgb.PrussianBlue,
	PrimaryGlow:            colour.RGB{R: 0, G: 150, B: 184},
	PrimaryLight:           rgb.PrussianBlueLight,
	Ready:                  rgb.Lightseagreen,
	TextNormal:             rgb.Black,
	TextPassive:            rgb.Darkgrey,
	Warning:                rgb.Orange,

	TextBigPassive: rgb.Lightgray,

	BoxShadowGlow:         fmt.Sprintf("0px 0px 0.7em 0.2em %s", schematicGlow),
	ButtonHoverBackground: rgb.White.ToRGBA(0.95),
	Disabled:              rgb.Lightgray,
	InputBorderFocus:      rgb.Dodgerblue,
	InputBorderPrimary:    rgb.Gold,
	PreBackground:         rgb.CosmicLatte.ToRGBA(0.85),
	StitchingMajor:        rgb.PrussianBlueLight,
	StitchingMinor1:       rgb.Violet,
	StitchingMinor2:       rgb.Gold,
	StitchingMinor3:       rgb.Silver,

	ButtonBorder:       "0.4",
	ButtonBorderRadius: "1.2",
	ButtonIconFontSize: "2",
	ButtonPadding:      "0.6",
}

SchematicPrussian is a bluey themed motif.

Types

type ElmMotif

type ElmMotif struct {
	MotifName string `json:"motifName"`

	Accent                 colour.RGBA `json:"accent"`
	BoxShadow              string      `json:"boxShadow"`
	ButtonBackground       colour.RGBA `json:"buttonBackground"`
	ButtonOpaqueBackground colour.RGBA `json:"buttonOpaqueBackground"`
	Error                  colour.RGBA `json:"error"`
	Primary                colour.RGBA `json:"primary"`
	PrimaryGlow            colour.RGBA `json:"primaryGlow"`
	PrimaryLight           colour.RGBA `json:"primaryLight"`
	Ready                  colour.RGBA `json:"ready"`
	TextNormal             colour.RGBA `json:"textNormal"`
	TextPassive            colour.RGBA `json:"textPassive"`
	Warning                colour.RGBA `json:"warning"`

	TextBigPassive colour.RGBA `json:"textBigPassive"`

	ButtonBorder       string `json:"buttonBorder"`
	ButtonBorderRadius string `json:"buttonBorderRadius"`
	ButtonIconFontSize string `json:"buttonIconFontSize"`
	ButtonPadding      string `json:"buttonPadding"`

	ButtonHeight float64 `json:"buttonHeight"`
}

An ElmMotif is a motif in a format the Elm language integrant's JSON decoder can parse.

type Motif

type Motif struct {
	// A unique motif name.
	MotifName string

	// Shared colours.
	Accent                 colour.RGB // Ephemeral button hover icon.
	BoxShadow              string
	ButtonBackground       colour.RGBA
	ButtonOpaqueBackground colour.RGB // Used when combining icons to obscure sections below.
	Error                  colour.RGB // Ephemeral background for anomalous shrinker.
	Primary                colour.RGB
	PrimaryGlow            colour.RGB
	PrimaryLight           colour.RGB
	Ready                  colour.RGB
	TextNormal             colour.RGB
	TextPassive            colour.RGB
	Warning                colour.RGB

	// Elm integrant colours.
	TextBigPassive colour.RGB

	// Typescript integrant/overlay item colours.
	BoxShadowGlow         string
	ButtonHoverBackground colour.RGBA
	Disabled              colour.RGB
	InputBorderFocus      colour.RGB
	InputBorderPrimary    colour.RGB
	PreBackground         colour.RGBA
	StitchingMajor        colour.RGB
	StitchingMinor1       colour.RGB
	StitchingMinor2       colour.RGB
	StitchingMinor3       colour.RGB

	ButtonBorder       string
	ButtonBorderRadius string
	ButtonIconFontSize string
	ButtonPadding      string
}

A Motif is a cohesive collection of stylistic properties used to style the UI.

func (Motif) ToElmMotif

func (m Motif) ToElmMotif() ElmMotif

ToElmMotif suitable for decoding by the Elm language integrant.

func (Motif) ToTypescriptMotif

func (m Motif) ToTypescriptMotif() TypescriptMotif

ToTypescriptMotif suitable for use by the Typescript language integrant.

type TypescriptMotif

type TypescriptMotif struct {
	MotifName string `json:"motifName"`

	Accent                 string `json:"accent"`
	BoxShadow              string `json:"boxShadow"`
	ButtonBackground       string `json:"buttonBackground"`
	ButtonOpaqueBackground string `json:"buttonOpaqueBackground"`
	Error                  string `json:"error"`
	Primary                string `json:"primary"`
	PrimaryGlow            string `json:"primaryGlow"`
	PrimaryLight           string `json:"primaryLight"`
	Ready                  string `json:"ready"`
	TextNormal             string `json:"textNormal"`
	TextPassive            string `json:"textPassive"`
	Warning                string `json:"warning"`

	BoxShadowGlow         string `json:"boxShadowGlow"`
	ButtonHoverBackground string `json:"buttonHoverBackground"`
	Disabled              string `json:"disabled"`
	InputBorderFocus      string `json:"inputBorderFocus"`
	InputBorderPrimary    string `json:"inputBorderPrimary"`
	PreBackground         string `json:"preBackground"`
	StitchingMajor        string `json:"stitchingMajor"`
	StitchingMinor1       string `json:"stitchingMinor1"`
	StitchingMinor2       string `json:"stitchingMinor2"`
	StitchingMinor3       string `json:"stitchingMinor3"`

	ButtonBorder       string `json:"buttonBorder"`
	ButtonBorderRadius string `json:"buttonBorderRadius"`
	ButtonIconFontSize string `json:"buttonIconFontSize"`
	ButtonPadding      string `json:"buttonPadding"`
}

A TypescriptMotif is a motif in a format the Typescript language integrant can use.