packages/react/src/index.scss

@import "cunningham-tokens";
@import '@openfun/cunningham-tokens/default-tokens';
@import './components/Button';
@import './components/Forms/Input';
@import './components/Pagination';

* {
  font-family: var(--c--theme--font--families--base);
}
✨(react) add tokens.ts files handling These files will be used to define the custom design tokens per components. They are automatically aggregated by the packages/react/cunningham.ts file, this is why handling typescript config file was important. 2023-01-04 15:52:24 +01:00			`@import "cunningham-tokens";`
✨(components) add react repo This repo only contains a Button which is here only for demonstration purpose. Its purpose is to contain all the future react-based components of the design system. 2022-12-01 12:05:08 +01:00			`@import '@openfun/cunningham-tokens/default-tokens';`
✨(react) implement Button with official tokens Now that we have all the official design tokens we can use them to build the button component in various colors matching the design system's ones. 2023-01-12 17:41:14 +01:00			`@import './components/Button';`
✨(react) add a temporary TextInput Even if we haven't started to work on a complete set of inputs we need a generic Input to implement the "goto" feature on the Pagination component. This component is not intended to be used in by the librarie's dependent, so we mark it as "WIP" for the moment. 2023-02-16 14:42:42 +01:00			`@import './components/Forms/Input';`
✨(react) add Pagination component In order to create a DataGrid we first need a fully working pagination component. It comes with multiples working examples in the documentation. 2023-02-20 16:27:37 +01:00			`@import './components/Pagination';`
✨(react) implement Button with official tokens Now that we have all the official design tokens we can use them to build the button component in various colors matching the design system's ones. 2023-01-12 17:41:14 +01:00
			`* {`
✨(tokens) generate css utility classes These were the missing parts in order to use every design tokens of Cunningham. Including: spacing, font weight, size, family, and colors. In order to be really versatile and to allow users to define new design tokens I had to re-organize the way those tokens are sub divided in sub objects in cunningham.ts file. That's why sub division are created for theme.typ.sizes for instance. 2023-01-19 15:30:23 +01:00			`font-family: var(--c--theme--font--families--base);`
✨(react) implement Button with official tokens Now that we have all the official design tokens we can use them to build the button component in various colors matching the design system's ones. 2023-01-12 17:41:14 +01:00			`}`