apps/demo/cunningham.ts

import { DefaultTokens } from "@openfun/cunningham-react";

const config: DefaultTokens = {
  theme: {
    colors: {
      "primary-500": "purple",
      "success-700": "lime",
      "greyscale-300": "#ff18e5",
    },
  },
  components: {
    button: {
      "border-radius": "30px",
    },
  },
};

export default config;
🏷️(react) export DefaultToken types and defaultTokens variable By doing this we provide more typings for consumers which makes more handy the use of the local configuration in cunningham.ts files. 2023-05-23 15:17:46 +02:00			`import { DefaultTokens } from "@openfun/cunningham-react";`

			`const config: DefaultTokens = {`
🔧(demo) update demo app to ts config file, customize one token Showcase a situation where we want to customize a component's design token. 2023-01-04 15:53:36 +01:00			`theme: {`
			`colors: {`
🔧(demo) update demo app to customize official tokens Showcase how to customize an official design token. 2023-01-18 11:10:36 +01:00			`"primary-500": "purple",`
♻️(demo) demonstrate token references Demonstrate the use of token references by editing the greyscale color which is used by lots of components. 2023-06-29 16:41:35 +02:00			`"success-700": "lime",`
			`"greyscale-300": "#ff18e5",`
🔧(demo) update demo app to ts config file, customize one token Showcase a situation where we want to customize a component's design token. 2023-01-04 15:53:36 +01:00			`},`
			`},`
			`components: {`
			`button: {`
			`"border-radius": "30px",`
			`},`
			`},`
			`};`
🏷️(react) export DefaultToken types and defaultTokens variable By doing this we provide more typings for consumers which makes more handy the use of the local configuration in cunningham.ts files. 2023-05-23 15:17:46 +02:00
			`export default config;`