Have `createSystem` extend the default system values

[scottrepreneur]

Describe the bug

I am looking to extend the existing system values, so I only need to add my own custom ones in specific cases.

import { createSystem } from "frog/ui";

export const {
  Heading,
  vars,
  ...
} = createSystem({
  colors: {
    gradientBg: "linear-gradient(to right, #432889, #17101F)",
  }
});

This leaves only one color in the system it seems, instead of extending the default color set with this additional color.

Link to Minimal Reproducible Example

No response

Steps To Reproduce

Lmk if you need this repro. Uses the default UI setup with an additional color as described above.

Frog Version

0.11.2

TypeScript Version

5.4.5

Check existing issues

• I checked there isn't already an issue for the bug I encountered.

Anything else?

No response

[tmm]

Check out defaultVars. In the future, we could add an extend property a la Tailwind.

import { createSystem, defaultVars } from 'frog/ui'

export const { Heading, vars } = createSystem({
  colors: {
    ...defaultVars.colors,
    gradientBg: 'linear-gradient(to right, #432889, #17101F)',
  },
})