Theme setup

[viktoria-schwarz]

No description provided.

[ti10le]

How do we create a theme?
Which structure do we use?
What contains a theme?

• a good approach are most parts of theme-ui theming
• a theme has to be individual
• a theme should be can easily used in marigold
• the theme should include most importantly:
  • typography
  • colors
  • styles
  • breakpoints
  • spacing

[ti10le]

https://chakra-ui.com/theme is also a good example. Many parts are similarly.
But I don't like something like this:

fontSizes: {
    xs: "12px",
    sm: "14px",
    md: "16px",
    lg: "18px",
    xl: "20px",
    "2xl": "24px",
    "3xl": "28px",
    "4xl": "36px",
    "5xl": "48px",
    "6xl": "64px",
  },
lineHeights: {
    normal: "normal",
    none: "1",
    shorter: "1.25",
    short: "1.375",
    base: "1.5",
    tall: "1.625",
    taller: "2",
  },
  letterSpacings: {
    tighter: "-0.05em",
    tight: "-0.025em",
    normal: "0",
    wide: "0.025em",
    wider: "0.05em",
    widest: "0.1em",
  },

I like it more to write sizes and spaces like this:

fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 96]

fontWeights: {
    body: 400,
    heading: 700,
    bold: 700,
  },
lineHeights: {
    body: 1.5,
    heading: 1.125,
  },

[ti10le]

theme structure like in theme-ui (https://theme-ui.com/theming):

• typography
  • fonts (font families)
  • fontSizes
  • fontWeights
  • lineHeights
  • letterSpacings
• colors
  • text
  • background
  • primary
  • secondary
  • accent
  • highlight
  • muted
• styles
  • root/base/default
  • h1
  • h2
  • ..
• breakpoints
• spacing
  • padding
  • dimensions
  • alignment

[sebald]

I would like to (re-)add this to the next iteration. Should we just start out by using theme-ui schema for a theme?

[sebald]

As a work item, maybe wen can have some typings that reflect existing variants?
E.g. if we have a text component that reads from theme.text.<variant> there should be typings for that:

type BaseTheme = {
	text: {
		body: {},
        headline: {}
        [key: string]: {}
	}
}

Not sure if this will give good autocomplete though, since a Theme could add variants.