packages/react/src/index.scss

@import "@fontsource/roboto/100";
@import "@fontsource/roboto/300";
@import "@fontsource/roboto/400";
@import "@fontsource/roboto/500";
@import "@fontsource/roboto/700";
@import "@fontsource/roboto/900";
@import "cunningham-tokens";
@import '@openfun/cunningham-tokens/default-tokens';
@import './components/Button';

* {
  font-family: var(--c--theme--typo--font-base);
}
⬆️(react) upgrade package to use official tokens ... and install user-event library. Setting the stage for the implementation of real tokens in the Button component. 2023-01-13 15:34:10 +01:00			`@import "@fontsource/roboto/100";`
✨(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 "@fontsource/roboto/300";`
			`@import "@fontsource/roboto/400";`
✨(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 "@fontsource/roboto/500";`
✨(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 "@fontsource/roboto/700";`
			`@import "@fontsource/roboto/900";`
✨(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';`

			`* {`
			`font-family: var(--c--theme--typo--font-base);`
			`}`